This question already has answers here:
Make a div fill the height of the remaining screen space
(41 answers)
Closed 8 years ago.
I created a page that has three tables. The second table is inside a div with overflow: auto.
My problem is precisely in this table. I need the entire page has never more than 100% in height.
- The first table should always be visible at the top of the page;
- The third table should always be visible at the bottom of the page;
- The second table should have their height varied according to the space remaining to complete 100% of the browser.
Does anyone know how to solve my dilemma?
Here is a demonstration of the code: http://jsbin.com/omeRUtIr/7/edit?html,css,output
You need to do something like that:
#header {
position: absolute;
top: 0px;
width: 100%;
height: 50px;
}
#content {
position: absolute;
top: 50px;
bottom: 50px;
overflow: auto;
width: 100%;
}
#footer {
position: absolute;
bottom: 0px;
width: 100%;
height: 50px;
}
You can see the result here: http://jsbin.com/omeRUtIr/13/edit
You can also use percentage (instead of fixed height) if you want each table to have one third of the height for example. You will get something like this: http://jsbin.com/omeRUtIr/15/edit.
Related
I have to add a video from Youtube within certain limits (the red borders on screenshot). To add the video within these limits I need to use padding-bottom: 36%. Because of this you can't press the bottom block (with the date).
If I reduce this padding-bottom, the block with date moves to the right place but the height is reduced too.
Here is the part of css:
.calendar__general-slyde-video {
position: relative;
padding-bottom: 36%;
height: 0;
overflow: hidden;
width: 315px;
}
.calendar__general-slyde-video iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 60%;
}
I would be grateful for any help!
ok,if the link you provided is your code and your problem is to place the calendar just below the left most message , i.e "calendar__changing-content" div, then here are some of problems i found
first ,your calendar__general-slyde-video clearfix have height:0 which means your video is being placed on the padding of the div.(which represents it's entire height)
second, your "calendar__changing-content" div does not contain it's children in a single row (assuming that's what you intended based on the given picture) hence your calendar is in the right place but it's sibling div's height is large which makes it appear distorted.
here is the solution to them:
add a height to the video and remove the padding also make the iframe 100% height, also you can remove height from other children's if your wish.
.calendar__general-slyde-video {
position: relative;
overflow: hidden;
width: 315px;
height: 233px;
}
.calendar__general-slyde-video iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
here is the code pen
this should solve your problem, also you can use reset.css to remove browser default settings (just suggesting)
This question already has answers here:
How can I horizontally center an element?
(133 answers)
Closed 1 year ago.
I can't get a div #buttonwrap to center on my site. I have tried every option that is suggested in this similar post. But it still doesn't work. And what is strange is that #backgroundwrap works fine with the same code. I have linted my CSS and HTML markup, but no help.
Hope someone can help me solve this issue, it has been driving me crazy and delete nearly all my code! The full code is online here: http://setup.industries/projects/masqueradeclassix/
.buttonwrap {
margin: 0 auto;
position: relative;
width: 100%;
display: block;
float: none;
}
/* parent */
#container {
width: 100%;
height: 100%;
}
width: 100%;
margin: 0 auto;
It's 100% wide, with auto margins.
So the margins are computed to put it in the center.
i.e. 0 on the left and 0 on the right.
It is centered.
Alright, this is what you need. I really wanted you to find out the solution from there, but here you go:
.buttonwrap {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
Preview
If the width is 100%, it makes no sense to center the element using margin: 0 auto; - it already fills the width of its container. Make the width a value smaller than 100%, or a fixed pixel value.
This question already has answers here:
Make a div fill the height of the remaining screen space
(41 answers)
Closed 8 years ago.
The div container .wrapper under #Wrapper must fill the space between header and footer. So it should get the height of the #Wrapper container.
jsFiddle Example - UPDATE
Could you help me?
The easy way, because your header and footer have specific heights, is to do the following:
// Add the following to #wrapper
#wrapper {
position: absolute;
top: 200px;
left: 0;
right: 0;
bottom: 200px;
// IMPORTANT
// REMOVE the following rule:
// min-height: 100%;
}
Remember to remove the min-height: 100%; from #wrapper
Here's a fiddle. Good luck...
I have a div which has its CSS initially defined as:
.mydiv {
position: absolute;
top: 60px;
left: 60px;
right: 60px;
bottom: 60px;
background-color: cyan;
overflow: hidden;
}
That is with equal distance from screen borders and I wanted to make it draggable via jQuery. This wouldn't work because of the right and bottom CSS directives.
So my next idea was to use this CSS definition:
.mydiv {
position: absolute;
width: 90%;
height: 90%;
margin-left: 5%;
margin-top: 5%;
background-color: cyan;
overflow: hidden;
}
Which according to my understanding would create a div with a width and height equal to 90% of the screen width/height and additionally the margin directives (5% on each side) would position it in the center of the screen.
This solution doesn't seem to work for 100%.
It works horizontally, the div is centered horizontally BUT vertically the space in the bottom is less than the space on top. Which is not what I want it to be.
I know I could use calc() to solve it in a different way but I want to avoid it due to browser compatibility (IE8).
I was wondering what I'm doing wrong?
i'm kind of stupid today.
i removed the margins and used:
top: 5%;
left: 5%;
and it solved my problem.
#header
{
position: absolute;
top: 0%;
height: 24px;
}
#body
{
position: absolute;
top: 24px;
bottom: 20%;
overflow: auto;
}
#footer
{
position: absolute;
bottom: 0px;
height: 17.2%;
min-height: 80px;
overflow: auto;
}
My problem is that when I compress the browser window, the middle element (the 'body') starts to slip into the footer's area (when 20% from the bottom becomes larger than the minimum height of the footer). The footer can be larger in height than its minimum, but it cannot be smaller.
Any good way to do this without Javascript code?
No. When an element is positioned absolutely it is removed from the flow of the document and has no knowledge of any other elements.
I have not seen a sticky-footer solution that will work with a variable height footer.
There are some examples of headers and footers on Dynamic Drive. These are pure CSS layout examples.
You should be able to achieve the same effect with a combination of these two.