반응형
화면의 백분율로 설정된 DIV 높이?
부모 DIV를 전체 100 % 화면 높이의 70 %로 설정하려고합니다. 다음 CSS를 설정했지만 아무것도하지 않는 것 같습니다.
body {
font-family: 'Noto Sans', sans-serif;
margin: 0 auto;
height: 100%;
width: 100%;
}
.header {
height: 70%;
}
어떤 이유로 작동하지 않는 것 같고 헤더가 화면 크기의 70 %가 아닙니다. 어떤 충고?
뷰포트 높이를 사용해보십시오
div {
height:100vh;
}
absolute해당 div의 위치 를 확인하십시오.
http://jsfiddle.net/btevfik/KkKeZ/
이것이 해결책입니다 .
html또한 추가100%
html,body {
height: 100%;
width: 100%;
}
창 높이가 아닌 화면 높이를 기준으로 원하는 경우 :
const height = 0.7 * screen.height
// jQuery
$('.header').height(height)
// Vanilla JS
document.querySelector('.header').style.height = height + 'px'
// If you have multiple <div class="header"> elements
document.querySelectorAll('.header').forEach(function(node) {
node.style.height = height + 'px'
})
절대 위치 지정을 사용하여 <body>또는 <form>또는 <div>을 브라우저 페이지에 맞출 수 있습니다. 예를 들면 :
<body style="position: absolute; bottom: 0px; top: 0px; left: 0px; right: 0px;">
다음 단순히 넣어 <div>의 어떤 비율 그것을 사용 안에 하나 height또는 width당신이 원하는
<div id="divContainer" style="height: 100%;">
참고 URL : https://stackoverflow.com/questions/15843391/div-height-set-as-percentage-of-screen
반응형
'Development Tip' 카테고리의 다른 글
| 상수 참조 란 무엇입니까? (0) | 2020.12.06 |
|---|---|
| HTML 양식에서 Flask의 Python 스크립트로 데이터 보내기 (0) | 2020.12.06 |
| kotlin에서 "instanceof"클래스를 확인하는 방법은 무엇입니까? (0) | 2020.12.06 |
| 경과 시간 계산 (0) | 2020.12.06 |
| C ++ std :: vector에서 모든 항목 삭제 (0) | 2020.12.06 |