1024x768 이상의 해상도에서 페이지 하단의 빈 공간

Question

웹 페이지는 1024x768 해상도에만 적합합니다. 해상도가 높을수록 화면 하단에 많은 양의 빈 공간이 생깁니다. 나는 CSS에 상당히 익숙하지 만 오류가 위치 속성이 없다는 것과 관련이 있다고 확신한다. 꼬리말과 메인 div가 화면 하단으로 이동하거나 페이지의 크기를 조정하기를 원합니다. 누군가 내가 누락 된 것을 말해 줄 수 있다면, 나는 영원히 감사 할 것입니다.

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

Answer 1

사용 100 % 높이 HTML에 & 몸과 요소에 절대 위치를 포함하는 래퍼에 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 내에서 클래스를 사용합니다.

Answer 2

래퍼 div에있는 배경을 페이지 본문에 추가하십시오.

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