백분율 높이 HTML 5/CSS
는 설하려합니다고정을 하려고 합니다.<div>CSS의 특정 퍼센트 높이까지, 그러나 그것은 단지 그 안의 내용과 같은 크기를 유지합니다. 5 5를 때 ㅠㅠㅠㅠㅠ<!DOCTYTPE html>하지만, 그것은 효과가 있습니다.<div>원하는 대로 전체 페이지를 차지합니다.페이지의 유효성을 확인하고 싶은데 어떻게 해야 합니까?
는 이 를 나는이를고있습다니지에 .<div>는 의아디가진를이가진▁has▁of입니다.page:
#page {
padding: 10px;
background-color: white;
height: 90% !important;
}
CSS에서 div를 일정 비율 높이로 설정하려고 합니다.
몇 퍼센트?
백분율 높이를 설정하려면 상위 요소(*)의 높이가 명시적이어야 합니다.이것은 키를 다음과 같이 둔다면 상당히 자명합니다.auto그 블록은 그 내용의 극치를 차지할 것입니다...하지만 콘텐츠 자체가 부모의 비율로 표현된 높이를 가지고 있다면 당신은 스스로를 약간 캐치 22로 만들었습니다.브라우저는 포기하고 콘텐츠 높이만 사용합니다.
인 div를 .height▁can소. 그이 될 , 은 문제를 입니다.원하는 경우 이 높이가 백분율이 될 수도 있지만, 그러면 문제가 다음 단계로 이동합니다.
높이의 백분율로 , div를 .<html>그리고.<body>을 가져야만 합니다height: 100%그래서 div까지 명시적인 백분율 높이의 연쇄가 있습니다.
(*: 또는, div가 배치된 경우, '포함 블록'도 배치될 가장 가까운 상위 항목입니다.)
모든 높이와 관련된 합니다(뷰포트 높이에 대한 CSS 유닛). =9는 CSS 유닛을 지원합니다.vh및너비()입니다.vw):
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%;"가 작동하거나 작동하지 않는 경우를 알려줍니다.
의 %)을 요소를 하려면 " " " " (으): " " " " " " " " " (% " 를 합니다.aspect-ratio소유물.요소가 작동하도록 높이가 명시적으로 설정되어 있지 않은지 확인합니다.https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio
.square {
width: 100%;
height: unset;
aspect-ratio: 1 / 1;
}
역사적으로 가장 좋은 방법은 다음을 사용하여 높이를 설정하는 것입니다.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
백분율(%)을 사용하려면 상위 요소의 %를 정의해야 합니다.부모의 높이에 백분율이 없기 때문에 사용하면 작동하지 않습니다.그런 경우에 그 신체 높이를 작업하기 위해 당신은 이것을 추가해야 합니다.
다른 경우에는 정의된 상위 백분율을 제거하기 위해 사용할 수 있습니다.
body{height:100vh}
vh는 뷰포트 높이를 나타냅니다.
사용할 수 있습니다.100vw / 100vhCSS3는 뷰포트 관련 단위를 제공합니다.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>
경우에 따라 전체 콘텐츠가 화면 높이보다 작은 경우와 같이 조건부로 디브의 높이를 설정할 수 있습니다.모든 부모 요소를 100%로 설정하면 화면 크기보다 긴 내용이 차단됩니다.
이 문제를 해결하는 방법은 최소 높이를 설정하는 것입니다.
계속해서 상위 요소가 높이를 자동으로 조정할 수 있도록 합니다. 그런 다음 주 디비에서 100vh(뷰포트 단위)에서 헤더 및 바닥글 디비의 픽셀 크기를 뺍니다.CSS에서는 다음과 같은 것이 사용됩니다.
최소 높이: calc(100vh - 246º);
100vh는 주변 div를 제외한 화면의 전체 길이입니다.높이가 아닌 최소 높이를 설정하면 화면보다 긴 콘텐츠가 끊기는 대신 계속 흐르게 됩니다.
새로운 CSS 크기 조정 속성을 사용하면 부모의 정확한 높이를 설정하지 않아도 문제를 해결할 수 있습니다.더 뉴block-size그리고.inline-size속성은 다음과 같이 사용할 수 있습니다.
<!DOCTYPE html>
<style>
#parent {
border: 1px dotted gray;
height: auto; /* auto values */
width: auto;
}
#wrapper {
background-color: violet;
writing-mode: vertical-lr;
block-size: 30%;
inline-size: 70%;
}
#child {
background-color: wheat;
writing-mode: horizontal-tb;
width: 30%; /* set to 100% if you don't want to expose wrapper */
height: 70%; /* none of the parent has exact height set */
}
</style>
<body>
<div id=parent>
<div id=wrapper>
<div id=child>Lorem ipsum dollar...</div>전체 페이지 모드에서 브라우저 창 크기를 조정합니다.뷰포트 높이와 폭에 비례하는 값이라고 생각합니다.
자세한 내용은 https://www.w3.org/TR/css-sizing-3/ 을 참조하십시오.
거의 모든 브라우저가 지원합니다. https://caniuse.com/ ?search=sysize
언급URL : https://stackoverflow.com/questions/1622027/percentage-height-html-5-css
'programing' 카테고리의 다른 글
| 리터럴 값을 가진 함수에 의한 SQL 순서 (0) | 2023.08.27 |
|---|---|
| mySQL에서 mariaDB 타임스탬프 메시업으로 전환 (0) | 2023.08.27 |
| 어떤 테이블이 특정 외래 키 값을 사용하는지 어떻게 알 수 있습니까? (0) | 2023.08.27 |
| VBA - XMLHTTP 및 WinHttp 요청 속도 (0) | 2023.08.27 |
| @Temporal(TemporalType).날짜)(Oracle 12 포함) (0) | 2023.08.27 |