我正在开发一个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%。到目前为止,把整个东西包在桌子里是唯一有效的方法。


当前回答

您可以使用CSS表,而不是在标记中使用表。

加成

<body>    
    <div>hello </div>
    <div>there</div>
</body>

(相关)CSS

body
{
    display:table;
    width:100%;
}
div
{
    display:table-row;
}
div+ div
{
    height:100%;  
}

FIDDLE1和FIDDLE2

该方法的一些优点是:

1) 较少的加价

2) 标记比表更具语义,因为这不是表格数据。

3) 浏览器支持非常好:IE8+,所有现代浏览器和移动设备(犬舍)

为了完整起见,下面是css表模型中与css财产等效的Html元素

table    { display: table }
tr       { display: table-row }
thead    { display: table-header-group }
tbody    { display: table-row-group }
tfoot    { display: table-footer-group }
col      { display: table-column }
colgroup { display: table-column-group }
td, th   { display: table-cell }
caption  { display: table-caption } 

其他回答

对于移动应用程序,我只使用VH和VW

<div class="container">
    <div class="title">Title</div>
    <div class="content">Content</div>
    <div class="footer">Footer</div>
</div>
.container {
    width: 100vw;
    height: 100vh;
    font-size: 5vh;
}
    
.title {
    height: 20vh;
    background-color: red;
}
    
.content {
    height: 60vh;
    background: blue;
}
    
.footer {
    height: 20vh;
    background: green;
}

演示-https://jsfiddle.net/u763ck92/

仅限CSS进近(如果高度已知/固定)

当您希望中间元素垂直跨越整个页面时,可以使用CSS3中引入的calc()。

假设我们有一个固定高度的页眉和页脚元素,我们希望section标记采用整个可用的垂直高度。。。

Demo

假设标记和CSS应为

html,正文{高度:100%;}收割台,收割台{高度:100px;背景:灰色;}部分{高度:计算(100%-(100px+150px));/*添加100px的页眉和150px的页脚*/背景:番茄;}页脚{高度:150px;背景色:蓝色;}<header>100px</header><section>展开我的剩余空间</section><footer>150像素</footer>

所以在这里,我要做的是将元素的高度相加,然后使用calc()函数从100%中减去。

只需确保使用高度:100%;对于父元素。

对我来说,最简单的方法就是使用网格。但是,我正在寻找一种更简单的方法。下面是我是如何做到这一点的。但是,如果我们有很多嵌套的div,那就太痛苦了。

 <div style={{
  display:grid,
  gridTemplateRows:'max-content 1fr',
}}>
   <div>
     Header
   </div>
   <div style={{height:'100%',minHeight:'0'}}>
     Content
   </div>
 </div>

编造外星人先生的想法。。。

这似乎是一个比支持CSS3的浏览器流行的灵活盒更干净的解决方案。

只需将min-height(而不是height)与calc()一起用于内容块。

calc()以100%开始,并减去页眉和页脚的高度(需要包含填充值)

使用“min-height”而不是“height”特别有用,因此它可以处理javascript渲染的内容和Angular2等JS框架。否则,一旦javascript呈现的内容可见,计算将不会将页脚推到页面底部。

这里是一个页眉和页脚的简单示例,两者都使用50px高度和20px填充。

Html:

<body>
    <header></header>
    <div class="content"></div>
    <footer></footer>
</body>

Css:

.content {
    min-height: calc(100% - (50px + 20px + 20px + 50px + 20px + 20px));
}

当然,数学可以简化,但你明白了。。。

这是我自己的Pebbl解决方案的最小版本。花了很长时间才找到在IE11中发挥作用的诀窍。(也在Chrome、Firefox、Edge和Safari中进行了测试。)

html格式{高度:100%;}正文{高度:100%;边距:0;}部分{显示:柔性;弯曲方向:柱;高度:100%;}div:第一个孩子{背景:金色;}div:最后一个子级{背景:李子;挠曲生长:1;}<body><章节><div>FIT</div>增长</div></section></body>