Question

我试图设计的网页似乎只适合1024x768分辨率。当分辨率较高时，屏幕底部会有大量空白空间。我对CSS很新，但我很确定错误与缺少位置属性有关。我要么想要页脚和主要div去屏幕的底部，要么缩放页面。如果有人能告诉我我错过了什么，我将永远感激不尽。

http://www.eightbitbastards.com/8bbtest/index.html

Answer 1

在html＆amp;上使用100％的高度body和在包装上使用100％，包括元素的绝对定位，即：

html, body {
    height: 100%;
}

#wrapper {
    background-image: url("../images/bg-repeat.png");
    background-repeat: repeat;
    height: 100%;
    min-width: 768px;
    position: relative;
}

#main {
    bottom: 21px; /* lifting it up 21px from bottom to allow for footer slotting in */
    height: auto;
    left: 0; /* change accordingly to left position */
    min-height: 309px;
    position: absolute;
    width: 768px;
}

然后您还希望页脚保持在底部 - 将其设置为绝对定位，底部为0。另外，我会使用#wrapper中的类而不是id。

Answer 2

将包装div上的背景添加到页面正文中。

body {
     background-image: url(http://www.eightbitbastards.com/8bbtest/images/bg-repeat.png);
     background-repeat: repeat;
}

分辨率高于1024x768的页面底部的空白区域

2 个答案: