이 내 간단한 코드 100 % DIV 신청되지왜 CSS 높이 100 %가 일반 div에 적용되지 않습니까?
<!DOCTYPE html>
<html>
<head>
<style>
div{height:100%;width:100%;background:red;position:relative;}
</style>
</head>
<body>
<div></div>
</body>
</html>
CSS의 높이입니다.
나는 이것을 얻기 위해 다른 몇 가지 CSS 코드를 알고 있습니다. 그러나 왜이 코드는 작동하지 않습니다. 스크립트없이 높이 100 %와 너비 100 %에서 작업하는 법.
%의 경우 높이를 parent element으로 설정해야합니다.
세트 워드 프로세서 html, body {height: 100%}
은 -
는 함유 블록의 높이에 대하여 계산된다. 포함하는 블록의 높이가 명시 적으로 지정된 이 아닌 경우이 값은 자동으로 계산됩니다. 루트 요소의 백분율 높이 (예 : )는 블록이 포함 된 블록의 초기 크기 (해당 크기는 뷰포트의 크기와 같습니다)와 관련됩니다. 더이 상에
확인 - 귀하의 경우 그래서 MDN Percent Doc
, 당신은 다음과 같이 할 수 -
<!DOCTYPE html>
<html>
<head>
<style>
html,body{height:100%;}
div{height:100%;width:100%;background:red;position:relative;}
</style>
</head>
<body>
<div></div>
</body>
</html>
당신은 달성 할 수있는이 사용 position:aboslute;
div {
background:red;
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
}
body {
background-color:blue;
}
또는 html 및 body 높이를 100 %로 설정할 수도 있습니다.이 경로를 따라 가면 본문에서 여백을 제거해야합니다.
jsFiddle (with margin, notice scrollbars)
jsFiddle (without margin)
html,
body {
height:100%;
margin: 0;
}
감사합니다. 정확히 내가 원하는 것. – Natesan