堆栈内存溢出
  繁体   English   中英

<div>不占用页面的整个高度

[英]<div> doesn't take the full height of the page

 原文  2016-12-11 16:35:39  2   7    html/ css

问题描述

我试图使用类.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>

我是初学者，关于良好的网络开发实践的每一条建议对我都非常有价值，所以如果我能做得更好，请告诉我。

7 个解决方案

解决方案1
 3  2016-12-11 18:20:01

将以下CSS添加到每个div中，您希望其高度为页面高度的100％： 

 height: 100vh;

例： 

<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

父级和父级的百分比是.header ，其高度为40px，这就是为什么你的列高度为40px的原因

你解决的问题有点困难，但你可以做到这一点 

.column {
  height: 100vh;
}

看看这有助于你

读到这里VH https://developer.mozilla.org/en/docs/Web/CSS/length

解决方案3
 0  2016-12-11 16:49:52

您可以使用CSS Flexbox 。 您还需要稍微更改HTML结构。

将所有4列包装在父div中（在我的例子中，它被命名为.column-holder ）并使用CSS calc()函数给它一个高度。 喜欢： 

.column-holder {
  display: flex;
  height: calc(100vh - 45px); /* Total Viewport Height - Header Height */
}

看看下面的工作片段（ 使用全屏模式 ）： 

 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>

希望这可以帮助！

解决方案4
 0  2016-12-11 16:51:23

您的HTML结构错误。 如果你想让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

评论后的编辑答案（有问题的html结构错误）

您可能希望将总高度限制为100％，因此请使用height: calc(100% - 40px); 在.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

您可以使用HEIGHT calc Tricks来获取列类的高度。 对于此计算，您需要标题高度并关闭清除div之前和菜单关闭div之后的标题div。 然后你只需要写出像这个高度的列高度：calc（100％ - 40px）。 40px是你的标题高度。 其他建议：删除您为菜单设置的宽度和高度。 因此，您将在小屏幕上获得更好的视图。 你也不需要列顶：0左：0; 你可以在使用position元素时使用它。 如果您有任何问题请在评论中询问我 

 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

您可以使用flex-layout并使用min-height属性实现此目的。 有关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

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 Div没有采用全高度，因为它的子锚用填充物 jQuery的div高度不正确 div不占整个高度/不是100％ Div不会占用iframe的高度 全高级别不能使div全高 全高 div 不起作用 重叠式广告不会占据整页 Div不能全高 Div不是页面的完整高度 嵌套DIV - 嵌套DIV不占用高度？
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM