Question

我有这个结构：

enter image description here

我想将 content2的min-height =屏幕高度 - 其他div的高度。

使用下面的HTML / CSS，结果大于屏幕高度。那我怎么能做我想要的呢？版权部分（页脚）位于content2内部，因此我希望将content2的高度精确地放在屏幕上。

body {
    margin:0;
    border:0;
    background-color:#24373B;
    color: #fff;
}
#headerBG {
    min-width:980px;
    background-color:#000;
}
#header {
    width:980px;
}
#content1 {
    width:980px;
}
#content2 {
    width:960px;
    padding:10px;
    margin-top:30px;
    background-color:#355258;
    min-height:100hv;
}

<body>
    <div id="headerBG">
        <div id="header">header</div>
    </div>
    <div id="content1">content1</div>
    <div id="content2">content2</div>
</body>

Answer 1

你使用100hv而不是100vh作为最小高度。修正：

#content2{
    width:960px;
    padding:10px;
    margin-top:30px;
    background-color:#355258;
    min-height: calc(100vh - 50px);
}

但在使用vw或vh之前，您应该定义：

html {
    width: 100%;
    height: 100%;
}
body {
    width: 100%;
    height: 100%;
}

Answer 2

您不必使用视口单元（vw，vh）。您可以使用CSS table布局简单地执行此操作，如下所示。 粉红色 区域的高度将自动扩展并填充所有可用空间。

http://jsfiddle.net/qtu89zhm/

＆＃13;

html, body {
    height: 100%;
    margin: 0;
}
.table {
    display: table;
    width: 100%;
    height: 100%;
}
.row {
    display: table-row;
}
.cell {
    display: table-cell;
}
.box {
    width: 500px;
    margin: 0 auto;
}
.content-2 .cell, .content-2 .box {
    height: 100%;
}
.header .cell {
    background: gray;
}
.header .box {
    background: teal;
}
.content-1 .box {
    background: gold;
}
.content-2 .box {
    background: pink;
}

＆＃13;

<div class="table">
    <div class="row header">
        <div class="cell">
            <div class="box">header</div>
        </div>
    </div>
    <div class="row content-1">
        <div class="cell">
            <div class="box">content1</div>
        </div>
    </div>
    <div class="row content-2">
        <div class="cell">
            <div class="box">content2</div>
        </div>
    </div>
</div>

＆＃13;

Answer 3

如果我理解你的问题......

＆＃13;

body{
margin:0;
border:0;
background-color:#555555;
  height:100vh;
  width:100vw;
}
#headerBG{
min-width:980px;
background-color:#AAAAAA;
  height:10%;
}
#header{
width:980px;
  height:100%;
  width:10%;
    
background-color:#FFF;
}
#content1{
width:980px;
  height:40%;
background-color:#000000;
  margin-left:5%;
  width:90%;
}
#content2{
margin-top:30px;
background-color:#FFFFFF;
  margin-left:5%;
  width:90%;
  height:50%;
}

＆＃13;

<body>
<div id="headerBG">
    <div id="header">
    </div>
</div>
<div id="content1">
</div>
<div id="content2">
</div>
</body>

＆＃13;

制作一个div来填充剩余的可用屏幕高度

3 个答案: