Question

我可以得到Alvaro的小提琴：http://jsfiddle.net/S8g4E/955/以我想要的方式工作只是为了宽度而不是高度...我的下部组件画布非常大（5000px方形）我希望它在两者中滚动方向，但让“视口”增长到包含下窗口的全尺寸......

如果你看看我的小提琴：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中用100％替换固定的300px，则高度增加到5000px + ....我想要的是与宽度相同的行为。即。当您调整外部浏览器窗口的大小时，视口的宽度和高度都适应浏览器边界...

有人有解决方案吗？

Answer 1

我只是回复手机，因此无法查看您的小提琴并调整大小等等但如果我正确理解您的问题，您可以尝试删除高度值，而不是使用padding-bottom：使用百分比值。您必须使用padding-bottom的值来查看适合您需求的值，但这样可以动态调整高度，并且可以使用调整大小窗口进行缩放。它是一个试验和一个错误之一，但我以前用它来解决类似的问题

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

1 个答案: