<div> doesn't take the full height of the page
Question
I am trying to make the 4 colums with the class .column to be 100% of the page's height, but can't do it and I have no idea why.
body, html { margin: 0px; padding: 0px; font-family: Helvetica, sans-serif; height: 100%; width: 100%; } #header { height: 40px; width: 100%; background-color: grey; display: block; } #logo { float: left; font-size: 30px; font-weight: bold; padding-left: 15; padding-top: 3px; margin: 0 auto; width: 10%; } #menu { margin: 0 auto; width: 50%; height: 50%; padding: 10px; text-align: center; } #menu li { display: inline; border: 1px solid black; border-radius: 15%; background-color: red; color: white; } #menu a { text-decoration: none; padding: 0 10px; /* variable width */ } a:hover { background-color: black; } a:link, a:visited, a:active { color: white; } .column { top: 0; left: 0; margin: 0; padding: 0; width: 25%; height: 100%; float: left; -webkit-box-shadow: inset 0px 0px 0px 1px black; -moz-box-shadow: inset 0px 0px 0px 1px black; box-shadow: inset 0px 0px 0px 1px black; } .clear-div { clear: both; }
<div id="header"> <div id="logo"> CodePlayer </div> <div id="menu"> <li><a href="#">HTML</a> </li> <li><a href="#">CSS</a> </li> <li><a href="#">JAVASCRIPT</a> </li> <li><a href="#">OUTPUT</a> </li> </div> <div class="clear-div"> </div> <div class="column" id="html"> This column needs to be 100% of the page's height </div> <div class="column" id="css"> This column needs to be 100% of the page's height </div> <div class="column" id="javascript"> This column needs to be 100% of the page's height </div> <div class="column" id="output"> This column needs to be 100% of the page's height </div> </div>
I am a beginner and every advice on good web developement practices will be very valuable to me so if there's something that I could've have done better please let me know.
7 answers
solution1
3 2016-12-11 18:20:01
Add the following CSS to each of your divs,for which you want the height to be 100% of page height:
height: 100vh;
example:
<div class="column" id="html" style="height: 100vh;">
This column needs to be 100% of the page's height
</div>
solution2
2 2016-12-11 16:42:50
percentages are with respect to parents and parent of column is .header which have 40px height thats why you have 40px height for you column
the problem you are solving is a bit difficult but you can do this
.column {
height: 100vh;
}
see if that helps you
read about vh here https://developer.mozilla.org/en/docs/Web/CSS/length
solution3
0 2016-12-11 16:49:52
You can use CSS Flexbox . You also need to change your HTML structure a little.
Wrap all your 4 columns inside a parent div (in my case it is named as .column-holder ) and give it a height using CSS calc() function. Like:
.column-holder {
display: flex;
height: calc(100vh - 45px); /* Total Viewport Height - Header Height */
}
Have a look at the working snippet below ( use full screen mode ):
body, html { margin: 0px; padding: 0px; font-family: Helvetica, sans-serif; height: 100%; width: 100%; } #header { height: 45px; width: 100%; background-color: grey; display: block; } #logo { float:left; font-size: 30px; font-weight: bold; padding-left: 15; padding-top: 3px; margin: 0 auto; width: 10%; } #menu { margin: 0 auto; width: 50%; padding: 10px; text-align:center; } #menu li { display:inline; border: 1px solid black; border-radius: 15%; background-color: red; color: white; } #menu a { text-decoration:none; padding:0 10px; /* variable width */ } a:hover { background-color: black; } a:link, a:visited, a:active { color: white; } .column { top: 0; left:0; margin: 0; padding: 0; width: 25%; height: 100%; float: left; -webkit-box-shadow:inset 0px 0px 0px 1px black; -moz-box-shadow:inset 0px 0px 0px 1px black; box-shadow:inset 0px 0px 0px 1px black; } .clear-div { clear:both; } .column-holder { display: flex; height: calc(100vh - 45px); }
<html> <head> <title>CodePlayer</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div id="header"> <div id="logo"> CodePlayer </div> <div id="menu"> <li><a href="#">HTML</a></li> <li><a href="#">CSS</a></li> <li><a href="#">JAVASCRIPT</a></li> <li><a href="#">OUTPUT</a></li> </div> <div class="clear-div"></div> </div> <div class="column-holder"> <div class="column" id="html"> This column needs to be 100% of the page's height </div> <div class="column" id="css"> This column needs to be 100% of the page's height </div> <div class="column" id="javascript"> This column needs to be 100% of the page's height </div> <div class="column" id="output"> This column needs to be 100% of the page's height </div> </div> </body> </html>
Hope this helps!
solution4
0 2016-12-11 16:51:23
Your HTML structure is Wrong . if you wish to make Column take full page Height you will need to put columns out of header which is set to height:40px;
body, html { margin: 0px; padding: 0px; font-family: Helvetica, sans-serif; height: 100%; width: 100%; } #header { height: 40px; width: 100%; background-color: grey; display: block; } #logo { float: left; font-size: 30px; font-weight: bold; padding-left: 15; padding-top: 3px; margin: 0 auto; width: 10%; } #menu { margin: 0 auto; width: 50%; height: 50%; padding: 10px; text-align: center; } #menu li { display: inline; border: 1px solid black; border-radius: 15%; background-color: red; color: white; } #menu a { text-decoration: none; padding: 0 10px; /* variable width */ } a:hover { background-color: black; } a:link, a:visited, a:active { color: white; } .column { top: 0; left: 0; margin: 0; padding: 0; width: 25%; height: 100%; float: left; -webkit-box-shadow: inset 0px 0px 0px 1px black; -moz-box-shadow: inset 0px 0px 0px 1px black; box-shadow: inset 0px 0px 0px 1px black; } .clear-div { clear: both; }
<div id="header"> <div id="logo"> CodePlayer </div> <div id="menu"> <li><a href="#">HTML</a> </li> <li><a href="#">CSS</a> </li> <li><a href="#">JAVASCRIPT</a> </li> <li><a href="#">OUTPUT</a> </li> </div> </div> <div class="clear-div"> </div> <div class="column" id="html"> This column needs to be 100% of the page's height </div> <div class="column" id="css"> This column needs to be 100% of the page's heigh </div> <div class="column" id="javascript"> This column needs to be 100% of the page's height </div> <div class="column" id="output"> This column needs to be 100% of the page's height </div>
solution5
0 2016-12-11 18:36:42
EDITED ANSWER AFTER COMMENT (html structure in question was wrong)
You would probably want to restrict the overall height to 100%, so use height: calc(100% - 40px); on .column as in the following snippet:
body, html { margin: 0px; padding: 0px; font-family: Helvetica, sans-serif; height: 100%; width: 100%; } #header { height: 40px; width: 100%; height: 40px; background-color: grey; display: block; } #logo { float: left; font-size: 30px; font-weight: bold; padding-left: 15; padding-top: 3px; margin: 0 auto; width: 10%; } #menu { margin: 0 auto; width: 50%; padding: 10px; text-align: center; } #menu li { display: inline; border: 1px solid black; border-radius: 15%; background-color: red; color: white; } #menu a { text-decoration: none; padding: 0 10px; /* variable width */ } a:hover { background-color: black; } a:link, a:visited, a:active { color: white; } .column { margin: 0; padding: 0; width: 25%; height: calc(100% - 40px); float: left; -webkit-box-shadow: inset 0px 0px 0px 1px black; -moz-box-shadow: inset 0px 0px 0px 1px black; box-shadow: inset 0px 0px 0px 1px black; } .clear-div { clear: both; }
<div id="header"> <div id="logo"> CodePlayer </div> <div id="menu"> <li><a href="#">HTML</a> </li> <li><a href="#">CSS</a> </li> <li><a href="#">JAVASCRIPT</a> </li> <li><a href="#">OUTPUT</a> </li> </div> <div class="clear-div"> </div> </div> <div class="column" id="html"> This column needs to be 100% of the page's height </div> <div class="column" id="css"> This column needs to be 100% of the page's height </div> <div class="column" id="javascript"> This column needs to be 100% of the page's height </div> <div class="column" id="output"> This column needs to be 100% of the page's height </div>
solution6
0 2016-12-11 19:53:57
You can use HEIGHT calc Tricks to get the height for column class. For this calc you need to header height and close the header div before the clear div and after the menu close div. Then you just write the column height something like this height: calc(100% - 40px) . 40px is your header height. Additional suggestions: remove the width and height you set for menu. So you will get better view on small screen. Also you don't need the column top:0 left:0; you can use this when you use position element. If you have any Question ask me in comment
body, html { margin: 0px; padding: 0px; font-family: Helvetica, sans-serif; height: 100%; width: 100%; } #header { height: 40px; width: 100%; background-color: grey; display: block; } #logo { float: left; font-size: 30px; font-weight: bold; padding-left: 15; padding-top: 3px; margin: 0 auto; width: 10%; } #menu { margin: 0 auto; padding: 10px; text-align: center; } #menu li { display: inline; border: 1px solid black; border-radius: 15%; background-color: red; color: white; } #menu a { text-decoration: none; padding: 0 10px; /* variable width */ } a:hover { background-color: black; } a:link, a:visited, a:active { color: white; } .column { margin: 0; padding: 0; width: 25%; height: calc(100% - 40px); float:left; -webkit-box-shadow: inset 0px 0px 0px 1px black; -moz-box-shadow: inset 0px 0px 0px 1px black; box-shadow: inset 0px 0px 0px 1px black; } .clear-div { clear: both; }
<div id="header" class="clear-div"> <div id="logo"> CodePlayer </div> <div id="menu"> <li><a href="#">HTML</a> </li> <li><a href="#">CSS</a> </li> <li><a href="#">JAVASCRIPT</a> </li> <li><a href="#">OUTPUT</a> </li> </div> </div> <div class="clear-div"></div> <div class="column" id="html"> This column needs to be 100% of the page's height </div> <div class="column" id="css"> This column needs to be 100% of the page's height </div> <div class="column" id="javascript"> This column needs to be 100% of the page's height </div> <div class="column" id="output"> This column needs to be 100% of the page's height </div>
solution7
-1 2016-12-11 17:00:37
You can use a flex-layout and achieve this with min-height property. For more info on flex layout read this -> https://css-tricks.com/snippets/css/a-guide-to-flexbox/
.fill-height-or-more {
min-height: 100%;
display: flex;
flex-direction: row;
> div {
border-style: solid;
display: flex;
flex-direction: column;
}
}
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.