반응형
머리글과 바닥 글 div 사이의 모든 공간을 채우기 위해 div를 만드는 방법
나는 레이아웃 목적으로 테이블을 사용하는 것에서 div를 사용하는 것으로 이동하고 있습니다 (예, 좋은 토론입니다). 3 개의 div, 머리글, 내용 및 바닥 글이 있습니다. 머리글과 바닥 글은 각각 50px입니다. 바닥 글 div가 페이지 하단에 있고 콘텐츠 div가 그 사이의 공간을 채우도록하려면 어떻게해야합니까? 화면 해상도가 변경 될 수 있기 때문에 콘텐츠 div 높이를 하드 코딩하고 싶지 않습니다.
Flexbox 솔루션
플렉스 레이아웃을 사용하면 자연스러운 높이 머리글과 바닥 글을 허용하면서이를 달성 할 수 있습니다. 머리글과 바닥 글은 각각 뷰포트의 상단과 하단에 고정되고 (기본 모바일 앱과 매우 유사) 기본 콘텐츠 영역이 나머지 공간을 채우고 세로 오버플로는 해당 영역 내에서 스크롤 할 수 있습니다.
HTML
<body>
<header>
...
</header>
<main>
...
</main>
<footer>
...
</footer>
</body>
CSS
html, body {
margin: 0;
height: 100%;
min-height: 100%;
}
body {
display: flex;
flex-direction: column;
}
header,
footer {
flex: none;
}
main {
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
flex: auto;
}
요약하면 (그리고 이것은 Traingamer에서 제공 한 CSS Sticky Footer 링크 에서 온 것입니다 ), 이것이 제가 사용한 것입니다.
html, body
{
height: 100%;
}
#divHeader
{
height: 100px;
}
#divContent
{
min-height: 100%;
height: auto !important; /*Cause footer to stick to bottom in IE 6*/
height: 100%;
margin: 0 auto -100px; /*Allow for footer height*/
vertical-align:bottom;
}
#divFooter, #divPush
{
height: 100px; /*Push must be same height as Footer */
}
<div id="divContent">
<div id="divHeader">
Header
</div>
Content Text
<div id="divPush"></div>
</div>
<div id="divFooter">
Footer
</div>
Mitchel Sellers 답변을 확장하려면 콘텐츠 div 높이 : 100 %를 제공하고 자동 마진을 제공하세요.
전체 설명과 예제는 Ryan Fait의 CSS Sticky Footer를 참조하십시오 .
헤더의 크기 (높이)를 알고 있으므로 콘텐츠 div 안에 넣거나 여백을 사용합니다.
콘텐츠가 창보다 크면 (더 큰) 절대 위치는 문제를 제공합니다.
CSS 그리드를 사용하는 방법 :
index.html
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="main.css" rel="stylesheet">
</head>
<body>
<main>
<header>Header</header>
<section>Content</section>
<footer>Footer</footer>
</main>
</body>
</html>
main.css
body {
margin: 0;
}
main {
height: 100%;
display: grid;
grid-template-rows: 100px auto 100px;
}
section {
height: 100%;
}
콘텐츠 div의 높이를 최대화하려는 경우 CSS에서
높이 : 100 %;
#footer {
clear: both;
}
반응형
'programing' 카테고리의 다른 글
| React Native 앱을 브라우저에서 테스트 할 수 있습니까? (0) | 2021.01.15 |
|---|---|
| Jackson과 Lombok이 함께 작동하도록 만들 수 없습니다. (0) | 2021.01.15 |
| 첫 번째 앱 업데이트, 사용자 데이터 손실 (문서 디렉토리에 저장 됨) (0) | 2021.01.15 |
| git repo를 두 번째 컴퓨터로 이동 하시겠습니까? (0) | 2021.01.15 |
| 여러 파일 입력을 사용할 때 선택한 최대 파일을 제한하는 방법 (0) | 2021.01.15 |