> 웹 프론트엔드 > CSS 튜토리얼 > CSS에서 신체에 대한 최소 높이 설정이 효과가 없는 이유는 무엇입니까?

CSS에서 신체에 대한 최소 높이 설정이 효과가 없는 이유는 무엇입니까?

黄舟
풀어 주다: 2017-07-21 09:53:06
원래의
4084명이 탐색했습니다.

웹페이지의 콘텐츠 영역에 콘텐츠가 거의 없으면 바닥글이 맨 위로 올라가나요?
body와 html에 min-height:100%를 설정했지만 효과가 없습니다.
height: 100%로 설정하면 괜찮지만 콘텐츠가 너무 많으면 한 화면에 다 들어가나요?

body,html{   min-height:100%;
}body{   position:relative;
}.content{  podding-bottom:100px;
}.footer{position:absolute;bottom:0;left:0;height:100px;
}
로그인 후 복사

다음과 같이 작성하세요:

html {    
height: 100%;
}
body {    
position: relative;    
min-height: 100%;   
 box-sizing: border-box;    
 padding-bottom: 80px; /* .footer 的高度,为 footer 占位 */}
 .footer {    
 position: absolute;    
 bottom: 0;    
 left: 0;    
 width: 100%;    
 height: 80px;
}
로그인 후 복사

위 코드는 IE8 이상과 호환됩니다

나도 이런 문제가 발생하여 다음과 같이 해결했습니다.

html,body,.content{    
min-height:100%;
}
html{    
-ms-text-size-adjust: 100%;    
-webkit-text-size-adjust: 100%;
}
body{    
background:#eeeeee;
}
로그인 후 복사

그런 다음 js를 사용하여 $(".content"를 제어합니다. ) .height($("html").height); 비교를 위해 상위 요소를 기준으로 이 조정이 100% 더 안정적이라고 생각합니다. 고정 높이를 설정하고 본문 높이 백분율을 설정할 수 있다면 먼저 html 요소의 높이를 설정하세요!

위 내용은 CSS에서 신체에 대한 최소 높이 설정이 효과가 없는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿