顶部 div 折叠时如何调整底部固定 div 的大小？

Question

我有两个 div，一个在顶部，另一个在底部。我需要固定底部的 div，并在顶部的 div 折叠时调整大小并占据上面的空间。链接到以下场景。这是否可以仅使用 CSS 来完成？这是一个 angularJS 应用程序。

更新：还必须考虑支持旧版本的浏览器，特别是 IE。

Div1 expanded

Div1 collapsed

Answer 1

是的，您可以使用 flex 执行此操作。请参阅下面的 sn-p。

$(document).ready(function() {
  $("#div1").click(function() {
    $(this).css("max-height", "50px")
  });
});

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

.container {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.box {
  flex-grow: 1;
  text-align: center;
}

#div1 {
  background-color: #4472C4;
}

#div2 {
  background-color: #ED7D31;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- begin snippet: js hide: false console: true babel: false -->

更新

由于您在 cmets 中指出您希望支持旧版浏览器，因此可以使用旧版 table 布局实现与上述相同的功能。

$(document).ready(function() {
  $("#div1").click(function() {
    $(this).css("height", "50px")
  });
});

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

.container {
  display: table;
  height: 100%;
  width: 100%;
}

.row {
  display: table-row;
  width: 100%;
}

.box {
  display: table-cell;
  color: #fff;
  vertical-align: middle;
  text-align: center;
}

#div1 {
  background-color: #4472C4;
}

#div2 {
  background-color: #ED7D31;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
    <div class="row">
      <div class="box" id="div1">
        <strong>div1</strong>
      </div>
    </div>
    <div class="row">
      <div class="box" id="div2">
        <strong>div1</strong>
      </div>
    </div>
</div>

Answer 2

你可以试试这个。

html, body {
  height: 100%;
  margin: 0;
}
.wrapper {
  display: table;
  height: 100%;
  width: 100%;
  background: yellow;
}
.content {
  display: table-row;
  /* height is dynamic, and will expand... */
  height: 100%;
  /* ...as content is added (won't scroll) */
  background: yellow;
}
.footer {
  display: table-row;
  background: grey;
}

<div class="wrapper">
  <div class="content">
    <h2>Content</h2>
  </div>
  <div class="footer">
    <h3>Sticky footer</h3>
    <p>Footer of variable height</p>
  </div>
</div>

Answer 3

你可以试试这个对我来说很好用

<div class="wrapper">
   <div class="container">
     <div class="top-div">
        topd div
     </div>
     <div class="bottom-div">
        bottom div
     </div>
   </div>
</div>

CSS

.wrapper{
  float:left;
  height:100%;
}
.container {
  position:absolute;
  display: block;
  float: left;
  width: 100%;
  height: 100%;
  min-height:100%;
}

.top-div {
  margin: 5px;
  float: left;
  position: fixed;
  top: 0;
  width: 90%;
  height: 30%;
  background-color: red;
}

.bottom-div {
  margin: 5px;
  position: absolute;
  float: left;
  bottom: 0;
  width: 90%;
  background-color: green;
}

使用 jQuery

$(function() {
  var containerH = $(".container").height();
  var topdivH = $(".top-div").height();
  $(".bottom-div").height(containerH - topdivH);
});

查看jsfiddle