Question

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

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

Answer 1

是的，您可以使用 flex 执行此操作。请参阅下面的代码段。

$(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 -->

更新

由于您在评论中注意到您希望支持较旧的浏览器，因此可以使用旧版本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

你可以试试这个。

'assetManager' => [
            'bundles' => [
                'yii\web\JqueryAsset' => [
                    'sourcePath' => null, 'js' => ['//code.jquery.com/jquery-2.2.4.min.js'],
                ],
                'yii\bootstrap\BootstrapAsset' => [
                    'sourcePath' => null, 'css' => ['//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'],
                ],
                'yii\bootstrap\BootstrapPluginAsset' => [
                    'sourcePath' => null, 'js' => ['//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js'],
                ],
            ],
        ],

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

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

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

3 个答案:

更新