css - 内容不使用位置滚动：绝对

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
}

Answer 2

min-height以像素为单位放置 a #main，并将其设置为position: relative;。

然后将其overflow: scroll从其中删除，#header因为它不再需要。

那应该清除它。

#main {
  min-height: 800px;
  position: relative;
}

#header {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 768px;
}