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

当前回答

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

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

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

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

2017-06-17 18:19:17

其他回答

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

2020-02-25 21:16:34

这可以通过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

2014-09-14 21:09:51

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

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

2011-06-20 09:36:23

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

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

2020-04-14 21:12:21

我的一些组件是动态加载的，这给我设置导航栏的高度带来了问题。

我所做的是使用ResizeObserver API。

function observeMainResize(){
   const resizeObserver = new ResizeObserver(entries => {
      for (let entry of entries) {
         $("nav").height(Math.max($("main").height(),
                                  $("nav") .height()));
      }
   });
   resizeObserver.observe(document.querySelector('main'));
}

那么：

...
<body onload="observeMainResize()">
   <nav>...</nav>
   <main>...</main>
...

2021-11-11 00:47:12

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

推荐文章

最新文章

标签