我正在开发一个web应用程序,我希望内容能够填满整个屏幕的高度。
该页面有一个标题,其中包含徽标和帐户信息。这可以是任意高度。我希望contentdiv将页面的其余部分填充到底。
我有一个header div和一个content div。目前,我正在为布局使用一个表,如下所示:
CSS和HTML
#第页{高度:100%;宽度:100%}#td含量{高度:100%;}#内容{溢出:自动;/*或溢出:隐藏*/}<table id=“page”><tr><td id=“tdheader”><div id=“header”></分区></td></tr><tr><td id=“tdcontent”><div id=“content”></分区></td></tr></table>
页面的整个高度已填充,不需要滚动。
对于contentdiv中的任何内容,设置top:0;会把它放在标题下面。有时内容将是一个真实的表格,其高度设置为100%。将标题放在内容内不允许这样做。
有没有一种方法不使用桌子就能达到同样的效果?
更新:
contentdiv中的元素也将高度设置为百分比。因此,div中100%的内容将填充到底部。50%的两个元素也是如此。
更新2:
例如,如果标题占屏幕高度的20%,则在#内容内部指定50%的表将占屏幕空间的40%。到目前为止,把整个东西包在桌子里是唯一有效的方法。
我也有同样的问题,但我无法用上面的柔性箱解决问题。因此,我创建了自己的模板,其中包括:
具有固定大小元素的标头页脚带有滚动条的侧栏,占据剩余高度所容纳之物
我使用了flexbox,但方法更简单,只使用了财产display:flex和flex-direction:row|column:
我确实使用了angular,我希望我的组件大小是它们的父元素的100%。
关键是为所有父母设置大小(以百分比为单位),以限制他们的大小。在以下示例中,myapp高度占视口的100%。
主组件占视口的90%,因为页眉和页脚占5%。
我在这里发布了我的模板:https://jsfiddle.net/abreneliere/mrjh6y2e/3
body{
margin: 0;
color: white;
height: 100%;
}
div#myapp
{
display: flex;
flex-direction: column;
background-color: red; /* <-- painful color for your eyes ! */
height: 100%; /* <-- if you remove this line, myapp has no limited height */
}
div#main /* parent div for sidebar and content */
{
display: flex;
width: 100%;
height: 90%;
}
div#header {
background-color: #333;
height: 5%;
}
div#footer {
background-color: #222;
height: 5%;
}
div#sidebar {
background-color: #666;
width: 20%;
overflow-y: auto;
}
div#content {
background-color: #888;
width: 80%;
overflow-y: auto;
}
div.fized_size_element {
background-color: #AAA;
display: block;
width: 100px;
height: 50px;
margin: 5px;
}
Html:
<body>
<div id="myapp">
<div id="header">
HEADER
<div class="fized_size_element"></div>
</div>
<div id="main">
<div id="sidebar">
SIDEBAR
<div class="fized_size_element"></div>
<div class="fized_size_element"></div>
<div class="fized_size_element"></div>
<div class="fized_size_element"></div>
<div class="fized_size_element"></div>
<div class="fized_size_element"></div>
<div class="fized_size_element"></div>
<div class="fized_size_element"></div>
</div>
<div id="content">
CONTENT
</div>
</div>
<div id="footer">
FOOTER
</div>
</div>
</body>
免责声明:公认的答案给出了解决方案的想法,但我发现它有点臃肿,因为不必要的包装和css规则。下面是一个只有很少css规则的解决方案。
HTML 5
<body>
<header>Header with an arbitrary height</header>
<main>
This container will grow so as to take the remaining height
</main>
</body>
CSS
body {
display: flex;
flex-direction: column;
min-height: 100vh; /* body takes whole viewport's height */
}
main {
flex: 1; /* this will make the container take the free space */
}
上面的解决方案使用视口单元和flexbox,因此是IE10+,前提是您使用IE10的旧语法。
要使用的代码笔:指向代码笔的链接
或者这一个,对于那些需要主容器在内容溢出时可滚动的人:链接到codepen