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


当前回答

在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>

其他回答

在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>

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

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

你可以简单地使用vh来表示CSS中的视图高度吗。。。

查看下面我为您创建的代码片段并运行它:

正文{填充:0;边距:0;}.全高{宽度:100px;高度:100vh;背景:红色;}<div class=“full-height”></div>

此外,请看下面我为您创建的图像:

CSS网格解决方案

只需使用auto和fr值属性定义带有display:grid和grid模板行的主体。

* {边距:0;填充:0;}html格式{高度:100%;}正文{最小高度:100%;显示:栅格;网格模板行:auto 1fr auto;}收割台,收割台{填充:1em;背景:粉色;}主要的,主要的{填充:1em;背景:浅蓝色;}页脚{填料:2米;背景:浅绿色;}主:悬停{高度:2000px;/*演示中心元素的扩展*/}<header>标题</header><main>main</main><footer>页脚</footer>

网格完整指南@CSS-Tricks.com

2015年更新:flexbox方法

还有两个答案简要提到了flexbox;然而,那是两年多前的事了,他们没有提供任何例子。flexbox的规格现在已经确定了。

注意:虽然CSS Flexible Boxes Layout规范还处于候选推荐阶段,但并不是所有浏览器都实现了它。WebKit实现必须以-WebKit为前缀;InternetExplorer实现了规范的旧版本,前缀为-ms-;Opera 12.10实现了规范的最新版本,未经修改。有关最新的兼容性状态,请参见每个属性的兼容性表。(摘自https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes)

所有主要浏览器和IE11+都支持Flexbox。对于IE 10或更高版本,可以使用FlexieJS垫片。

要查看当前支持,您还可以在此处查看:http://caniuse.com/#feat=flexbox

工作示例

使用flexbox,您可以轻松地在具有固定维度、内容大小维度或剩余空间维度的任何行或列之间切换。在我的示例中,我设置了标题以捕捉其内容(根据OP问题),我添加了一个页脚,以显示如何添加固定高度区域,然后设置内容区域以填充剩余空间。

html,正文{高度:100%;边距:0;}.box格式{显示:柔性;柔性流:柱;高度:100%;}.box.行{边框:1px灰色虚线;}.box.row.header{flex:0 1自动;/*以上是以下内容的简写:挠曲生长:0,挠曲收缩:1,弹性基础:自动*/}.box.行内容{柔性:1 1自动;}.box.行.英尺{柔性:0 1 40px;}<!-- 显然,您可以使用HTML5标记,如“header”、“footer”和“section”--><div class=“box”><div class=“row header”><p><b>收割台,收割台</b><br/><br/>(根据内容调整大小)</p></div><div class=“row content”><p><b>内容</b>(填充剩余空间)</p></div><div class=“row footer”><p><b>页脚</b>(固定高度)</p></div></div>

在上面的CSS中,flex属性将flex-grow、flex-shrink和flex-base财产简化,以建立flex项的灵活性。Mozilla很好地介绍了灵活的盒子模型。