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


当前回答

这是一个使用网格的答案。

.the-container-div {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto min-content;
  height: 100vh;
}
.view-to-remain-small {
  grid-row: 2;
}

.view-to-be-stretched {
  grid-row: 1
}

其他回答

如果在父div上使用display:flex,您所要做的就是简单地设置高度以进行拉伸或填充

.divName {
    height: stretch
}
 style="height:100vh"

为我解决了这个问题。在我的案例中,我将此应用于所需的div

在CSS中,确实没有一种可靠的跨浏览器方式来实现这一点。假设您的布局很复杂,您需要使用JavaScript来设置元素的高度。你需要做的本质是:

Element Height = Viewport height - element.offset.top - desired bottom margin

一旦您可以获得该值并设置元素的高度,就需要将事件处理程序附加到窗口onload和onresize,以便可以启动调整大小函数。

此外,假设内容可能大于视口,则需要将overflow-y设置为滚动。

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

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

我所做的是使用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>
...