반응형
CSS 높이(백분율)가 작동하지 않음
다음과 같은 간단한 코드가 있습니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Live Feed</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<div style="background-color: #eeaabb; width: 250px; height: 100%; border-right: solid 1px #e1e1e1;">
I should be tall
</div>
</body>
</html>하지만 높이가 100%인 디브는 표시되지 않습니다.왜요?
모든 부모 요소(이 경우 body 및 html)에 대해 100% 높이를 설정해야 합니다.이 바이올린은 작동하는 것을 보여줍니다.
html, body { height: 100%; width: 100%; margin: 0; }
div { height: 100%; width: 100%; background: #F52887; }<html><body><div></div></body></html>뷰포트 높이의 100%로 합니다.
div {
height: 100vh;
}
모든 최신 브라우저와 IE>=9에서 작동합니다. 자세한 내용은 여기를 참조하십시오.
Safari와 같은 일부 모바일 브라우저에서는 스크롤 시 주소 표시줄이 표시되거나 숨겨집니다.이를 고려하려면 , 또는 (브라우저 지원 확인) 중 하나를 사용합니다.
height: 100%부모 요소에 고정 크기를 지정하면 작동합니다.
포지셔닝을 사용하여 이를 달성할 수 있습니다.
해라
position: absolute;
100% 높이를 얻을 수 있습니다.
상위 요소에 100% 높이를 설정해야 합니다.
높이 추가: 본체에 100%
body{height:100%}
CSS에 필요한 것은 다음과 같습니다.
html, body {
height: 100%;
width: 100%;
margin: 0;
}
백분율로 자유롭게 작업하려면 루트 부모가 픽셀이어야 합니다.
<body style="margin: 0px; width: 1886px; height: 939px;">
<div id="containerA" class="containerA" style="height:65%;width:100%;">
<div id="containerAinnerDiv" style="position: relative; background-color: aqua;width:70%;height: 80%;left:15%;top:10%;">
<div style="height: 100%;width: 50%;float: left;"></div>
<div style="height: 100%;width: 28%;float:left">
<img src="img/justimage.png" style="max-width:100%;max-height:100%;">
</div>
<div style="height: 100%;width: 22%;float: left;"></div>
</div>
</div>
</body>
언급URL : https://stackoverflow.com/questions/8262852/css-height-in-percent-not-working
반응형
'source' 카테고리의 다른 글
| MyISAM 테이블에서 count(*)가 너무 느립니다. (0) | 2023.08.26 |
|---|---|
| Flexbox 레이아웃에 100% 수직 공간을 사용하려면 어떻게 해야 합니까? (0) | 2023.08.26 |
| 값이 다른 행을 단일 행으로 병합 (0) | 2023.08.26 |
| 수동으로 npm 취약성을 수정하는 방법은 무엇입니까? (0) | 2023.08.26 |
| 부트스트랩: 모달에서 다른 모달 열기 (0) | 2023.08.26 |