<div>不占用页面的整个高度
[英]<div> doesn't take the full height of the page
问题描述
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. 
我试图使用类.column的4个colums为页面高度的100％，但不能这样做，我不知道为什么。
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 个解决方案
解决方案1
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: 将以下CSS添加到每个div中，您希望其高度为页面高度的100％：
height: 100vh;
example: 例：
<div class="column" id="html" style="height: 100vh;">
This column needs to be 100% of the page's height
</div>
解决方案2
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 父级和父级的百分比是.header ，其高度为40px，这就是为什么你的列高度为40px的原因
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 读到这里VH https://developer.mozilla.org/en/docs/Web/CSS/length
解决方案3
0 2016-12-11 16:49:52
You can use CSS Flexbox . 您可以使用CSS Flexbox 。 You also need to change your HTML structure a little. 您还需要稍微更改HTML结构。
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. 将所有4列包装在父div中（在我的例子中，它被命名为.column-holder ）并使用CSS calc()函数给它一个高度。 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! 希望这可以帮助！
解决方案4
0 2016-12-11 16:51:23
Your HTML structure is Wrong . 您的HTML结构错误。 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; 如果你想让Column获取整页高度，你需要将标题放入标题中设置为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>
解决方案5
0 2016-12-11 18:36:42
EDITED ANSWER AFTER COMMENT (html structure in question was wrong) 评论后的编辑答案（有问题的html结构错误）
You would probably want to restrict the overall height to 100%, so use height: calc(100% - 40px); 您可能希望将总高度限制为100％，因此请使用height: calc(100% - 40px); on .column as in the following snippet: 在.column如下面的代码段所示：
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>
解决方案6
0 2016-12-11 19:53:57
You can use HEIGHT calc Tricks to get the height for column class. 您可以使用HEIGHT calc Tricks来获取列类的高度。 For this calc you need to header height and close the header div before the clear div and after the menu close div. 对于此计算，您需要标题高度并关闭清除div之前和菜单关闭div之后的标题div。 Then you just write the column height something like this height: calc(100% - 40px) . 然后你只需要写出像这个高度的列高度：calc（100％ - 40px）。 40px is your header height. 40px是你的标题高度。 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; 你也不需要列顶：0左：0; you can use this when you use position element. 你可以在使用position元素时使用它。 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>
解决方案7
-1 2016-12-11 17:00:37
You can use a flex-layout and achieve this with min-height property. 您可以使用flex-layout并使用min-height属性实现此目的。 For more info on flex layout read this -> https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 有关flex布局的更多信息，请阅读 - > 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;
}
}
http://codepen.io/anon/pen/OboJdP http://codepen.io/anon/pen/OboJdP
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.