CSS：使容器适合屏幕

Question

我正在一个网站上有两个容器：侧边栏和主要内容。 问题是，当最小化窗口（仅）时，左侧边栏适合屏幕当前大小的大小，当向下滚动侧边栏消失时。仅当内容容器（右侧）不填充时屏幕..

您可以尝试并最小化当窗口最小化时，您会看到左侧栏在向下滚动时消失。

你可以尝试用good page更多的内容，你会发现一切都很好这里..

我试图height="100%" and width="100%"

Answer 1

OK想通了

我不得不添加：

min-height: 100%; 

的身体

，并使用

底部：0;

侧栏上的

感谢您的帮助:)

Answer 2

我猜容器的div？

宽度应该是100％，因为您有宽度，但对于高度，请尝试：line-height:100%。

Answer 3

主要问题是你身体中的包装器和侧边栏元素是绝对定位的 - 因此，身体不知道如何扩展到页面本身的内容大小，因为绝对定位的元素被取出文件流程。在这种情况下，您已将页面的所有内容从文档流中提取出来。

因此，设置身体元素的高度或最小高度将不起作用，因为它只会占用视口的高度，而没有其他值。儿童容器被绝对定位后，也将占据视口的高度。

滚动仍然可能的内容是从任何一个绝对定位的孩子溢出的优点。

您可以尝试在侧边栏元素上设置height: auto。或者，你应该漂浮你的包装和边栏（并取出绝对定位） - 这将至少将内容放回到文档流，允许浏览器计算实际100％的高度:)

绝对定位是一点棘手的问题，我不得不承认。