css - 内容不使用位置 :absolute 滚动

Question

在我工作的网站上，内容没有滚动。因此在 1024 x 768 显示器上看不到图像的顶部。我该如何纠正这个问题？

http://kenerly.com/test/index.html

Answer 1

一个解决方案是:像这样将最小高度添加到您的 div#main 并将溢出设置为自动。同时将 position 设置为 relative。这样小屋的图像(header)将位于#main-Container 的底部:

#main{
    min-height: 768px;
    overflow: auto;
    position: relative;
}

为了避免难看的滚动条，永远不要使用overflow: scroll，总是使用overflow: auto。同样在这种情况下，设置

#header {
    position: absolute;
    bottom: 0;
    // The following values are not really necessary, 
    // as they are the default values or are calculated automatically 
    // to the same values, so feel free to remove them
    width: 100%; // automatically calculated by the #header's contents
    overflow: auto; // default value anyways
    height: 768px; // automatically calculated by the #header's contents
}