javascript - div 高度占用剩余的浏览器窗口，总高度不固定

Question

我可以拿到 Alvaro 的 fiddle :http://jsfiddle.net/S8g4E/955/以我希望它只针对宽度而非高度的方式工作...我的下部组件 Canvas 非常大(5000px 正方形)，我希望它在两个方向上滚动，但“视口(viewport)”增长到全尺寸它包含下窗口 ...

如果你看看我的 fiddle :http://jsfiddle.net/tconway556/4LCj2/

<div id="container">
    <div id="up">Text<br />Text<br />Text<br /></div>
    <div id="down" style="overflow:scroll; width: 100%;">
       <canvas width="5000px" height="5000px">
       </canvas>
   </div>
</div>

#container { width: 100%; height: 300px; border:1px solid red;}
#up { background: green; height:80px}
#down { background:pink; height: calc(100% - 80px); }

宽度是我想要的。但不是高度。我只能将整个容器的高度硬编码为一个固定值。

如果你用我的 fiddle 调整浏览器的大小， Canvas 视口(viewport)的宽度会适应包含的窗口，但高度保持不变。这是有道理的，因为我将它固定在 300px .. 但是......

如果我在#container 中将固定的 300px 替换为 100%，高度将增长到 5000px + ....我想要的是我们在宽度上看到的相同行为。 IE。当您调整外部浏览器窗口的大小时，视口(viewport)的宽度和高度都会适应浏览器边界......

有人对此有解决方案吗？

Answer 1

我只是通过电话回复，所以无法查看您的 fiddle 和调整大小等，但如果我正确理解您的问题，您可以尝试删除高度值，而是使用 padding-bottom: 和百分比值。您必须尝试使用​​ padding-bottom 的值来查看适合您需要的值，但这将允许高度动态调整并且应该随调整窗口大小进行缩放。这是一个尝试和错误的尝试，但我以前用它来解决类似的问题