웹 사이트의 높이 문제

구조체를 작성한 사이트를 만들고 있지만 높이 문제가 있습니다. 여기에 내가웹 사이트의 높이 문제

Expecting

기대하고 무엇인가 그러나 이것은 내가 아래

Final

는 CSS입니다 얻고 무엇을 :

html {height:100%!important;} 
body { 
    margin:0; 
    font:12px/15px "Lucida Sans Unicode", "Lucida Grande", sans-serif; 
    color:#8a8a8a; 
    min-width:1000px; 
    background:#fff; 
    min-height:100%!important; 
} 

#wrapper { 
    position:relative; 
    min-height:100%; 
    overflow:hidden; 
    background:url(../images/wrapper.jpeg) repeat-y; 
} 
#content { 
    float:left; 
    width:100%; 
    min-height:100%; 
}

출처

2012-10-25 Zerotoinfinity

실제로 텍스트가 전체 영역을 차지하고 싶습니까? 그렇다면'height : 100 %; '를 사용하십시오. –

전체 길이의 왼쪽과 오른쪽 부분을 갖고 싶습니다. – Zerotoinfinity

이 예제는 약간의 코드가 도움이 될 것입니다. http://jsfiddle.net/fA4HL/3/ –

100 % 단지의 100 %로 설정지고 그 안에있는 내용으로 픽셀 높이를 대신 사용하십시오.

#content { 
    float:left; 
    width:100%; 
    min-height:500px; 
}

출처

2012-10-25 21:14:48

그러나 컨테이너는 사용자가 데이터를 선택하면 커질 수 있습니다. 사용자가 요구하는 길이만큼 커질 것입니다. 페이스 북과 마찬가지로 – Zerotoinfinity

@Zerotoinfinite - 최소 높이가 500px 이상을 의미합니다. 콘텐츠가 500px 이상이면 확장됩니다. –

래퍼에 min-height을 픽셀로 넣을 것입니다. #content가 100 % 높이로 설정되어 있으므로 모든 래퍼가 채워집니다.

이렇게하면 브라우저의 전체 높이를 채우기 위해 필요한 것보다 적은 내용이있는 경우 페이지에 브라우저 높이를 채우기 위해 내용 아래에 공백이 추가됩니다. 나는 내용이 없기 때문에 새 페이지를 처음 만들 때 자주이 작업을 수행하지만 브라우저 창을 채울 때 어떻게 보일지 생각하고 싶습니다.

나는이 같은 일을 제안 :

#wrapper { 
    position: relative; 
    min-height: 600px; 
    overflow: hidden; 
    background: url(../images/wrapper.jpeg) repeat-y; 
}

당신은 그것이 브라우저 창을 채울 수 있도록하는 데 걸리는 무엇이든 사이트 -에 맞게 픽셀 단위로 min-height을 조정할 수 있습니다.

출처

2012-10-26 03:47:56 KraigH

웹 사이트의 높이 문제

답변

관련 문제