Menu
Method 2: We can make the display attribute of the child container to table-row and display attribute of parent container to table, that will take all the height available from the parent div element. To cover all the width, we can make the width of parent div to 100%.
We found a solution! We add position:absolute;height:100%;width:100%; to the body tag and then our div gets on the whole screen without positioning attribute :) just height:100% and width:100%. Thanks to all who participated!
height: 100% gives the element 100% height of its parent container.
Here is the solution I finally came up with when using a div as a container for a dynamic background.
z-index for non-background uses.left or right for a full height column.top or bottom for a full width row.EDIT 1: CSS below has been edited because it did not show correctly in FF and Chrome. moved position:relative to be on the HTML and set the body to height:100% instead of min-height:100%.
EDIT 2: Added extra comments to CSS. Added some more instructions above.
The CSS:
html{
min-height:100%;/* make sure it is at least as tall as the viewport */
position:relative;
}
body{
height:100%; /* force the BODY element to match the height of the HTML element */
}
#cloud-container{
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
overflow:hidden;
z-index:-1; /* Remove this line if it's not going to be a background! */
}
The html:
<!doctype html>
<html>
<body>
<div id="cloud-container"></div>
</body>
</html>
Why?
html{min-height:100%;position:relative;}
Without this the cloud-container DIV is removed from the HTML's layout context. position: relative ensures that the DIV remains inside the HTML box when it is drawn so that bottom:0 refers to the bottom of the HTML box. You can also use height:100% on the cloud-container as it now refers to the height of the HTML tag and not the viewport.
With HTML5, the easiest way is simply to do height: 100vh. Where 'vh' stands for viewport height of the browser window. Responsive to resizing of browser and mobile devices.
I had a similar problem and the solution was to do this:
#cloud-container{
position:absolute;
top:0;
bottom:0;
}
I wanted a page-centered div with height 100% of page height, so my total solution was:
#cloud-container{
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
width: XXXpx; /*otherwise div defaults to page width*/
margin: 0 auto; /*horizontally centers div*/
}
You might need to make a parent element (or simply 'body') have position: relative;
You can cheat using Faux Columns Or you can use some CSS trickery
Use position absolute. Note that this isn't how we are generally used to using position absolute which requires manually laying things out or having floating dialogs. This will automatically stretch when you resize the window or the content. I believe that this requires standards mode but will work in IE6 and above.
Just replace the div with id 'thecontent' with your content (the specified height there is just for illustration, you don't have to specify a height on the actual content.
<div style="position: relative; width: 100%;">
<div style="position: absolute; left: 0px; right: 33%; bottom: 0px; top: 0px; background-color: blue; width: 33%;" id="navbar">nav bar</div>
<div style="position: relative; left: 33%; width: 66%; background-color: yellow;" id="content">
<div style="height: 10000px;" id="thecontent"></div>
</div>
</div>
The way that this works is that the outer div acts as a reference point for the nav bar. The outer div is stretched out by the content of the 'content' div. The nav bar uses absolute positioning to stretch itself out to the height of its parent. For the horizontal alignment we make the content div offset itself by the same width of the navbar.
This is made much easier with CSS3 flex box model, but that's not available in IE yet and has some of it's own quirks.
I ran into the same problem as you. I wanted to make a DIV as background, why, because its easy to manipulate div through javascript. Anyways three things I did in the css for that div.
CSS:
{
position:absolute;
display:block;
height:100%;
width:100%;
top:0px;
left:0px;
z-index:-1;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With