<div>CSS에서 특정 백분율 높이 로 설정하려고 하지만 내부 내용과 동일한 크기로 유지됩니다. <!DOCTYTPE html>그러나 HTML 5를 제거하면 <div>원하는대로 전체 페이지를 차지하면서 작동 합니다. 페이지의 유효성을 검사하려면 어떻게해야합니까?
에 CSS <div>가 있으며 ID는 page다음 과 같습니다.
#page {
padding: 10px;
background-color: white;
height: 90% !important;
}
답변:
CSS에서 div를 특정 백분율 높이로 설정하려고합니다.
무엇의 비율?
백분율 높이를 설정하려면 부모 요소 (*)의 높이가 명시 적이어야합니다. 이것은 높이를 그대로두면 auto블록이 내용의 높이를 취하지 만 내용 자체에 부모의 백분율로 표현 된 높이가 있으면 조금 자신을 만들었다는 점 에서 상당히 자명 합니다. Catch 22. 브라우저가 콘텐츠 높이를 포기하고 사용합니다.
따라서 div의 부모에는 명시 적 height속성 이 있어야합니다 . 원하는 경우 높이가 백분율이 될 수도 있지만 문제를 다음 단계로 이동시킵니다.
뷰포트의 높이의 비율을 포함하여 사업부의 모든 조상 사업부의 높이를 확인하려면 <html>하고 <body>,이 있어야 height: 100%하므로 DIV 아래로 명시 비율 높이의 체인이있다.
(* : 또는 div가 배치 된 경우 가장 가까운 조상 인 '포함 블록'도 배치됩니다.)
또는 모든 최신 브라우저와 IE> = 9는 뷰포트 높이 ( vh) 및 뷰포트 너비 ( vw) 와 관련된 새로운 CSS 단위를 지원합니다 .
div {
height:100vh;
}
여기를 참조하십시오 더 많은 정보 .
<html>및 <body>요소 의 높이도 설정해야합니다 . 그렇지 않으면 내용에 맞게 충분히 커질 것입니다. 예를 들면 다음과 같습니다.
<!DOCTYPE html>
<title>Example of 100% width and height</title>
<style>
html, body { height: 100%; margin: 0; }
div { height: 100%; width: 100%; background: red; }
</style>
<div></div>bobince의 답변으로 "높이 : XX %;" 작동하거나 작동하지 않습니다.
설정된 비율 (높이 : 자체 너비의 %)로 요소를 만들려면을 사용하여 높이를 효과적으로 설정하는 것이 가장 좋습니다 padding-bottom. 정사각형의 예 :
<div class="square-container">
<div class="square-content">
<!-- put your content in here -->
</div>
</div>
.square-container { /* any display: block; element */
position: relative;
height: 0;
padding-bottom: 100%; /* of parent width */
}
.square-content {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
}정사각형 컨테이너는 패딩으로 만들어지며 컨테이너를 채우기 위해 내용이 확장됩니다. 이 주제에 대한 2009 년의 긴 기사 : http://alistapart.com/article/creating-intrinsic-ratios-for-video
사용할 수 있습니다 100vw / 100vh. CSS3은 뷰포트 기준 단위를 제공합니다. 100vw는 뷰포트 너비의 100 %를 의미합니다. 100vh; 높이의 100 %
<div style="display:flex; justify-content: space-between;background-color: lightyellow; width:100%; height:85vh">
<div style="width:70%; height: 100%; border: 2px dashed red"></div>
<div style="width:30%; height: 100%; border: 2px dashed red"></div>
</div>때로는 전체 내용이 화면의 높이보다 작은 경우와 같이 div의 높이를 조건부로 설정하려고 할 수 있습니다. 모든 부모 요소를 100 %로 설정하면 화면 크기보다 길면 내용이 잘립니다.
따라서이 문제를 해결하는 방법은 최소 높이를 설정하는 것입니다.
부모 요소가 자동으로 높이를 계속 조정 한 다음 기본 div에서 머리글 및 바닥 글 div의 픽셀 크기를 100vh (뷰포트 단위)에서 뺍니다. CSS에서는 다음과 같습니다.
최소 높이 : calc (100vh-246px);
100vh는 화면의 전체 길이에서 주변 div를 뺀 것입니다. 높이가 아닌 최소 높이를 설정하면 화면보다 긴 내용이 잘리지 않고 계속 흐릅니다.
height은 백분율 값 을 사용하여 CSS 속성에 대한 간단하고 명확한 설명입니다 . stackoverflow.com/a/31728799/3597276