CSS는 페이지 내용이 충분히 높지 않고 바닥글이 항상 페이지 하단에 있는 효과를 얻습니다.
- 青灯夜游앞으로
- 2018-10-11 17:47:162318검색
이 글에서는 CSS를 사용하여 페이지 콘텐츠가 충분히 높지 않고 바닥글이 항상 페이지 하단에 표시되는 효과를 얻는 방법을 소개합니다. 도움이 필요한 친구들이 참고할 수 있습니다. 그것이 당신에게 도움이 되기를 바랍니다.
페이지를 개발할 때 많은 프런트엔드 엔지니어가 이런 상황에 직면할 것이라고 생각합니다. 전체 페이지의 높이가 디스플레이의 한 화면을 차지하기에 충분하지 않고 바닥글이 페이지 하단에 없으면 사용자에게는 약간 보기 흉하며 바닥글이 항상 페이지 하단에 있기를 원합니다.
1.min-height를 사용하여 중간 콘텐츠 영역의 높이를 제어하여 페이지 높이를 조정할 수 있습니다. 단, 페이지 수가 많은 대규모 웹사이트에서는 바닥글이 모두 모듈로 추가되므로 페이지 중간의 최소 높이를 설정할 수 없습니다. 또한 페이지마다 표시되는 화면의 크기가 다르기 때문에 최소 높이를 정확하게 설정할 수 없으며 페이지 바닥글이 바닥에 표시되지 않거나 있다는 보장도 없습니다.
2. 바닥글 위치 고정: 바닥글은 본문을 기준으로 고정되어 하단에 표시되지만, 페이지에 스크롤 막대가 있으면 페이지가 스크롤되고 페이지가 발이 콘텐츠 영역 위에 매달려 있어 원하는 효과가 아닐 수도 있습니다.
다음 예제 방법을 사용하여 문제를 해결할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>猿来是勇者</title>
</head>
<!--方法一-->
<style>
*{margin: 0; padding: 0;}
html,body{height:100%;}
#container{position:relative; width:100%; min-height:100%;padding-bottom: 100px; box-sizing: border-box;}
header{width: 100%; height: 200px; background: #999;}
.main{width: 100%; height: 200px; background: orange;float:left;}
footer{width: 100%; height:100px; /* footer的高度一定要是固定值*/ position:absolute; bottom:0px; left:0px; background: #333;} </style>
<body>
<p id="container">
<header>HEADER</header>
<section class="main">MAIN</section >
<footer>FOOTER</footer>
</p>
</body>
<!--方法二-->
<!--<style>
*{margin: 0; padding: 0;}
html,body{height: 100%;}
#container{display: flex; flex-direction: column; height: 100%;}
header{background: #999; flex: 0 0 auto;height:100px;}
.main{flex: 1 0 auto;}
.bg{background:orange;height:200px;}
footer{background: #333; flex: 0 0 auto;height:100px;} </style>
<body>
<p id="container">
<header>HEADER</header>
<section class="main">
<p class="bg">MAIN</p>
</section>
<footer>FOOTER</footer>
</p>
</body>-->
</html>
요약: 위 내용은 이 문서의 전체 내용입니다. 모든 사람의 학습에 도움이 되기를 바랍니다. 더 많은 관련 튜토리얼을 보려면 CSS 비디오 튜토리얼을 방문하세요!
위 내용은 CSS는 페이지 내용이 충분히 높지 않고 바닥글이 항상 페이지 하단에 있는 효과를 얻습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!