문제
나는 a를 설정하려고한다 <div>
CSS의 특정 비율 높이이지만 내부의 내용과 같은 크기로 남아 있습니다. HTML 5를 제거 할 때 <!DOCTYTPE html>
그러나 그것은 작동합니다 <div>
원하는대로 전체 페이지를 가져옵니다. 페이지가 검증되기를 원합니다. 어떻게해야합니까?
나는이 CSS가있다 <div>
, ID가 있습니다 page
:
#page {
padding: 10px;
background-color: white;
height: 90% !important;
}
해결책
CSS에서 DIV를 특정 백분율 높이로 설정하려고합니다.
무엇의 백분율?
높이가 백분율을 설정하려면 부모 요소 (*)의 높이가 명시 적이어야합니다. 이것은 상당히 자명합니다. auto
, 블록은 콘텐츠의 높이를 차지합니다 ... 그러나 컨텐츠 자체가 부모의 비율로 높이가 표시되면 약간의 캐치를 만들었습니다.
그래서 div의 부모는 명시 적으로 height
재산. 원한다면 그 높이가 백분율이 될 수 있지만 문제를 다음 단계로 이동시킵니다.
DIV 높이를 뷰포트 높이의 백분율로 만들고 싶다면 DIV의 모든 조상 ( <html>
그리고 <body>
, 있어야합니다 height: 100%
, 따라서 명시적인 백분율 높이의 체인이 있습니다.
(*: 또는 div가 배치되면 '블록 포함'도 가장 가까운 조상이기도합니다.)
또는 모든 최신 브라우저 및 IE> = 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%;" 작동하거나 작동하지 않습니다.
세트 비율 (높이 : 자체 너비의 %)으로 요소를 만들려면 가장 좋은 방법은 사용을 효과적으로 설정하는 것입니다. 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에서 높이를 자동으로 조정하고 100VH (Viewport Units)에서 헤더 및 바닥 글리의 픽셀 크기를 빼도록하십시오. CSS에서 :
Min -Height : calc (100vh -246px);
100VH는 화면의 전체 길이이며 주변 DIV를 뺀 것입니다. 높이가 아닌 최소층을 설정하면 화면보다 긴 내용이 잘라지는 대신 계속 흐릅니다.
안녕! 백분율 ( %)을 사용하려면 IT 부모 요소의 %를 정의해야합니다. 사용하는 경우 신체 {높이 : 100%} 부모의 높이가 없기 때문에 작동하지 않습니다. 이 경우 작동하기 위해 신체 높이 당신은 이것을 추가해야합니다 html {높이 : 100%}
다른 경우에는 상위 비율을 정의하는 것을 제거하기 위해 사용할 수 있습니다.
바디 {높이 : 100VH}
VH 의지합니다 뷰포트 높이
도움이된다고 생각합니다