使div填充剩余屏幕空间的高度

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

当前回答

已使用：高度：计算（100vh-110px）；

代码：.header｛height:60px；top:0；背景色：绿色｝.车身{高度：计算（100vh-110px）/*50+60*/背景色：灰色；}.footer｛height:50px；bottom:0；｝<div class=“header”><h2>我的页眉</h2></div><div class=“body”><p>身体</p></div><div class=“footer”>我的页脚</div>

2016-05-22 03:20:04

其他回答

为什么不这样呢？

html, body {
    height: 100%;
}

#containerInput {
    background-image: url('../img/edit_bg.jpg');
    height: 40%;
}

#containerControl {
    background-image: url('../img/control_bg.jpg');
    height: 60%;
}

给html和body（按顺序）一个高度，然后给元素一个高度？

为我工作

2012-02-20 09:21:45

仅限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%；对于父元素。

2014-04-27 12:05:12

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

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

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

此外，请看下面我为您创建的图像：

2017-06-17 18:19:17

文森特，我会用你的新要求再次回答。因为你不在乎内容太长会被隐藏，所以你不需要浮动标题。只需将溢出隐藏在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>

2008-09-18 17:52:16

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

2017-07-04 14:27:17

使div填充剩余屏幕空间的高度

推荐文章

最新文章

标签