调整视口大小时垂直调整 Div 大小答案

【问题标题】：Resizing Div vertically when view port is resized调整视口大小时垂直调整 Div 大小
【发布时间】：2017-07-06 05:00:49
【问题描述】：

我正在尝试在更改视口时垂直调整 Div（包含内容）的大小。我想根据垂直增加或减少窗口的大小来改变 div(with content) 的大小。

目前我正在通过为我的包装 div 提供固定大小并为 auto 提供溢出来完成这项工作，因此当屏幕垂直调整大小时，它会给我滚动 Div。

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

HTML 片段

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

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

【问题讨论】：

你希望 div 被调整大小 以便它始终是窗口的高度，还是你只想要一个 滚动条 当窗口太短了？
@sorayadragon : 通常当窗口较短时，高度应该提供滚动条来查看内容，我想要的是 div 应该随着窗口大小的调整自动缩小。当我们重新调整浏览器时，就像调整宽度一样

标签： html css

【解决方案1】：

看起来像是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/

【讨论】：

【解决方案2】：

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>

【讨论】：

你说得对，应该有空间计算（100% - 10px）

【解决方案3】：

如果我对您的理解正确，您正在寻找类似于this 的东西。你将不得不

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

_{代码 sn-p 只是模拟高度调整大小。实际演示请参见小提琴。}

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

$('#reset').click(function(){
  $('#b').empty();
});

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

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

【讨论】：

【解决方案4】：

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

【讨论】：

使用 height:100vh 会给 Div 窗口的大小
是的。你需要什么？使用 calc 函数和 100vh 来调整到你需要的高度。示例：高度：计算（100vh - 100px）；
我已经完成并溢出：自动，但是当我垂直减小浏览器的大小时，它给了我一个滚动条（因为高度是固定的），而不是滚动条我想要的是 div 应该自动缩小窗口大小增加或减小时的高度
@user3045179 如果将所有其他对象的高度相加并使用calc(100vh - [heights]) 会怎样？也许你的box-sizing 也是个问题。

【解决方案5】：

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

CSS3 height: calc(100%) not working

【讨论】：

calc() 函数不是问题