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


当前回答

文森特,我会用你的新要求再次回答。因为你不在乎内容太长会被隐藏,所以你不需要浮动标题。只需将溢出隐藏在html和body标签上,并将#content-height设置为100%。内容将始终比视口长页眉的高度,但它将被隐藏,不会导致滚动条。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Test</title>
    <style type="text/css">
    body, html {
      height: 100%;
      margin: 0;
      padding: 0;
      overflow: hidden;
      color: #FFF;
    }
    p {
      margin: 0;
    }

    #header {
      background: red;
    }

    #content {
      position: relative;
      height: 100%;
      background: blue;
    }

    #content #positioned {
      position: absolute;
      top: 0;
      right: 0;
    }
  </style>
</head>

<body>
  <div id="header">
    Header
    <p>Header stuff</p>
  </div>

  <div id="content">
    Content
    <p>Content stuff</p>
    <div id="positioned">Positioned Content</div>
  </div>

</body>
</html>

其他回答

这可以通过CSS使用vh来实现:

#page {
    display:block; 
    width:100%; 
    height:95vh !important; 
    overflow:hidden;
}

#tdcontent {
    float:left; 
    width:100%; 
    display:block;
}

#content {      
    float:left; 
    width:100%; 
    height:100%; 
    display:block; 
    overflow:scroll;
}

和HTML

<div id="page">

   <div id="tdcontent"></div>
   <div id="content"></div>

</div>

我检查了一下,它适用于所有主要浏览器:Chrome、IE和FireFox

我为此纠结了一段时间,最后得出了以下结论:

由于很容易使内容DIV与父对象的高度相同,但显然很难使其为父对象高度减去标头高度,因此我决定使内容DIF为全高度,但将其绝对放置在左上角,然后为顶部定义一个填充,该填充具有标头的高度。这样,内容会整齐地显示在标题下,并填充整个剩余空间:

body {
    padding: 0;
    margin: 0;
    height: 100%;
    overflow: hidden;
}

#header {
    position: absolute;
    top: 0;
    left: 0;
    height: 50px;
}

#content {
    position: absolute;
    top: 0;
    left: 0;
    padding-top: 50px;
    height: 100%;
}

现在有很多答案,但我发现使用高度:100vh;处理需要填满整个可用垂直空间的div元素。

这样,我就不需要到处玩显示或定位了。这在使用Bootstrap制作一个仪表板时非常有用,其中我有一个侧边栏和一个主工具栏。我想让主体拉伸并填充整个垂直空间,以便我可以应用背景色。

div {
    height: 100vh;
}

支持IE9及以上版本:点击查看链接

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

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

我也一直在寻找答案。如果您有幸能够以IE8及更高版本为目标,那么可以使用display:table和相关值来获取包含div在内的块级元素的表的呈现规则。

如果你更幸运,并且你的用户正在使用顶级浏览器(例如,如果这是你控制的计算机上的intranet应用程序,就像我的最新项目一样),你可以在CSS3中使用新的Flexible Box Layout!