최소 신장이있는 부모 내부의 자녀 : 100 % 상속받지 않음

설정하여 div 컨테이너가 페이지의 전체 높이를 차지할 수있는 방법을 찾았습니다 min-height: 100%;. 그러나 중첩 된 div를 추가하고 설정 height: 100%;하면 컨테이너 높이로 확장되지 않습니다. 그것을 고칠 수있는 방법이 있습니까?

html, body {
  height: 100%;
  margin: 0;
}

#containment {
  min-height: 100%;
  background: pink;
}

#containment-shadow-left {
  height: 100%;
  background: aqua;
}

<div id="containment">
  <div id="containment-shadow-left">
    Hello World!
  </div>
</div>

이것은보고 된 웹킷 (chrome / safari) 버그이며, 키가 최소 인 부모의 자녀는 height 속성을 상속 할 수 없습니다. https://bugs.webkit.org/show_bug.cgi?id=26559

분명히 Firefox도 영향을받습니다 (현재 IE에서 테스트 할 수 없음)

가능한 해결 방법 :

• 위치를 추가합니다 : #containment
• 위치 추가 : # containment-shadow-left에 절대

내부 요소에 절대 위치가 있으면 버그가 표시되지 않습니다.

http://jsfiddle.net/xrebB/를 참조하십시오

2014 년 4 월 10 일 편집

나는 현재 내가하는 프로젝트에서 일하고 있어요 때문에 정말 와 부모 컨테이너가 필요 min-height컨테이너의 높이를 상속하고, 자식 요소를 좀 더 많은 연구를했다.

첫째 : 현재 브라우저 동작이 실제로 버그인지 확실하지 않습니다. CSS2.1 사양은 다음과 같이 말합니다.

백분율은 생성 된 상자를 포함하는 블록의 높이를 기준으로 계산됩니다. 포함하는 블록의 높이가 명시 적으로 지정되지 않은 경우 (즉, 내용 높이에 따라 다름)이 요소가 절대적으로 배치되지 않으면 값은 'auto'로 계산됩니다.

컨테이너에 최소 높이를 넣으면 높이를 명시 적으로 지정 하지 않으므로 요소의 auto높이를 가져와야합니다. 이것이 바로 Webkit과 다른 모든 브라우저가하는 일입니다.

둘째, 내가 찾은 해결 방법 :

컨테이너 요소를 display:table로 설정 height:inherit하면 min-height100 %를 주는 것과 정확히 동일한 방식으로 작동합니다 . 더 중요한 것은 자식 요소를 설정 display:table-cell하면 컨테이너 요소의 높이를 100 % 이상으로 완벽하게 상속합니다.

전체 CSS :

html, body {
  height: 100%;
  margin: 0;
}

#container {
  background: green;
  display: table;
  height: inherit;
  width: 100%;
}

#content {
  background: red;
  display: table-cell;
}

마크 업 :

<div id="container">
  <div id="content">
      <p>content</p>
  </div>
</div>

http://jsfiddle.net/xrebB/54/를 참조하십시오 .

height: 1px부모 컨테이너에 추가하십시오 . Chrome, FF, Safari에서 작동합니다.

나는 이것을 어디서나 보지 못했기 때문에 이것을 공유 할 것이라고 생각했고, 나는 해결책을 고치는 데 사용했습니다.

해결책 :min-height: inherit;

나는 지정된 최소 키를 가진 부모가 있었고 그 키가 될 아이가 필요했습니다.

.parent {
  min-height: 300px;
  background-color: rgba(255,255,0,0.5); //yellow
}

.child {
  min-height: inherit;
  background-color: rgba(0,255,0,0.5); //blue
}

p {
  padding: 20px;
  color: red;
  font-family: sans-serif;
  font-weight: bold;
  text-align: center;
}

<div class="parent">
  <div class="child">
    <p>Yellow + Blue = Green :)</p>
  </div>
</div>

이런 식으로 아이는 이제 최소 높이의 100 % 높이로 작동합니다.

나는 어떤 사람들이 이것을 유용하게 사용하기를 바랍니다 :)

이것은 @jackocnr의 코멘트에 추가되었지만 놓쳤습니다. 최신 브라우저의 경우 이것이 최선의 방법이라고 생각합니다.

컨테이너가 너무 작 으면 내부 요소가 전체 컨테이너를 채우도록하지만 컨테이너가 너무 크면 컨테이너의 높이가 확장됩니다.

#containment {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

#containment-shadow-left {
  flex: 1;
}

Kushagra Gour의 솔루션은 (적어도 크롬과 IE에서) 작업을 수행하고 사용하지 않고 원래의 문제를 해결 display: table;하고 display: table-cell;. 플 런커 참조 : http://plnkr.co/edit/ULEgY1FDCsk8yiRTfOWU

min-height: 100%; height: 1px;외부 div를 설정 하면 필요에 따라 실제 높이가 100 % 이상이됩니다. 또한 내부 div가 높이를 올바르게 상속받을 수 있습니다.

기존 답변 외에도 vh사용할 뷰포트 단위 가 있습니다. 아래의 간단한 스 니펫. 물론 페이지 머리글과 바닥 글의 높이 가 calc()같은 min-height: calc(100vh - 200px);경우 에도 함께 사용할 수 있습니다 200px.

body {
  margin: 0;
}

.child {
  min-height: 100vh;
  background: pink;
}

<div class="parent">
  <div class="child"></div>
</div>

나는 이것이 브라우저의 버그라고 생각하지 않습니다. 모두 같은 방식으로 작동합니다. 즉, 명시적인 높이 지정을 중단하면 최소 높이는 기본적으로 "마지막 단계"입니다.

CSS 2.1 사양에서 제안하는 방식과 정확히 일치하는 것으로 보입니다. http://www.w3.org/TR/CSS2/visudet.html#the-height-property

백분율은 생성 된 상자를 포함하는 블록의 높이를 기준으로 계산됩니다. 포함하는 블록의 높이가 명시 적으로 지정되지 않은 경우 (즉, 내용 높이에 따라 다름)이 요소가 절대적으로 배치되지 않으면 값은 'auto'로 계산됩니다.

따라서 min-height부모에는 명시 적 height속성이 설정되어 있지 않으므로 기본값은 auto입니다.

display: table-cell타겟 고객의 브라우저에서 가능한 경우 flexbox와 같은 최신 스타일 을 사용 하여이 문제를 해결할 수있는 방법이 있습니다. 또한 절대적으로 배치 된 내부 요소 에서 top및 bottom속성을 사용하여 특정 상황에서이를 무시할 수 있습니다 .

display: flex;여기에서 제안 되었지만 display: grid;지금 광범위하게 지원되는 것을 사용 하는 것이 좋습니다. 기본적으로 그리드의 유일한 자식은 부모를 완전히 채 웁니다.

html, body {
  height: 100%;
  margin: 0;
  padding: 0; /* Don't forget Safari */
}

#containment {
  display: grid;
  min-height: 100%;
  background: pink;
}

#containment-shadow-left {
  background: aqua;
}

Google 직원의 경우 :

이 jquery- 해결책은 #containment가 자동으로 높이를 (높이 : 자동으로) 얻은 다음 픽셀 값으로 지정된 실제 높이를 가져옵니다.

<script type="text/javascript">
<!--
    $(function () {

        // workaround for webkit-bug http://stackoverflow.com/a/8468131/348841

        var rz = function () {
            $('#containment')
            .css('height', 'auto')
            .css('height', $('#containment').height() + 'px');
        };

        $(window).resize(function () {
            rz();
        });

        rz();

    })
-->
</script>

현재 이것을 달성하는 가장 좋은 방법은를 사용하는 것 display: flex;입니다. 그러나 IE11을 지원하려고 할 때 문제가 발생할 수 있습니다. flexbox를 사용 하는 https://caniuse.com 에 따르면 :

최소 높이를 사용하면 IE 11이 항목을 세로로 올바르게 정렬하지 않습니다.

Internet Explorer 호환 솔루션

해결책은 display: table;부모와 display: table-row;자식 모두를 height: 100%;대신 하여 사용하는 것입니다 min-height: 100%;.

솔루션의 대부분은 여기에 사용 등재 display: table, table-row및 / 또는 table-cell, 그러나 그들이 같은 동작을 복제하지 않는 min-height: 100%;인 :

• 부모의 계산 된 높이를 상속합니다 ( height속성 을 상속하는 것과 반대 ).
• 부모의 키가 그것을 초과하도록 허용 min-height;

이 솔루션을 사용하는 동안 동작은 동일하며 min-height버그를 피할 수 있는 속성 이 필요하지 않습니다.

설명

대부분의 요소는 다른 요소가 사용하기 때문에 작동하는 이유는 display: table그리고 table-row항상 그 내용과 같은 높이로 될 것입니다. 이렇게하면 height속성이와 비슷하게 동작합니다 min-height.

작동중인 솔루션

html, body {
  height: 100px;
  margin: 0;
}

#containment {
  display: table;
  height: 100%;
  background: pink;
  width: 100%;
}

#containment-shadow-left {
  display: table-row;
  height: 100%;
  background: aqua;
}

#content {
  padding: 15px;
}

#demo {
  display: none;
  background-color: red;
  height: 200px;
}

#demo-checkbox:checked ~ #demo {
  display: block;
}

<div id="containment">
  <div id="containment-shadow-left">
    <div id="content">
      <input id="demo-checkbox" type="checkbox">
      <label for="demo-checkbox">Click here for overflow demo</label>
      <div id="demo">This is taller than #containment</div>
    </div>
  </div>
</div>

또 다른 JS 솔루션은 쉽고 CSS가 간단하지 않거나 추가 마크 업 / 해키 솔루션을 피하는 데 사용할 수 있습니다.

function minHeight(elm, percent) {
  var windowHeight = isNaN(window.innerHeight) ? 
                     window.clientHeight : window.innerHeight;
  var height = windowHeight * percent / 100;
  elm.style.minHeight = height + 'px';
}

승 / jQuery :

function minHeight($elm, percent) {
  var windowHeight = $(window).height();
  var height = windowHeight * percent / 100;
  $elm.css('min-height', height + 'px');
}

각도 지시어 :

myModule.directive('minHeight', ['$window', function($window) {
  return {
    restrict: 'A',
    link: function(scope, elm, attrs) {
      var windowHeight = isNaN($window.innerHeight) ? 
               $window.clientHeight : $window.innerHeight;
      var height = windowHeight * attrs.minHeight / 100;
      elm.css('min-height', height + 'px');
    }
  };
}]);

이처럼 사용하려면 :

<div>
  <!-- height auto here -->
  <div min-height="100">
    <!-- This guy is at least 100% of window height but grows if needed -->
  </div>
</div>

이것은 일반적으로 나를 위해 작동합니다 :

.parent {
  min-height: 100px;
  background-color: green;
  display: flex;
}
.child {
  height: inherit;
  width: 100%;
  background-color: red;
}

<!DOCTYPE html>
<html>
  <body>
    <div class="parent">
      <div class="child">
      </div>
    </div>
  </body>
</html>

 Run code snippetHide results
Expand snippet

이 주제를 완성하기 위해 고정 위치를 사용하여 여기에서 탐색하지 않은 해결책을 찾았 습니다.

오버플로 없음

html, body, .wrapper, .parent, .child {
  position: fixed;
  top: 0; 
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0;
  padding: 0;
  height: 100%;
}

.child {
  overflow: auto;
  background: gray;
}

.height-50 {
  height: 50%;
  width: 5em;
  margin: 10px auto;
  background: cyan;
}

<div class="wrapper">
  <div class="parent">
    <div class="child">
      
      <div class="height-50"></div>
      
    </div>
  </div>
</div>

오버플로

html, body, .wrapper, .parent, .child {
  position: fixed;
  top: 0; 
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0;
  padding: 0;
  height: 100%;
}

.child {
  overflow: auto;
  background: gray;
}

.height-150 {
  height: 150%;
  width: 5em;
  margin: 10px auto;
  background: cyan;
}

<div class="wrapper">
  <div class="parent">
    <div class="child">
      
      <div class="height-150"></div>
      
    </div>
  </div>
</div>

이것은 백분율 기반의 키와 부모의 자녀 키에 따라 여전히 성장하는 저에게 효과적입니다. Firefox, Chrome 및 Safari에서 잘 작동합니다.

.parent {
  position: relative;
  min-height: 100%;
}

.child {
  min-height: 100vh;
}

<div class="parent">
    <div class="child"></div>
  </div>

우리를 위해 노력한 후! 크롬은 표시 값을 인라인 블록으로 설정할 때 자식 요소가 100 % 높이가되기를 원한다는 것을 이해합니다. btw 설정 float이 원인입니다.

display:inline-block

최신 정보

작동하지 않습니다. 해결책은 부모 노드 오프셋 높이를 가져 와서 자바 스크립트가있는 페이지 및 페이지에서 사용하는 것입니다.

<script>
    SomedivElement = document.getElementById('mydiv');
    SomedivElement.style.height = String(nvleft.parentNode.offsetHeight) + 'px';    
</script>