html - CSS：使容器适合屏幕

Question

我正在开发一个有两个容器的网站：侧边栏和主要内容。问题是，当最小化窗口（仅）时，左侧边栏适合当前屏幕尺寸的大小，而当向下滚动时，边栏消失了。这只发生在内容容器（右侧）没有填满屏幕..

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

你可以尝试一个有更多内容的好页面，你会发现这里一切都很好..

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

Answer 1

好的 想通了

我不得不补充：

min-height: 100%;

对身体

并使用

底部：0；

在侧边栏上

谢谢你的帮助 ：）

Answer 2

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

因此，为 body 元素设置一个高度或最小高度是行不通的，因为它只会占用视口的高度而不会占用其他任何东西。绝对定位的子容器也将采用视口的高度。

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

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

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

Answer 3

我猜容器是div？

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