I have a navigation bar on the left hand side of my page, and I want it to stretch to 100% of the page height. Not just the height of the viewport, but including the areas hidden until you scroll. I don't want to use javascript to accomplish this.
Can it be done in HTML/CSS?
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.
Simple, just wrap it up in a table div...
The HTML:
<div class="fake-table">
<div class="left-side">
some text
</div>
<div class="right-side">
My Navigation or something
</div>
</div>
The CSS:
<style>
.fake-table{display:table;width:100%;height:100%;}
.left-size{width:30%;height:100%;}
.left-size{width:70%;height:100%;}
</style>
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.
It's simple using a table:
<html>
<head>
<title>100% Height test</title>
</head>
<body>
<table style="float: left; height: 100%; width: 200px; border: 1px solid red">
<tbody>
<tr>
<td>Nav area</td>
</tr>
</tbody>
</table>
<div style="border: 1px solid green;">Content blabla... text
<br /> text
<br /> text
<br /> text
<br />
</div>
</body>
</html>
When DIV was introduced, people were so afraid of tables that the poor DIV became the metaphorical hammer.
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.
_x000D_
document.body.onload = function () {_x000D_
var textcontrol = document.getElementById("page");_x000D_
textcontrol.style.height = (window.innerHeight) + 'px';_x000D_
}<html>_x000D_
<head><title></title></head>_x000D_
<body>_x000D_
_x000D_
<div id="page" style="background:green;">_x000D_
</div>_x000D_
</body>_x000D_
</html>* {
margin: 0;
}
html, body {
height: 90%;
}
.content {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto ;
}
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 are targeting more modern browsers, life can be very simple. try:
.elem{
height: 100vh;
}
if you need it at 50% of the page, replace 100 with 50.
I want to cover the whole web page before prompting a modal popup. I tried many methods using CSS and Javascript but none of them help until I figure out the following solution. It works for me, I hope it helps you too.
<!DOCTYPE html>_x000D_
<html>_x000D_
<head>_x000D_
<style>_x000D_
html, body {_x000D_
margin: 0px 0px;_x000D_
height 100%;_x000D_
}_x000D_
_x000D_
div.full-page {_x000D_
position: fixed;_x000D_
top: 0;_x000D_
bottom: 0;_x000D_
width: 100%;_x000D_
height: 100%;_x000D_
background-color: #000;_x000D_
opacity:0.8;_x000D_
overflow-y: hidden;_x000D_
overflow-x: hidden;_x000D_
}_x000D_
_x000D_
div.full-page div.avoid-content-highlight {_x000D_
position: relative;_x000D_
width: 100%;_x000D_
height: 100%;_x000D_
}_x000D_
_x000D_
div.modal-popup {_x000D_
position: fixed;_x000D_
top: 20%;_x000D_
bottom: 20%;_x000D_
left: 30%;_x000D_
right: 30%;_x000D_
background-color: #FFF;_x000D_
border: 1px solid #000;_x000D_
}_x000D_
</style>_x000D_
<script>_x000D_
_x000D_
// Polling for the sake of my intern tests_x000D_
var interval = setInterval(function() {_x000D_
if(document.readyState === 'complete') {_x000D_
clearInterval(interval);_x000D_
isReady();_x000D_
} _x000D_
}, 1000);_x000D_
_x000D_
function isReady() {_x000D_
document.getElementById('btn1').disabled = false;_x000D_
document.getElementById('btn2').disabled = false;_x000D_
_x000D_
// disable scrolling_x000D_
document.getElementsByTagName('body')[0].style.overflow = 'hidden';_x000D_
}_x000D_
_x000D_
function promptModalPopup() {_x000D_
document.getElementById("div1").style.visibility = 'visible';_x000D_
document.getElementById("div2").style.visibility = 'visible';_x000D_
_x000D_
// disable scrolling_x000D_
document.getElementsByTagName('body')[0].style.overflow = 'hidden';_x000D_
}_x000D_
_x000D_
function closeModalPopup() {_x000D_
document.getElementById("div2").style.visibility = 'hidden'; _x000D_
document.getElementById("div1").style.visibility = 'hidden';_x000D_
_x000D_
// enable scrolling_x000D_
document.getElementsByTagName('body')[0].style.overflow = 'scroll';_x000D_
}_x000D_
</script>_x000D_
_x000D_
</head>_x000D_
<body id="body">_x000D_
<div id="div1" class="full-page">_x000D_
<div class="avoid-content-highlight">_x000D_
_x000D_
</div>_x000D_
</div>_x000D_
<button id="btn1" onclick="promptModalPopup()" disabled>Prompt Modal Popup</button>_x000D_
<div id="demo">_x000D_
<h2>Original content</h2>_x000D_
<h2>Original content</h2>_x000D_
<h2>Original content</h2>_x000D_
<h2>Original content</h2>_x000D_
<h2>Original content</h2>_x000D_
<h2>Original content</h2>_x000D_
<h2>Original content</h2>_x000D_
<h2>Original content</h2>_x000D_
<h2>Original content</h2>_x000D_
<h2>Original content</h2>_x000D_
<h2>Original content</h2>_x000D_
<h2>Original content</h2>_x000D_
<h2>Original content</h2>_x000D_
<h2>Original content</h2>_x000D_
<h2>Original content</h2>_x000D_
<h2>Original content</h2>_x000D_
<h2>Original content</h2>_x000D_
<h2>Original content</h2>_x000D_
<h2>Original content</h2>_x000D_
<h2>Original content</h2>_x000D_
<h2>Original content</h2>_x000D_
<h2>Original content</h2>_x000D_
<h2>Original content</h2>_x000D_
</div>_x000D_
<div id="div2" class="modal-popup">_x000D_
I am on top of all other containers_x000D_
<button id="btn2" onclick="closeModalPopup()" disabled>Close</button>_x000D_
<div>_x000D_
</body>_x000D_
</html>Good luck ;-)
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;
Source: Stackoverflow.com