让一个 div 填充剩余屏幕空间的高度

Posted 2023-03-06

技术标签:

【中文标题】让一个 div 填充剩余屏幕空间的高度【英文标题】：Make a div fill the height of the remaining screen space 【发布时间】：2010-09-10 13:11:56 【问题描述】：

我正在开发一个 Web 应用程序，我希望内容填满整个屏幕的高度。

该页面有一个标题，其中包含一个徽标和帐户信息。这可以是任意高度。我希望内容 div 将页面的其余部分填充到底部。

我有一个标题div 和一个内容div。目前我正在使用这样的布局表格：

CSS 和 html

#page 
    height: 100%; width: 100%


#tdcontent 
    height: 100%;


#content 
    overflow: auto; /* or overflow: hidden; */

<table id="page">
    <tr>
        <td id="tdheader">
            <div id="header">...</div>
        </td>
    </tr>
    <tr>
        <td id="tdcontent">
            <div id="content">...</div>
        </td>
    </tr>
</table>

页面的整个高度被填满，不需要滚动。

对于内容 div 中的任何内容，设置 top: 0; 会将其放在标题下方。有时内容将是一个真实的表格，其高度设置为 100%。将header 放入content 将无法正常工作。

有没有办法不用table也能达到同样的效果？

更新：

内容div 中的元素也将高度设置为百分比。因此，div 中 100% 的内容会将其填充到底部。 50% 的两个元素也是如此。

更新 2：

例如，如果标题占据屏幕高度的 20%，则在 #content 内指定为 50% 的表格将占用 40% 的屏幕空间。到目前为止，将整个内容包装在一个表格中是唯一可行的方法。

【问题讨论】：

对于以后在这里磕磕绊绊的人，您可以在大多数浏览器中获得所需的表格布局，无需表格标记，通过使用display:table 和相关属性，请参阅this answer 非常类似的问题。我尝试重新创建您的设置 - jsfiddle.net/ceELs - 但它不起作用，我错过了什么？ @Mr.外星人的回答简单实用，看看http://***.com/a/23323175/188784 其实你的描述是行不通的，即使是表格：如果内容占用的垂直空间大于屏幕高度，表格单元格和整个表格将扩展超出屏幕底部。您的内容溢出：自动不会出现滚动条。 @GillBates 它会在你指定父元素的高度后工作看jsfiddle.net/ceELs/5 【参考方案1】：

使用CSS Grid的另一种解决方案

定义网格

.root 
  display: grid;
  grid-template-rows: minmax(60px, auto) minmax(0, 100%);

第一行（标题）：可以设置最小高度，最大高度将取决于内容。第二行（内容）将尝试填充标题后留下的可用空间。

这种方法的优点是内容可以独立于页眉滚动，所以页眉总是在页面的顶部

body, html 
  margin: 0;
  height: 100%;


.root 
  display: grid;
  grid-template-rows: minmax(60px, auto) minmax(0, 100%);
  height: 100%;


.header 
  background-color: lightblue;


button 
  background-color: darkslateblue;
  color: white;
  padding: 10px 50px;
  margin: 10px 30px;
  border-radius: 15px;
  border: none;


.content 
  background-color: antiquewhite;
  overflow: auto;


.block 
  width: calc(100% - 20px);
  height: 120px;
  border: solid aquamarine;
  margin: 10px;

<div class="root">
  <div class="header">
    <button>click</button>
    <button>click</button>
    <button>click</button>
    <button>click</button>
    <button>click</button>
  </div>
  <div class="content">
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
</div>
  <div class="footer"></div>
</div>

【讨论】：

【参考方案2】：

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

.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

【讨论】：

【参考方案3】：

它是动态计算屏幕空间，最好使用javascript。

您可以使用 CSS-IN-JS 技术，如下库：

https://github.com/cssobj/cssobj

演示：https://cssobj.github.io/cssobj-demo/

【讨论】：

【参考方案4】：

我的一些组件是动态加载的，这导致我无法设置导航栏的高度。

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

【讨论】：

【参考方案5】：

它从来没有像 NICCAI 在第一个答案中建议的那样使用 JavaScript 以其他方式为我工作。我正在使用这种方法通过谷歌地图重新调整<div>。

这里是如何做到这一点的完整示例（适用于 Safari/FireFox/IE/iPhone/Andorid（适用于旋转））：

CSS

body 
  height: 100%;
  margin: 0;
  padding: 0;


.header 
  height: 100px;
  background-color: red;


.content 
  height: 100%;
  background-color: green;

function resize() 
  // Get elements and necessary element heights
  var contentDiv = document.getElementById("contentId");
  var headerDiv = document.getElementById("headerId");
  var headerHeight = headerDiv.offsetHeight;

  // Get view height
  var viewportHeight = document.getElementsByTagName('body')[0].clientHeight;

  // Compute the content height - we want to fill the whole remaining area
  // in browser window
  contentDiv.style.height = viewportHeight - headerHeight;


window.onload = resize;
window.onresize = resize;

HTML

<body>
  <div class="header" id="headerId">Hello</div>
  <div class="content" id="contentId"></div>
</body>

【讨论】：

【参考方案6】：

如果你使用 display: flex 在父 div 上你要做的就是简单地设置高度来拉伸或填充

.divName 
    height: stretch

【讨论】：

【参考方案7】：

如果唯一的问题是高度，那么只使用 div 似乎可以：

<div id="header">header content</div>
<div id="content" style="height:100%">content content</div>

在一个简单的测试中，您的示例和我的示例中标题/内容的宽度不同，但我不确定您是否担心宽度？

【讨论】：

这不是我想做的。我希望内容div 填充屏幕的其余部分，而不是与屏幕实际高度相同。这似乎是我的示例所做的，至少在我尝试时是这样。你没有看到这种行为吗？尝试在内容中放置一个表格，即大小为 100%。它不会起作用。答案很简单，看看***.com/a/23323175/188784

以上是关于让一个 div 填充剩余屏幕空间的高度的主要内容，如果未能解决你的问题，请参考以下文章

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

使一个 div 的高度填充剩余空间，但不要越过另一个 div [重复]

使用 flex 使内部 div 填充剩余高度 [重复]

如何使用 Bootstrap（我猜）让 iframe 填充剩余屏幕区域的宽度和高度？