我正在开发一个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和VW

<div class="container">
    <div class="title">Title</div>
    <div class="content">Content</div>
    <div class="footer">Footer</div>
</div>
.container {
    width: 100vw;
    height: 100vh;
    font-size: 5vh;
}
    
.title {
    height: 20vh;
    background-color: red;
}
    
.content {
    height: 60vh;
    background: blue;
}
    
.footer {
    height: 20vh;
    background: green;
}

演示-https://jsfiddle.net/u763ck92/

其他回答

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

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

实际上,您可以使用display:table将区域拆分为两个元素(页眉和内容),其中页眉的高度可以不同,而内容将填充剩余的空间。这适用于整个页面,也适用于区域仅是位置设置为相对、绝对或固定的另一个元素的内容的情况。只要父元素具有非零高度,它就可以工作。

请参见此小提琴以及以下代码:

CSS:

body, html {
    height: 100%;
    margin: 0;
    padding: 0;
}

p {
    margin: 0;
    padding: 0;
}

.additional-padding {
    height: 50px;
    background-color: #DE9;
}

.as-table {
    display: table;
    height: 100%;
    width: 100%;
}

.as-table-row {
    display: table-row;
    height: 100%;
}

#content {
    width: 100%;
    height: 100%;
    background-color: #33DD44;
}

HTML格式:

<div class="as-table">
    <div id="header">
        <p>This header can vary in height, it also doesn't have to be displayed as table-row. It will simply take the necessary space and the rest below will be taken by the second div which is displayed as table-row. Now adding some copy to artificially expand the header.</p>
        <div class="additional-padding"></div>
    </div>
    <div class="as-table-row">
        <div id="content">
            <p>This is the actual content that takes the rest of the available space.</p>
        </div>
    </div>
</div>

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

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

编造外星人先生的想法。。。

这似乎是一个比支持CSS3的浏览器流行的灵活盒更干净的解决方案。

只需将min-height(而不是height)与calc()一起用于内容块。

calc()以100%开始,并减去页眉和页脚的高度(需要包含填充值)

使用“min-height”而不是“height”特别有用,因此它可以处理javascript渲染的内容和Angular2等JS框架。否则,一旦javascript呈现的内容可见,计算将不会将页脚推到页面底部。

这里是一个页眉和页脚的简单示例,两者都使用50px高度和20px填充。

Html:

<body>
    <header></header>
    <div class="content"></div>
    <footer></footer>
</body>

Css:

.content {
    min-height: calc(100% - (50px + 20px + 20px + 50px + 20px + 20px));
}

当然,数学可以简化,但你明白了。。。

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

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

我使用了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>