•  06-07-2019
  •  | 
  •  

문제

나는 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 의지합니다 뷰포트 높이

도움이된다고 생각합니다

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top