메인 콘텐츠 div를 CSS로 화면 높이를 채우는 방법
이 질문에 이미 답변이 있습니다.
그래서 머리글, 본문, 바닥 글이있는 웹 페이지가 있습니다. 본문이 페이지의 100 %를 채우길 원합니다 (바닥 글과 머리글 사이에 100 % 채우기) 내 바닥 글은 하단 : 0으로 절대 위치입니다. 본문을 100 % 높이로 설정하거나 위치를 변경하려고 할 때마다 헤더를 오버플로하십시오. 본문을 절대 위치로 설정하면 top: 40(헤더가 40px 높이이기 때문에) 40px 너무 아래로 내려가 스크롤 막대가 생성됩니다.
실제 프로젝트의 전체 페이지 / css를 실제로 게시 할 수 없기 때문에 간단한 html 파일을 만들었습니다. 샘플 코드를 사용하면 maincontent 본문이 화면을 채우더라도 40px가 너무 많이 내려갑니다 (제가 가정하는 헤더로 인해).
html,
body {
margin: 0;
padding: 0;
}
header {
height: 40px;
width: 100%;
background-color: blue;
}
#maincontent {
background-color: green;
height: 100%;
width: 100%;
}
footer {
height: 40px;
width: 100%;
background-color: grey;
position: absolute;
bottom: 0;
}<html>
<head>
<title>test</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<header></header>
<div id="maincontent">
</div>
<footer></footer>
</body>
</html>누구나 답을 알고 있습니까?
- %의 높이가 필요하지 않습니다.
- jQuery가 필요하지 않습니다
(!) bottom & top 사용하여 div 늘이기 :
.mainbody{
position: absolute;
top: 40px; /* Header Height */
bottom: 20px; /* Footer Height */
width: 100%;
}
내 코드 확인 : http://jsfiddle.net/aslancods/mW9WF/
또는 여기에서 확인하십시오.
body {
margin:0;
}
.header {
height: 40px;
background-color: red;
}
.mainBody {
background-color: yellow;
position: absolute;
top: 40px;
bottom: 20px;
width:100%;
}
.content {
color:#fff;
}
.footer {
height: 20px;
background-color: blue;
position: absolute;
bottom: 0;
width:100%;
}<div class="header" >
</div>
<div class="mainBody">
<div class="content" >Hello world</div>
</div>
<div class="footer">
</div>자바 스크립트, 절대 위치 및 고정 높이가 필요하지 않습니다.
고정 높이나 절대 위치를 요구하지 않는 모든 CSS / CSS 전용 방법은 다음과 같습니다 .
CSS
.container {
display: table;
}
.content {
display: table-row;
height: 100%;
}
.content-body {
display: table-cell;
}
HTML
<div class="container">
<header class="header">
<p>This is the header</p>
</header>
<section class="content">
<div class="content-body">
<p>This is the content.</p>
</div>
</section>
<footer class="footer">
<p>This is the footer.</p>
</footer>
</div>
여기에서 실제로 확인하십시오 : http://jsfiddle.net/AzLQY/
이 방법의 장점은 바닥 글과 머리글이 콘텐츠에 맞게 커질 수 있고 본문이 자동으로 조정된다는 것입니다. CSS로 높이를 제한하도록 선택할 수도 있습니다.
뷰포트 높이 / 뷰포트 너비라는 CSS 단위가 있습니다.
예
.mainbody{height: 100vh;} 비슷하게 html,body{width: 100vw;}
또는 90vh = 뷰포트 높이의 90 %입니다.
** IE9 + 및 대부분의 최신 브라우저.
이것은 내 양식이 재미있게 접히지 않도록 최소 너비의 중앙 콘텐츠 본문을 허용합니다.
html {
overflow-y: scroll;
height: 100%;
margin: 0px auto;
padding: 0;
}
body {
height: 100%;
margin: 0px auto;
max-width: 960px;
min-width: 750px;
padding: 0;
}
div#footer {
width: 100%;
position: absolute;
bottom: 0;
left: 0;
height: 60px;
}
div#wrapper {
height: auto !important;
min-height: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
div#pageContent {
padding-bottom: 60px;
}
div#header {
width: 100%;
}
내 레이아웃 페이지는 다음과 같습니다.
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title></title>
</head>
<body>
<div id="wrapper">
<div id="header"></div>
<div id="pageContent"></div>
<div id="footer"></div>
</div>
</body>
</html>
예 : http://data.nwtresearch.com/
추가 한 코드와 같은 전체 페이지 배경을 보려면 height: auto !important;래퍼 div에서 제거하십시오 . http://jsfiddle.net/mdares/a8VVw/
사용 top: 40px하고 bottom: 40px어떤 정의 된 높이 (바닥 글도 40px입니다 가정), 당신은 일이를 얻을 수 있습니다.
.header {
width: 100%;
height: 40px;
position: absolute;
top: 0;
background-color:red;
}
.mainBody {
width: 100%;
top: 40px;
bottom: 40px;
position: absolute;
background-color: gray;
}
.footer {
width: 100%;
height: 40px;
position: absolute;
bottom: 0;
background-color: blue;
}
정확히 무엇을했는지는 모르겠지만 알아낼 것 같아요.
헤더-화면 상단에 머물러 있습니까? 바닥 글-화면 하단에 머물러 있습니까? 콘텐츠 영역-> 바닥 글과 머리글 사이의 공간에 맞습니까?
절대 위치 또는 고정 위치를 사용하여이를 수행 할 수 있습니다.
다음은 절대 위치 지정의 예입니다. http://jsfiddle.net/FMYXY/1/
마크 업 :
<div class="header">Header</div>
<div class="mainbody">Main Body</div>
<div class="footer">Footer</div>
CSS :
.header {outline:1px solid red; height: 40px; position:absolute; top:0px; width:100%;}
.mainbody {outline:1px solid green; min-height:200px; position:absolute; top:40px; width:100%; height:90%;}
.footer {outline:1px solid blue; height:20px; position:absolute; height:25px;bottom:0; width:100%; }
최상의 결과를 얻으려면 화면 / 기기 크기가 다른 문제가 발생할 수 있으므로 픽셀 대신 %를 사용하는 것이 좋습니다.
글쎄, 브라우저마다 다른 구현이 있습니다.
내 생각에 가장 간단하고 우아한 솔루션은 CSS calc ()를 사용하는 것입니다. 안타깝게도이 방법은 ie8 이하에서는 사용할 수 없으며 Android 브라우저 및 모바일 오페라에서도 사용할 수 없습니다. 그러나 별도의 방법을 사용하는 경우 http://jsfiddle.net/uRskD/를 시도해 볼 수 있습니다.
마크 업 :
<div id="header"></div>
<div id="body"></div>
<div id="footer"></div>
그리고 CSS :
html, body {
height: 100%;
margin: 0;
}
#header {
background: #f0f;
height: 20px;
}
#footer {
background: #f0f;
height: 20px;
}
#body {
background: #0f0;
min-height: calc(100% - 40px);
}
내 보조 솔루션에는 고정 바닥 글 방법과 상자 크기 조정이 포함됩니다. 이렇게하면 기본적으로 body 요소가 부모의 높이를 100 % 채울 수 있으며 100 %의 패딩이 box-sizing: border-box;. http://jsfiddle.net/uRskD/1/
html, body {
height: 100%;
margin: 0;
}
#header {
background: #f0f;
height: 20px;
position: absolute;
top: 0;
left: 0;
right: 0;
}
#footer {
background: #f0f;
height: 20px;
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
#body {
background: #0f0;
min-height: 100%;
box-sizing: border-box;
padding-top: 20px;
padding-bottom: 20px;
}
세 번째 방법은 jQuery를 사용하여 기본 콘텐츠 영역의 최소 높이를 설정하는 것입니다. http://jsfiddle.net/uRskD/2/
html, body {
height: 100%;
margin: 0;
}
#header {
background: #f0f;
height: 20px;
}
#footer {
background: #f0f;
height: 20px;
}
#body {
background: #0f0;
}
그리고 JS :
$(function() {
headerHeight = $('#header').height();
footerHeight = $('#footer').height();
windowHeight = $(window).height();
$('#body').css('min-height', windowHeight - headerHeight - footerHeight);
});
다음과 같은 상대 값 : height : 100 %는 참조와 같은 HTML의 상위 요소를 사용합니다. 높이의 상대 값을 사용하려면 html 및 body 태그의 높이를 다음과 같이 100 %로 만들어야합니다.
HTML
<body>
<div class='content'></div>
</body>
CSS
html, body
{
height: 100%;
}
.content
{
background: red;
width: 100%;
height: 100%;
}
http://jsfiddle.net/u91Lav16/1/
이것은 쉬운 문제처럼 들릴지 모르지만 실제로는 아닙니다!
순수한 CSS로하려는 일을 달성하기 위해 많은 것을 시도했지만 모든 시도는 실패였습니다. 하지만 .. javascript 또는 jquery를 사용하면 가능한 해결책이 있습니다!
이 CSS가 있다고 가정합니다.
#myheader {
width: 100%;
}
#mybody {
width: 100%;
}
#myfooter {
width: 100%;
}
이 HTML이 있다고 가정합니다.
<div id="myheader">HEADER</div>
<div id="mybody">BODY</div>
<div id="myfooter">FOOTER</div>
jquery로 이것을 시도하십시오.
<script>
$(document).ready(function() {
var windowHeight = $(window).height();/* get the browser visible height on screen */
var headerHeight = $('#myheader').height();/* get the header visible height on screen */
var bodyHeight = $('#mybody').height();/* get the body visible height on screen */
var footerHeight = $('#myfooter').height();/* get the footer visible height on screen */
var newBodyHeight = windowHeight - headerHeight - footerHeight;
if(newBodyHeight > 0 && newBodyHeight > bodyHeight) {
$('#mybody').height(newBodyHeight);
}
});
</script>
참고 : 모바일 브라우저에서보기 흉할 수 있으므로이 솔루션에서는 절대 위치 지정을 사용하지 않습니다.
This question is a duplicate of Make a div fill the height of the remaining screen space and the correct answer is to use the flexbox model.
All major browsers and IE11+ support Flexbox. For IE 10 or older, or Android 4.3 and older, you can use the FlexieJS shim.
Note how simple the markup and the CSS are. No table hacks or anything.
html, body {
height: 100%;
margin: 0; padding: 0; /* to avoid scrollbars */
}
#wrapper {
display: flex; /* use the flex model */
min-height: 100%;
flex-direction: column; /* learn more: http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/ */
}
#header {
background: yellow;
height: 100px; /* can be variable as well */
}
#body {
flex: 1;
border: 1px solid orange;
}
#footer{
background: lime;
}<div id="wrapper">
<div id="header">Title</div>
<div id="body">Body</div>
<div id="footer">
Footer<br/>
of<br/>
variable<br/>
height<br/>
</div>
</div>In the CSS above, the flex property shorthands the flex-grow, flex-shrink, and flex-basis properties to establish the flexibility of the flex items. Mozilla has a good introduction to the flexible boxes model.
'developer tip' 카테고리의 다른 글
| ANTLR 3.3을 사용하십니까? (0) | 2020.10.26 |
|---|---|
| 리플렉션을 사용하여 선언 순서대로 속성 가져 오기 (0) | 2020.10.26 |
| 인스턴스 수준에서 메서드 재정의 (0) | 2020.10.25 |
| LR (0)과 SLR 구문 분석의 차이점은 무엇입니까? (0) | 2020.10.25 |
| 이전 달의 모든 행을 가져 오는 쿼리 (0) | 2020.10.25 |