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

当前回答

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

.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
}

2021-03-08 05:03:38

其他回答

我找到了一个非常简单的解决方案，因为对我来说，这只是一个设计问题。我希望页面的其余部分不要在红色页脚下方为白色。所以我把页面的背景色设置为红色，而内容的背景色则设置为白色。当内容高度设置为例如20em或50%时，几乎为空的页面不会使整个页面变红。

2012-09-14 08:02:34

<!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;
    color: #FFF;
}

#header
{
    float: left;
    width: 100%;
    background: red;
}

#content
{
    height: 100%;
    overflow: auto;
    background: blue;
}

</style>
</head>
<body>

    <div id="content">
        <div id="header">
                Header
                <p>Header stuff</p>
        </div>
            Content
            <p>Content stuff</p>
    </div>

</body>
</html>

在所有正常的浏览器中，您可以将“header”div放在内容之前，作为同级，同样的CSS也可以工作。然而，如果浮点数为100%，IE7-无法正确解释高度，因此标头需要在内容中，如上所述。溢出：auto将导致IE上的双滚动条（它始终显示视口滚动条，但禁用），但如果没有它，如果溢出，内容将被剪切。

2008-09-18 06:01:58

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

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

我也有同样的问题，但我无法用上面的柔性箱解决问题。因此，我创建了自己的模板，其中包括：

具有固定大小元素的标头页脚带有滚动条的侧栏，占据剩余高度所容纳之物

我使用了flexbox，但方法更简单，只使用了财产display:flex和flex-direction:row|column:

我确实使用了angular，我希望我的组件大小是它们的父元素的100%。

关键是为所有父母设置大小（以百分比为单位），以限制他们的大小。在以下示例中，myapp高度占视口的100%。

主组件占视口的90%，因为页眉和页脚占5%。

我在这里发布了我的模板：https://jsfiddle.net/abreneliere/mrjh6y2e/3

       body{
        margin: 0;
        color: white;
        height: 100%;
    }
    div#myapp
    {
        display: flex;
        flex-direction: column;
        background-color: red; /* <-- painful color for your eyes ! */
        height: 100%; /* <-- if you remove this line, myapp has no limited height */
    }
    div#main /* parent div for sidebar and content */
    {
        display: flex;
        width: 100%;
        height: 90%; 
    }
    div#header {
        background-color: #333;
        height: 5%;
    }
    div#footer {
        background-color: #222;
        height: 5%;
    }
    div#sidebar {
        background-color: #666;
        width: 20%;
        overflow-y: auto;
     }
    div#content {
        background-color: #888;
        width: 80%;
        overflow-y: auto;
    }
    div.fized_size_element {
        background-color: #AAA;
        display: block;
        width: 100px;
        height: 50px;
        margin: 5px;
    }

Html：

<body>
<div id="myapp">
    <div id="header">
        HEADER
        <div class="fized_size_element"></div>

    </div>
    <div id="main">
        <div id="sidebar">
            SIDEBAR
            <div class="fized_size_element"></div>
            <div class="fized_size_element"></div>
            <div class="fized_size_element"></div>
            <div class="fized_size_element"></div>
            <div class="fized_size_element"></div>
            <div class="fized_size_element"></div>
            <div class="fized_size_element"></div>
            <div class="fized_size_element"></div>
        </div>
        <div id="content">
            CONTENT
        </div>
    </div>
    <div id="footer">
        FOOTER
    </div>
</div>
</body>

2016-08-25 16:13:25

试试这个

var sizeFooter = function(){
    $(".webfooter")
        .css("padding-bottom", "0px")
        .css("padding-bottom", $(window).height() - $("body").height())
}
$(window).resize(sizeFooter);

2013-04-27 11:45:48

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

推荐文章

最新文章

标签