반응형
작동하지 않는 퍼센트의 CSS 높이
이 질문에는 이미 답변이 있습니다.
- 백분율 높이 HTML 5 / CSS 6 답변
다음과 같은 간단한 코드가 있습니다.
<!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>그러나 div는 높이가 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에서 작동 합니다. 자세한 내용은 여기를 참조하십시오 .
height: 100% 부모 요소에 고정 크기를 주면 작동합니다.
포지셔닝을 사용하여이를 달성 할 수 있습니다.
시험
position: absolute;
100 % 높이를 얻을 수 있습니다.
부모 요소의 높이를 100 %로 설정해야합니다.
몸통에 신장 : 100 % 추가
body{height:100%}
퍼센트로 자유롭게 작업하려면 루트 부모가 픽셀 단위 여야합니다.
<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>
이것은 CSS에서 필요한 것입니다.
html, body
{
height: 100%;
width: 100%;
margin: 0;
}
참고URL : https://stackoverflow.com/questions/8262852/css-height-in-percent-not-working
반응형
'development' 카테고리의 다른 글
| 주어진 속성에 대해 최대 값을 가진 객체를 LINQ가 반환하도록하려면 어떻게해야합니까? (0) | 2020.07.05 |
|---|---|
| 그래프 기반 데이터베이스 (http://neo4j.org/)의 사용 사례는 무엇입니까? (0) | 2020.07.05 |
| Express와 hapi는 어떻게 다른가요? (0) | 2020.07.05 |
| ES6에서 객체를 복제하는 좋은 방법입니까? (0) | 2020.07.05 |
| JavaScript 프로토 타입을 사용하는 호출 방법 (0) | 2020.07.05 |