div 高度以非固定的总高度占据剩余的浏览器窗口答案

【问题标题】：div height occupy remaining browser window with a non-fixed overall heightdiv 高度以非固定的总高度占据剩余的浏览器窗口
【发布时间】：2014-03-15 10:05:32
【问题描述】：

我可以得到 Alvaro 的小提琴：http://jsfiddle.net/S8g4E/955/ 以我希望的方式工作，仅用于宽度而不是高度......我的下部组件画布非常大（5000 像素正方形），我希望它在两个方向上滚动，但是让“视口”增长到其包含的下部窗口的完整大小......

如果你看看我的小提琴：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); }

宽度按我的意愿工作。但不是高度。我只能将整个容器的高度硬编码为固定值。

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

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

有没有人可以解决这个问题？

【问题讨论】：

标签： javascript jquery css html

【解决方案1】：

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

【讨论】：

很好的建议，但对于#container 或较低的 div 使用底部填充：1% 并不愉快。底部画布真的“想要”高 5000 像素......