Div not full height of page
Question
I'm building three column div website and can't get the div to color the whole page. It only covers the window and everything after the scroll gets messed up.
As you can see here http://imgur.com/T5lOuy6 How can I get it to maintain the column shape after the scroll? Here is my code
* { margin: 0; padding: 0; } .container {} .right { float: right; width: 20%; background-color: Beige; height: 100vh; } .left { float: left; width: 20%; background-color: Beige; height: 100vh; } .middle { margin: 0 100px; background-color: Cornsilk; height: 100vh; } .menu ul { list-style-type: none; display: inline; text-align: center; } .menu ul li { display: inline; width: 15%; float: left; } .contact { margin-left: 25px; } img.alignright { float: right; margin-left: 10px; margin-top: 10px; margin-bottom: 10px; margin-right: 10px; } img.alignleft { float: left; margin-left: 10px; margin-top: 10px; margin-bottom: 10px; margin-right: 10px; } hr { height: 10px; color: Beige; background-color: Beige; border: none; }
<body> <a name="top"></a> <div class=container> <div class=right> col3 </div> <div class=left> col1 </div> <div class=middle> <div class=header> <header> <h1><center>At the Gallerys</center></h1> </header> <br> <center><font size=5px><b> Virtual Collection</b></font> </center> <br> <hr> <br> <center><font size=4px>Current Selections</font> </center> <br> </div> <div class=menu> <ul> <li><a href="#img1">Milk</a> </li> <li><a href="#img2">Eggs</a> </li> <li><a href="#img3">Cheese</a> </li> <li><a href="#img4">Vegetas</a> </li> </ul> <br> <br> <hr> </div> <div class=gallery> <img src="1.png" class="alignleft" /> <a name="img1"></a> <p align="left"> Artist</br> Title</br> year</br> type</br> size</br> collection</br> </p> <br> <br> <br> <hr> <img src="1.png" class="alignright" /> <a name="img2"></a> <p align="right"> Artist</br> Title</br> year</br> type</br> size</br> collection</br> </p> <br> <br> <br> <hr> <img src="1.png" class="alignleft" /> <a name="img3"></a> <p align="left"> Artist</br> Title</br> year</br> type</br> size</br> collection</br> </p> <br> <br> <br> <hr> <img src="1.png" class="alignright" /> <a name="img4"></a> <p align="right"> Artist</br> Title</br> year</br> type</br> size</br> collection</br> </p> <br> <br> <br> <hr> </div> <div class=contact> <p align="left"> Please feel free to contact our curator at <br>123 Main Street <br>Toronto,Ontario <br>M1A 2B3 <br> <br>You can also reach us by <br>Email: <br>Telephone:416-555-6789 <br> </p> </div> </div> </div>
1 answers
solution1
3 2015-10-10 16:28:53
Because height:100vh; is the height of the viewport, which in this case is the height of the window. If you want your items to expand the entire page make it height:100%; , which will work as long as the parent element expands the page ( is the container ). Note that you need to define the height of the container so the elements child know what height they need to be:
Note: I've changed the structure of your items in this example. Basically you want to stack each element to the left of the other, so the right element would be last in the DOM.
* { margin: 0; padding: 0; } .container { height: 1045px; } .right { float: left; width: 20%; background-color: Beige; height: 100%; } .left { float: left; width: 20%; background-color: Beige; height: 100%; } .middle { float: left; width: 60%; background-color: Cornsilk; height: 100%; } .menu ul { list-style-type: none; display: inline; text-align: center; } .menu ul li { display: inline; width: 15%; float: left; } .contact { margin-left: 25px; } img.alignright { float: right; margin-left: 10px; margin-top: 10px; margin-bottom: 10px; margin-right: 10px; } img.alignleft { float: left; margin-left: 10px; margin-top: 10px; margin-bottom: 10px; margin-right: 10px; } hr { height: 10px; color: Beige; background-color: Beige; border: none; }
<body> <a name="top"></a> <div class=container> <div class=left> col1 </div> <div class=middle> <div class=header> <header> <h1><center>At the Gallerys</center></h1> </header> <br> <center><font size=5px><b> Virtual Collection</b></font> </center> <br> <hr> <br> <center><font size=4px>Current Selections</font> </center> <br> </div> <div class=menu> <ul> <li><a href="#img1">Milk</a> </li> <li><a href="#img2">Eggs</a> </li> <li><a href="#img3">Cheese</a> </li> <li><a href="#img4">Vegetas</a> </li> </ul> <br> <br> <hr> </div> <div class=gallery> <img src="1.png" class="alignleft" /> <a name="img1"></a> <p align="left"> Artist</br> Title</br> year</br> type</br> size</br> collection</br> </p> <br> <br> <br> <hr> <img src="1.png" class="alignright" /> <a name="img2"></a> <p align="right"> Artist</br> Title</br> year</br> type</br> size</br> collection</br> </p> <br> <br> <br> <hr> <img src="1.png" class="alignleft" /> <a name="img3"></a> <p align="left"> Artist</br> Title</br> year</br> type</br> size</br> collection</br> </p> <br> <br> <br> <hr> <img src="1.png" class="alignright" /> <a name="img4"></a> <p align="right"> Artist</br> Title</br> year</br> type</br> size</br> collection</br> </p> <br> <br> <br> <hr> </div> <div class=contact> <p align="left"> Please feel free to contact our curator at <br>123 Main Street <br>Toronto,Ontario <br>M1A 2B3 <br> <br>You can also reach us by <br>Email: <br>Telephone:416-555-6789 <br> </p> </div> </div> <div class=right> col3 </div> </div>
If you don't want to define the height of the container then you will need to know the height of the largest element (this this case middle ) and use JavaScript to set the height of the elements to be the same as that element.
window.onload = function(){
document.getElementByClassName("left")[0].height = document.getElementByClassName("middle")[0].height;
document.getElementByClassName("right")[0].height = document.getElementByClassName("middle")[0].height;
...
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.