백분율 높이 HTML 5 / CSS
<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>
안녕! 백분율 (%)을 사용하려면 %의 상위 요소를 정의해야합니다. body {height : 100 %} 를 사용 하면 부모의 키 비율이 없으므로 작동하지 않습니다. 이 경우 신체 높이 를 높이 려면 html {height : 100 %}로 추가해야합니다 .
다른 경우에는 부모 비율을 정의하기 위해 사용할 수 있습니다.
몸 {높이 : 100vh}
vh 는 뷰포트 높이를 나타냅니다
I think it help
Sometimes, you may want to conditionally set the height of a div, such as when the entire content is less than the height of the screen. Setting all parent elements to 100% will cut off content when it is longer than the screen size.
So, the way to get around this is to set the min-height:
Continue to let the parent elements automatically adjust their height Then in your main div, subtract the pixel sizes of the header and footer div from 100vh (viewport units). In css, something like:
min-height: calc(100vh - 246px);
100vh is full length of the screen, minus the surrounding divs. By setting min-height and not height, content longer than screen will continue to flow, instead of getting cut off.
참고URL : https://stackoverflow.com/questions/1622027/percentage-height-html-5-css
'programing tip' 카테고리의 다른 글
| 쿼리를 통해 MySQL에서 데이터베이스 구조를 얻는 방법 (0) | 2020.06.05 |
|---|---|
| Visual Studio 2015 또는 2017에서 단위 테스트를 찾지 못함 (0) | 2020.06.05 |
| 객체를 포함하는 배열을 반복하고 속성에 액세스하는 방법 (0) | 2020.06.05 |
| Docker에 볼륨을 추가하지만 하위 폴더는 제외 (0) | 2020.06.05 |
| 생년월일 및 getDate ()를 기준으로 연령 (년)을 계산하는 방법 (0) | 2020.06.05 |