Question

我想在可用的浏览器空间中使第三行（红色）高度为100％。请让我知道如何实现这一目标？如果我降低浏览器的高度，它应该是灵活的。

HTML：

<div class="wrapper">
  <div class="first_row">first row</div>
  <div class="second_row">second row</div>
  <div class="third_row">third row</div>
  <div class="fourth_row">fourth row</div>
</div>

CSS：

* {
  margin:0;
  padding:0;
  text-align:center;
}
.first_row, .second_second, .fourth_row {
  height:50px;
}
.first_row {
  background:gray;
}
.second_row {
  background:#ccc;
}
.third_row {
  height:100%;
  background:red;
}
.fourth_row {
  background:#ccc;
}

Answer 1

//由于对问题作者的更具体描述而编辑：

如果你希望你的4行总是和父（body）一样高，而1,2和4行的高度只有50px，试试这个：

CSS：

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

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

.div-table-row {
    display:table-row;
}

.div-table-row:nth-child(1),.div-table-row:nth-child(2),.div-table-row:nth-child(4) {
    height:50px; 
    background-color:#cccccc;
}

.div-table-row:nth-child(3) {
    background-color:red;
}

.div-table-cell {
    display:table-cell;
}

HTML：

<div class="div-table">
    <div class="div-table-row">
        <div class="div-table-cell first-content">1</div>
    </div>
    <div class="div-table-row">
        <div class="div-table-cell first-content">2</div>
    </div>
    <div class="div-table-row">
        <div class="div-table-cell first-content">3</div>
    </div>
    <div class="div-table-row">
        <div class="div-table-cell first-content">4</div>
    </div>
</div>

JsFiddle：http://jsfiddle.net/33Kzu/8/

下次请使用搜索，因为这是基本的CSS，不应该被问到但是要搜索。

如何在可用的浏览器空间中使div 100％？

1 个答案: