높이가 아닌 이유 : 100 %가 div를 화면 높이로 확장합니까?

295

캐 러셀 DIV (s7)가 전체 화면 높이로 확장되기를 원합니다. 왜 성공하지 못했는지에 대한 아이디어가 없습니다. 페이지를 보려면 여기 로 이동 하십시오 .

body {
  height: 100%;
  color: #FFF;
  font: normal 28px/28px'HelveticaWorldRegular', Helvetica, Arial, Sans-Serif;
  background: #222 url('') no-repeat center center fixed;
  overflow: hidden;
  background-size: cover;
  margin: 0;
  padding: 0;
}
.holder {
  height: 100%;
  margin: auto;
}
#s7 {
  width: 100%;
  height: 100%: margin: auto;
  overflow: hidden;
  z-index: 1;
}
#s7 #posts {
  width: 100%;
  min-height: 100%;
  color: #FFF;
  font-size: 13px;
  text-align: left;
  line-height: 16px;
  margin: auto;
  background: #AAA;
}

<div class="nav">
  <a class="prev2" id="prev2" href="#">
    <img src="http://static.tumblr.com/ux4v5bf/ASslogxz4/left.png">
  </a>
  <a class="next2" id="next2" href="#">
    <img src="http://static.tumblr.com/ux4v5bf/swslogxmg/right.png">
  </a>
</div>

<div class="holder">
  <tr>
    <td>
      <div id="s7">
        {block:Posts}
        <div id="posts">

스 니펫 확장

html css height

— 얼 라슨
소스

2

다음은 간단하고 명확한 설명입니다. stackoverflow.com/a/31728799/3597276

— Michael Benjamin

전체 윈도우의 높이에 스트레칭 안 중첩 된 요소에 대한 아마 최고의 솔루션 stackoverflow.com/questions/7049875/height-100-not-working/...

— B-갱스터

409

백분율 값이 키에 대해 작동하려면 부모의 키를 결정해야합니다. 유일한 예외는 루트 요소 <html>이며, 백분율 높이 일 수 있습니다. .

따라서를 제외한 모든 요소 높이를 지정 <html>했으므로 다음을 추가하십시오.

html {
    height: 100%;
}

그리고 코드가 잘 작동합니다.

* { padding: 0; margin: 0; }
html, body, #fullheight {
    min-height: 100% !important;
    height: 100%;
}
#fullheight {
    width: 250px;
    background: blue;
}

<div id=fullheight>
  Lorem Ipsum        
</div>

스 니펫 확장

JSFiddle 예제 .

— 마다 라의 유령
소스

23

좋아,이 때문에 나를 믿을 수 없을만큼 바보로 만들 수도 있지만, 어떤 : 당신은 그 말을 뜻 <html>입니다 실제 요소 -처럼 <p>나 <img />? <html>HTML 문서의 시작과 끝을 정의하는 것이 유일한 목적이라고 생각했습니다 . 레이아웃이 아니라 거기에 있다고 생각했지만 브라우저 가보고있는 문서 유형을 알고 있습니까? 나는 완전히 마음이 부풀어 오른다.

— jay_t55

29

@Joey : HTML 은 실제 요소입니다. CSS로 스타일을 지정하고 JavaScript로 이벤트를 연결하고 클래스 및 ID를 추가하면 DOM에 표시됩니다. 브라우저는 <html>태그가 없어도 <head>또는 <body>요소가 없어도 HTML 문서를 가정합니다 . 그러나 HTML 사양은 <html>필수 태그로 간주 됩니다. 즉, 다른 모든 HTML 요소와 마찬가지로 본격적인 요소입니다.

— Madara의 유령

1

@SecondRikudo : 아니요. <html>태그는 사양에 따라 선택 사항입니다 (예 : HTML4 및 HTML5). 그리고 네, 어쨌든 요소가 만들어집니다.

— Robert Siemer

2

흠 ... 나를 위해 유일한 방법이 한 일을 모두 설정 html하고 body같은 height: 100%(뿐만 아니라 물론 특정의로 div난 100 % 높이를 상속 할)

— 제임스

1

@james 예, 모든 부모님의 키는 알고 있어야합니다.

— Madara의 유령

147

_{아무도 이것을 언급하지 않았기 때문에 ..}

현대적인 접근 방식 :

html/ body요소의 높이를 모두로 설정하는 대신 100%뷰포트 백분율 길이를 사용할 수도 있습니다.

5.1.2. 뷰포트 백분율 길이 : 'vw', 'vh', 'vmin', 'vmax'단위

뷰포트 백분율 길이는 초기 포함 블록의 크기를 기준으로합니다. 초기 포함 블록의 높이 또는 너비가 변경되면 그에 따라 크기가 조정됩니다.

이 경우 값 100vh(뷰포트의 높이)- (예)를 사용할 수 있습니다

body {
    height: 100vh;
}

설정 min-height도 가능합니다. (예)

body {
    min-height: 100vh;
}

이러한 장치는 대부분의 최신 브라우저에서 지원되며 여기에서 지원을 찾을 수 있습니다 .

— 조쉬 크로 지어
소스

1

나는 이것에 전혀 이점이 없다. 브라우저 뷰포트와 관련된 모든 것을 계산 해야하는 브라우저에 대한 추가 작업을 생성하지 않습니까? 뷰포트 크기 조정은 실제로 브라우저 높이와 관련된 것을 크기 조정하려는 경우에만 유용합니다.

— Robert Went

12

@RobertWent 이점이 있습니다. 예를 들어 height: 100%부모 요소의 높이가 정의 된 경우에만 작동합니다. 요소의 부모에 정의 된 높이가없고 뷰포트 백분율 단위로이를 해결하는 경우가 있습니다. 즉, 깊게 중첩 된 요소가있는 경우 간단히 설정할 수 있으며 브라우저 100vh높이가 100%높아집니다. 당신 은 어떤 이점도 보지 못할 수도 있지만, 나는 그것이 유일한 해결책이었던 수많은 경우에있었습니다. 이 단위는 html/ 와 같은 루트 요소에 유리하지 않을 수도 body있지만 그럼에도 불구하고 대안입니다

— Josh Crozier

2

그러나 우리는 깊게 중첩 된 요소가 아닌 body 요소에 대해 이야기하고 있습니다. 가능한 상위 요소 인 html 요소 만 있습니다. 그렇기 때문에 이점이 없으며 100 % 만 설정하는 것보다 더 나쁩니다. 당신의 의견은 나를 얇게 만들지 않습니다. 새로운 것이라도 더 나아지지는 않습니다. 그러나 대안입니다.

— Robert Went

4

이 접근 방식의 문제는 iPhone이 주소 표시 줄과 하단 탐색을보기 높이에서 제외한다는 body { height: 100vh }것 입니다. 즉 초기 페이지로드시 스크롤 막대가 있습니다.

— BHOLT

2

좋은. 다른 접근 방식을 시도했지만 height: 100% !important" to each parent til 성공하지 않고 html을 넣었습니다 .dom의 트리의 모든 노드가 실제로 100%있지만 원하는 요소에서 100 %를 설정할 수는 없지만 뷰포트 스타일을 사용하면 쉽다는 것을 알 수있었습니다.

— pmiranda

25

html요소의 높이를 100 %로 설정해야합니다 .

html { height:100%; }

— Shanethehat
소스

20

또한, 당신이 사용하는 경우 position: absolute다음 height: 100%잘 작동합니다.

— 스티브 타우 버
소스

4

flexbox를 사용하여 레이아웃을 만들지 않은 경우 훌륭한 해결책이 될 것입니다. : /

— Landon Call

2

width:100%;부모 를 설정하는 것을 잊지 마십시오 position:relative;.

— Kai Noack

8

부모 요소로 시도해야합니다.

html, body, form, main {
    height: 100%;
}

그러면 이것으로 충분합니다.

#s7 {
   height: 100%;
}

— mrbengi
소스

5

예를 들어 왼쪽 열 (높이 100 %)과 내용 (높이 자동)을 원한다면 absolute :

#left_column {
    float:left;
    position: absolute;
    max-height:100%;
    height:auto !important;
    height: 100%;
    overflow: hidden;

    width : 180px; /* for example */
}

#left_column div {
    height: 2000px;
}

#right_column {
    float:left;
    height:100%;
    margin-left : 180px; /* left column's width */
}

html로 :

  <div id="content">
      <div id="left_column">
        my navigation content
        <div></div>
      </div>

      <div id="right_column">
        my content
      </div>
   </div>

— 옐로 마트
소스

2

이것은 이상적이지는 않지만 자바 스크립트로 항상 할 수 있습니다. 또는 제 경우에는 jQuery

<script>
var newheight = $('.innerdiv').css('height');
$('.mainwrapper').css('height', newheight);
</script>

— 오보
소스

5

CSS만으로 충분할 때 자바 스크립트를 사용하는 것은 좋은 생각이 아닙니다.

— Bosworth99

1

왜 이런 식으로 뭔가를 복잡하게해야합니까? 나는 몇 가지 대답을 이해하지 못한다 ...

— CapturedTree

1

페이지 소스에서 다음을 볼 수 있습니다.

<div class="holder"> 
    <div id="s7" style="position: relative; width: 1366px; height: 474px; overflow: hidden;">

태그에 높이 값을 입력하면 css 파일에 정의 된 높이 대신이 값이 사용됩니다.

— 스티븐
소스

이것이 페이지 소스에 표시된 것이므로 이상합니다 : <div class = "holder"> <tr> <td> <div id = "s7"> <div id = "posts">

— Earl Larson

좋아, 위의 코드를 어떻게 얻었는지 모르겠지만 들어가서 <div id = "s7">을 <div id = "s7"style = "height : 100 %;">로 변경했습니다. 아마도 나에게서 무언가를 숨기고 있습니까? 어느 쪽이든 감사합니다 :)

— Earl Larson

1

div 안에 요소를 절대 배치하면 패딩 상단 및 하단을 50 %로 설정할 수 있습니다.

그래서 이런 식으로 :

#s7 {
    position: relative;
    width:100%;
    padding: 50% 0;
    margin:auto;
    overflow: hidden;
    z-index:1;
}

— 키이스 브라운
소스

1

50 %가 포함 요소의 높이가 아닌 너비와 관련이 있기 때문에 어떻게 작동하는지 알 수 없거나 여기에 뭔가 빠져 있습니까?

— DrLightman

0

사용하고 싶지 않은 사람들을위한 또 다른 솔루션이 있습니다 html, body, .blah { height: 100% }.

.app {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  overflow-y: auto;
}

.full-height {
  height: 100%;
}

.test {
  width: 10px;
  background: red;
}

<div class="app">
  <div class="full-height test">
  </div>
  Scroll works too
</div>

스 니펫 확장

— 미시 어
소스