Question

我正在尝试在更改视口时垂直调整Div（带内容）的大小。我想根据垂直增大或减小窗口的大小来改变div（带内容）大小。

目前我通过为我的包装器div提供一个固定大小并向auto提供溢出来实现这项工作，所以当屏幕调整大小时，它会给我滚动Div。

当屏幕尺寸垂直减小时，有没有办法让我的div（带内容）自动收缩到高度

HTML Fragement

＆＃13;

* {
  box-sizing:border-box;
}

body, html {
  height:100%;
}

.container {
  height:100%;
  border:1px solid #bbb;
}

.footer {
  position:fixed;
  bottom:0px;
  text-align:center;
  height:25px;
}

.override {
  border:1px solid blue;
}

.content {
  height:100%
}

.wrapper {
  height:calc(100%-100px);
  overflow:auto;
}

＆＃13;

<body>
  <div class='container'>
    <div class='content'>  
      <div class='page-header'> System Dashboard </div>

      <div class='wrapper'>
        <div class='col-md-4 override'>
          First wrapper
          First wrapper
          First wrapper
          First wrapper
          First wrapper
          First wrapper
          First wrapperFirst wrapperFirst wrapperFirst wrapperFirst wrapper
          First wrapperFirst wrapperFirst wrapperFirst wrapperFirst wrapper
          First wrapperFirst wrapperFirst wrapperFirst wrapperFirst wrapper
          First wrapperFirst wrapperFirst wrapperFirst wrapperFirst wrapper
          First wrapperFirst wrapperFirst wrapperFirst wrapperFirst wrapper
          First wrapperFirst wrapperFirst wrapperFirst wrapperFirst wrapper
        </div>
      </div>

      <div class='footer'> Copyright here </div>  
    </div>
  </div>
</body>

＆＃13;

Answer 1

如果我理解正确，你正在寻找像this那样的东西。你必须

将height: 100%设为html和body以及div
制作你的div overflow: auto。

_{代码片段只是模拟高度调整大小。请参阅小提琴了解实际演示。}

＆＃13;

$('#button').click(function(){
  $('#b').append('First wrapper<br />');
});

$('#reset').click(function(){
  $('#b').empty();
});

＆＃13;

html, body {
  height: 100%;
  background: green;
  padding: 0;
  margin: 0;
}
body {
  padding: 20px;
  box-sizing: border-box;
}

#a {
  height: 100%;
  background: red;
  overflow: auto;
  padding: 50px;
  box-sizing: border-box;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="a">
  <button id="button">add more content to simulate browser height</button> 
  <button id="reset">reset</button> <br>
  <div id='b'>
    First wrapper<br />
    First wrapper<br />
  </div>
</div>

＆＃13;

Answer 2

看起来像Flexbox的作业：

 body {
   height: 100vh;
   padding: 0;
   margin: 0;
 }

 .container {
   height: 100%;
   border: 1px solid #bbb;
 }

 .page-header {
   display: block;
 }

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

 .wrapper {
   width: 100%;
   height: 100%;
   overflow: auto;
 }

 .override {
   border: 1px solid blue;
   height: 100%;
   overflow: auto;
 }

 .footer {
   text-align: center;
   height: 25px;
 }

JSFiddle演示：https://jsfiddle.net/9yhsnaLk/2/

Answer 3

calc函数可以使用，但你需要删除减号周围的空格。您可以使用vh单位获取视口高度：height: calc(100vh - 100px);。

* {
  box-sizing:border-box;
}

.container {
  border:1px solid #bbb;
}

.footer {
  position:fixed;
  bottom:0px;
  text-align:center;
  height:25px;
}

.override {
  border:1px solid blue;
}

.wrapper {
  height:calc(100vh - 100px);
  overflow:auto;
}

<body>
  <div class='container'>
    <div class='content'>  
      <div class='page-header'> System Dashboard </div>

      <div class='wrapper'>
        <div class='col-md-4 override'>
          First wrapper
          First wrapper
          First wrapper
          First wrapper
          First wrapper
          First wrapper
          First wrapperFirst wrapperFirst wrapperFirst wrapperFirst wrapper
          First wrapperFirst wrapperFirst wrapperFirst wrapperFirst wrapper
          First wrapperFirst wrapperFirst wrapperFirst wrapperFirst wrapper
          First wrapperFirst wrapperFirst wrapperFirst wrapperFirst wrapper
          First wrapperFirst wrapperFirst wrapperFirst wrapperFirst wrapper
          First wrapperFirst wrapperFirst wrapperFirst wrapperFirst wrapper
        </div>
      </div>

      <div class='footer'> Copyright here </div>  
    </div>
  </div>
</body>

Answer 4

您可以使用height: 100vh;，其中VH是视口高度

Answer 5

尝试将供应商前缀添加到calc函数：-moz-calc和-webkit-calc。

CSS3 height: calc(100%) not working

调整视图端口大小时垂直调整Div

5 个答案: