Question

在你睁开眼睛并继续前进之前，我知道如何通过使用固定高度和顶部：和底部的绝对定位来解决这个问题，但我想在不使用固定高度的情况下解决它。我想更多地了解CSS，所以我试图以不同的方式解决这个问题。

我已经设置了一个横跨顶部的典型导航栏，然后是下面的滚动内容div。

然而！如何在不使用绝对坐标的情况下将底部滚动div容器放入剩余空间？我不能做位置：绝对，因为那时我需要知道导航栏的高度来设置＆＃34; top：＆＃34;。我无法做到＆＃34;底部：0＆＃34;因为我必须指定一个高度。

这是JS filddle：

感兴趣的课程是＆＃34; .result＆＃34;。我目前的身高已经固定，我不想要。

谢谢，所有人。 PT

CSS：

* {
  font-family: Helvetica, Sans;
  border: 0px;
  margin: 0px;
  padding: 0px;
}

.navBar {
  width: auto;
  overflow: auto;
  border-bottom: 1px solid #bbb;
}

.pageBar {
  float: right;
}

.pager {
  cursor: pointer;
  float: left;
  border: 1px solid #bbb;
  width: 2em;
  height: 2em;
  line-height: 2em;
  text-align: center;
  margin: 5px;
  margin-left: 0px;
  background: #eee;
  color: #bbb;
}

.pager:hover {
  background: #777;
  border: 1px solid black;
  color: white;
}

.fliph {
  -ms-transform:scale(-1,1); /* IE 9 */
  -moz-transform:scale(-1,1); /* Firefox */
  -webkit-transform:scale(-1,1); /* Safari and Chrome */
  -o-transform:scale(-1,1); /* Opera */
}

.results {
  background: gray;
  width: 100%;
  height: 200px;
  overflow: scroll;
}

.line {
  height: 10em;
  line-height: 10em;
  border: 1px solid red;
}

HTML：

<body>
    <div class='navBar'>
        <div class='pageBar'>
            <div class='pager'>&#9665;</div>
            <div class='pager'>1</div>
            <div class='pager fliph'>&#9665;</div>
        </div>
    </div>
    <div class='results'>
        <div class='line'>Line1</div>
        <div class='line'>Line2</div>
        <div class='line'>Line3</div>
        <div class='line'>Line4</div>
    </div>
</body>

Answer 1

这是一个使用display: table并且实际上可以实现流体高度的解决方案：

http://jsfiddle.net/8dugffz4/8/

这是一个简约的片段，以防你想要具体看我做了什么：

* {
  margin: 0;
  padding: 0;
}
html,
body {
  height: 100%;
}
#table {
  display: table;
  height: 100%;
  width: 100%;
}
#table > div {
  display: table-row;
}
#navbar {
  height: 45px;
  opacity: .5;
}
#navbar > div {
  height: 100%;
  background: black;
}
#results {
  height: 100%;
}
#results > div {
  height: 100%;
  overflow: auto;
  background: green;
}

<div id="table">
  <div id="navbar">
    <div></div>
  </div>
  <div id="results">
    <div></div>
  </div>
</div>

Answer 2

如果您只是在寻找position: absolute方法的替代方法，可以使用height: 100%方法：

html, body { height: 100%; }
body { box-sizing: border-box; padding-top: 45px; }
.navBar { height: 45px; margin-top: -45px; }
.results { height: 100%; }

像这样：http://jsfiddle.net/8dugffz4/7/

垂直div扩展没有固定高度

2 个答案: