Question

我正在尝试制作一个可滚动的div框，它的高度应与屏幕的高度（100％）完全匹配。

问题是，如果顶部还有另一个div框，它是固定高度，如何使可滚动框适合屏幕的高度？

这是我尝试过的

<div class="wrap">
  <div class="top">
    Fixed height 100px. No floating or layered box 
  </div>
  <div class="scrollBox">
    Fluid height to screen height 100%
    <br>test<br><br>test<br><br>test<br><br>test<br><br>test<br><br>test<br><br>test<br><br>test<br><br>test<br><br>test<br><br>test<br><br>test<br><br>test<br><br>test<br><br>test<br><br>test<br>
  </div>

</div>


html, body { height:100%; margin:0; padding:0; }
.wrap { height:100%; background:lightblue }
.top { height:100px; background:green}
.scrollBox {  width:80%; height:100%; margin:0 auto 0 auto; border:1px solid #000; overflow-y:auto; background:#eee; }

这是我的演示 http://jsfiddle.net/a5ktensk/77/

请帮助

Answer 1

您可以使用vh单元来实现这一目标。

所以

.scrollBox {height: 100vh; }

vh表示viewheight，因此将是当前显示的高度，您可以使用CSS中的calc功能将其删除一些

.scrollBox {height: calc(100vh - 100px);

例如，如果您想在顶部使用固定的div，则该值将为最高减去100px的100％：）

http://jsfiddle.net/g7d2k59m/1/

Answer 2

将height: 100vh; overflow: hidden;应用于.wrap。

vh中的高度将强制页面按照视口使用全高。

视口高度（vh）-整个视口高度的百分比。 10伏时   将解析为当前视口高度的10％。

Overflow:hidden将阻止.wrap滚动。

html, body { height:100%; margin:0; padding:0; }
.wrap { height:100%; background:lightblue;height: 100vh;overflow: hidden; }
.top { height:100px; background:green}
.scrollBox {  width:80%; height:100%; margin:0 auto 0 auto; border:1px solid #000; overflow-y:auto; background:#eee; }

<div class="wrap">
  <div class="top">
    Fixed height 100px. No floating or layered box 
  </div>
  <div class="scrollBox">
    Fluid height to screen height 100%
    <br>test<br><br>test<br><br>test<br><br>test<br><br>test<br><br>test<br><br>test<br><br>test<br><br>test<br><br>test<br><br>test<br><br>test<br><br>test<br><br>test<br><br>test<br><br>test<br>
  </div>

</div>

要进一步了解视口单位-

希望这会有所帮助：）

Answer 3

我认为calc()功能会很方便，请尝试以下方式：

.scrollBox {  
    width:80%; 
    height:calc(100% - 100px); /* Key Line */
    margin:0 auto 0 auto; 
    border:1px solid #000; 
    overflow-y:auto; background:#eee; 
}

在移动网络上，适合div框的屏幕高度

3 个答案: