Div高度以不固定的整体高度占用剩余的浏览器窗口

div height occupy remaining browser window with a non-fixed overall height

本文关键字：高度 浏览器 窗口 Div      更新时间：2023-09-26

我可以得到Alvaro的小提琴:http://jsfiddle.net/S8g4E/955/工作的方式，我想它只为宽度，而不是高度…我的下部组件画布非常大(5000px正方形)，我想让它在两个方向上滚动，但有"viewport"增长到其包含的下部窗口的完整尺寸…

如果你看我的小提琴: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 ..但是…

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

谁有解决办法?

我只是从电话回复，所以不能看你的提琴和调整大小等，但如果我正确理解你的问题，你可以尝试删除高度值，而不是使用padding-bottom:百分比值。你将不得不使用padding-bottom的值来看看什么适合你的需要，但这将允许高度动态调整，并且应该随着窗口大小的调整而缩放。这是一个尝试和错误，但我以前用它来解决一个类似的问题

相关文章：