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


当前回答

如果您可以处理不支持旧浏览器(即MSIE 9或更旧版本)的问题,您可以使用已经是W3C CR的Flexible Box Layout Module来完成此操作。该模块还允许其他不错的技巧,例如重新排序内容。

不幸的是,MSIE 9或更低版本不支持此功能,您必须为除Firefox之外的所有浏览器的CSS属性使用供应商前缀。希望其他供应商也很快放弃前缀。

另一种选择是CSS网格布局,但稳定版本的浏览器对它的支持甚至更少。实际上,只有MSIE10支持这一点。

2020年更新:所有现代浏览器都支持display:flex和display:grid。唯一缺少的是对子网格的支持,只有Firefox才支持。请注意,MSIE不支持规范中的任何一个,但如果您愿意添加MSIE特定的CSS黑客,则可以使其行为正常。我建议干脆忽略MSIE,因为即使是微软也表示不应该再使用它了。Microsoft Edge很好地支持这些功能(除了子网格支持,因为它与Chrome共享Blink渲染引擎)。

使用显示的示例:网格:

html,正文{最小高度:100vh;填充:0;边距:0;}身体{显示:栅格;网格:“myheader”自动“mymain”最小值(0,1fr)“myfooter”自动/最小最大值(10rem,90rem);}头球{网格区域:myheader;背景:黄色;}主要的{网格区域:mymain;背景:粉色;对齐自身:居中/*或拉伸+显示:柔性;+弯曲方向:柱;+对齐内容:中心*/}页脚{网格区域:myfooter;背景:青色;}<header>标题内容</header><main>应居中的主要内容,内容长度可能会更改。<details><summary>可折叠内容</summary><p>下面是一些文本,可以使用更多的垂直空间</p><p>下面是一些文字,可以使用更多的垂直空间(2)</p><p>下面是一些文字,可以使用更多的垂直空间(3)</p><p>下面是一些文字,可以使用更多的垂直空间(4)</p><p>下面是一些文字,可以使用更多的垂直空间(5)</p></details></main><footer>页脚内容</footer>

使用display的示例:flex:

html,正文{最小高度:100vh;填充:0;边距:0;}身体{显示:柔性;}主要的{背景:粉色;对齐自身:中心;}<main>应居中的主要内容,内容长度可能会更改。<details><summary>可折叠内容</summary><p>下面是一些文本,可以使用更多的垂直空间</p><p>下面是一些文字,可以使用更多的垂直空间(2)</p><p>下面是一些文字,可以使用更多的垂直空间(3)</p><p>下面是一些文字,可以使用更多的垂直空间(4)</p><p>下面是一些文字,可以使用更多的垂直空间(5)</p></details></main>

其他回答

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

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

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

由于很容易使内容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%;
}

使用flexbox的简单解决方案:

html,正文{高度:100%;}正文{显示:柔性;弯曲方向:柱;}.内容{挠曲生长:1;}<body><div>标题</div><div class=“content”></div></body>

Codepen示例

另一种解决方案,在content div中以div为中心

实际上,您可以使用display:table将区域拆分为两个元素(页眉和内容),其中页眉的高度可以不同,而内容将填充剩余的空间。这适用于整个页面,也适用于区域仅是位置设置为相对、绝对或固定的另一个元素的内容的情况。只要父元素具有非零高度,它就可以工作。

请参见此小提琴以及以下代码:

CSS:

body, html {
    height: 100%;
    margin: 0;
    padding: 0;
}

p {
    margin: 0;
    padding: 0;
}

.additional-padding {
    height: 50px;
    background-color: #DE9;
}

.as-table {
    display: table;
    height: 100%;
    width: 100%;
}

.as-table-row {
    display: table-row;
    height: 100%;
}

#content {
    width: 100%;
    height: 100%;
    background-color: #33DD44;
}

HTML格式:

<div class="as-table">
    <div id="header">
        <p>This header can vary in height, it also doesn't have to be displayed as table-row. It will simply take the necessary space and the rest below will be taken by the second div which is displayed as table-row. Now adding some copy to artificially expand the header.</p>
        <div class="additional-padding"></div>
    </div>
    <div class="as-table-row">
        <div id="content">
            <p>This is the actual content that takes the rest of the available space.</p>
        </div>
    </div>
</div>

在Bootstrap中:

CSS样式:

html, body {
    height: 100%;
}

1) 只需填充剩余屏幕空间的高度:

<body class="d-flex flex-column">
  <div class="d-flex flex-column flex-grow-1">

    <header>Header</header>
    <div>Content</div>
    <footer class="mt-auto">Footer</footer>

  </div>
</body>


2) 填充剩余屏幕空间的高度,并将内容与父元素的中间对齐:

<body class="d-flex flex-column">
  <div class="d-flex flex-column flex-grow-1">

    <header>Header</header>
    <div class="d-flex flex-column flex-grow-1 justify-content-center">Content</div>
    <footer class="mt-auto">Footer</footer>

  </div>
</body>