Con trong cha mẹ có chiều cao tối thiểu: 100% không thừa hưởng chiều cao

Tôi đã tìm ra cách để tạo một thùng chứa div để chiếm ít nhất toàn bộ chiều cao của trang, bằng cách cài đặt min-height: 100%;. Tuy nhiên, khi tôi thêm một div lồng nhau và thiết lập height: 100%;, nó không kéo dài theo chiều cao của container. Có cách nào để khắc phục nó?

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>

Đây là một lỗi webkit (chrome / safari) được báo cáo, con cái của cha mẹ có chiều cao tối thiểu không thể thừa hưởng thuộc tính chiều cao: https://bugs.webkit.org/show_orms.cgi?id=26559

Rõ ràng Firefox cũng bị ảnh hưởng (hiện tại không thể kiểm tra IE)

Cách giải quyết có thể:

• thêm vị trí: liên quan đến #containment
• thêm vị trí: tuyệt đối vào # ngăn chặn-bóng-trái

Lỗi không hiển thị khi phần tử bên trong có định vị tuyệt đối.

Xem http://jsfiddle.net/xrebB/

Chỉnh sửa vào ngày 10 tháng 4 năm 2014

Vì tôi hiện đang làm việc trong một dự án mà tôi thực sự cần các bộ chứa cha mẹ min-heightvà các phần tử con kế thừa chiều cao của bộ chứa, tôi đã thực hiện một số nghiên cứu khác.

Đầu tiên: Tôi không còn chắc chắn nữa liệu hành vi trình duyệt hiện tại có thực sự là lỗi hay không. Thông số kỹ thuật CSS2.1 cho biết:

Tỷ lệ phần trăm được tính tương ứng với chiều cao của khối chứa hộp được tạo. Nếu chiều cao của khối chứa không được chỉ định rõ ràng (nghĩa là, nó phụ thuộc vào chiều cao nội dung) và phần tử này không được định vị tuyệt đối, giá trị sẽ tính thành 'tự động'.

Nếu tôi đặt chiều cao tối thiểu trên thùng chứa của mình, tôi không chỉ định rõ ràng chiều cao của nó - vì vậy phần tử của tôi sẽ có autochiều cao. Và đó chính xác là những gì Webkit - và tất cả các trình duyệt khác - làm.

Thứ hai, cách giải quyết tôi tìm thấy:

Nếu tôi đặt thành phần chứa của mình display:tablevới height:inheritnó, nó hoạt động chính xác theo cách tương tự như khi tôi cung cấp cho nó min-height100%. Và - quan trọng hơn - nếu tôi đặt phần tử con thành display:table-cellnó sẽ kế thừa hoàn hảo chiều cao của phần tử container - cho dù đó là 100% trở lên.

CSS đầy đủ:

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

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

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

Đánh dấu:

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

Xem http://jsfiddle.net/xrebB/54/ .

Thêm height: 1pxvào thùng chứa cha mẹ. Hoạt động trong Chrome, FF, Safari.

nghĩ rằng tôi sẽ chia sẻ điều này, vì tôi không thấy điều này ở bất cứ đâu, và là những gì tôi đã sử dụng để khắc phục giải pháp của mình.

GIẢI PHÁP :min-height: inherit;

Tôi có một phụ huynh có chiều cao tối thiểu được chỉ định và tôi cần một đứa trẻ cũng có chiều cao đó.

.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>

Bằng cách này, trẻ bây giờ đóng vai trò là 100% chiều cao tối thiểu.

Tôi hy vọng một số người thấy điều này hữu ích :)

Điều này đã được thêm vào trong một bình luận của @jackocnr nhưng tôi đã bỏ lỡ nó. Đối với các trình duyệt hiện đại tôi nghĩ rằng đây là cách tiếp cận tốt nhất.

Nó làm cho phần tử bên trong lấp đầy toàn bộ container nếu nó quá nhỏ, nhưng mở rộng chiều cao của container nếu nó quá lớn.

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

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

Giải pháp của Kushagra Gour hoạt động (ít nhất là trong Chrome và IE) và giải quyết vấn đề ban đầu mà không phải sử dụng display: table;và display: table-cell;. Xem plunker: http://plnkr.co/edit/ULEgY1FDCsk8yiRTfOWU

Cài đặt min-height: 100%; height: 1px;trên div ngoài khiến chiều cao thực tế của nó tối thiểu 100%, theo yêu cầu. Nó cũng cho phép div bên trong thừa hưởng chính xác chiều cao.

Ngoài các câu trả lời hiện có, còn có các đơn vị khung nhìn vhđể sử dụng. Đoạn trích đơn giản dưới đây. Tất nhiên, nó cũng có thể được sử dụng cùng với calc(), ví dụ như min-height: calc(100vh - 200px);khi tiêu đề trang và chân trang có 200pxchiều cao với nhau.

body {
  margin: 0;
}

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

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

Tôi không tin rằng đây là một lỗi với trình duyệt. Tất cả đều hoạt động theo cùng một cách - nghĩa là, một khi bạn ngừng chỉ định chiều cao rõ ràng, chiều cao tối thiểu về cơ bản là "bước cuối cùng".

Dường như chính xác là thông số CSS 2.1 gợi ý: http://www.w3.org/TR/CSS2/visudet.html#the-height-property

Tỷ lệ phần trăm được tính tương ứng với chiều cao của khối chứa hộp được tạo. Nếu chiều cao của khối chứa không được chỉ định rõ ràng (nghĩa là, nó phụ thuộc vào chiều cao nội dung) và phần tử này không được định vị tuyệt đối, giá trị sẽ tính thành 'tự động'.

Do đó, vì min-heightcha mẹ không có một tường minhheight tập thuộc tính , nó mặc định là tự động.

Có một số cách xung quanh điều này có thể bằng cách sử dụng display: table-cellhoặc các kiểu mới hơn như flexbox, nếu điều đó có thể đối với trình duyệt của đối tượng được nhắm mục tiêu của bạn. Bạn cũng có thể phá vỡ điều này trong một số trường hợp nhất định bằng cách sử dụng các thuộc tính topvà bottomtrên một yếu tố bên trong được định vị tuyệt đối, giúp bạn có chiều cao 100% mà không chỉ định như vậy.

Mặc dù display: flex;đã được đề xuất ở đây, hãy cân nhắc sử dụng display: grid;ngay bây giờ vì nó được hỗ trợ rộng rãi . Theo mặc định, con duy nhất của lưới sẽ hoàn toàn điền vào cha mẹ của nó.

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;
}

Đối với nhân viên của Google:

Cách giải quyết vấn đề này làm cho #containment có chiều cao tự động (theo, height: auto), sau đó lấy chiều cao thực tế được gán làm giá trị pixel.

<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>

Cách tốt nhất để đạt được điều này hiện nay là sử dụng display: flex;. Tuy nhiên, bạn có thể gặp sự cố khi cố gắng hỗ trợ IE11. Theo https://caniuse.com bằng flexbox:

IE 11 không căn chỉnh theo chiều dọc các mục một cách chính xác khi sử dụng chiều cao tối thiểu

Giải pháp tương thích Internet Explorer

Giải pháp là sử dụng display: table;cho cả cha mẹ và display: table-row;con cái height: 100%;để thay thế min-height: 100%;.

Hầu hết các giải pháp được liệt kê ở đây sử dụng display: table, table-rowvà / hoặc table-cell, nhưng họ không tái tạo hành vi tương tự như min-height: 100%;, đó là:

• Kế thừa chiều cao tính toán của cha mẹ (trái ngược với việc thừa kế heighttài sản của nó );
• Cho phép chiều cao của cha mẹ vượt quá chiều cao của nó min-height;

Trong khi sử dụng giải pháp này, hành vi là như nhau và thuộc tính min-heightkhông cần thiết cho phép khắc phục lỗi.

Giải trình

Lý do tại sao nó hoạt động là bởi vì, không giống như hầu hết các yếu tố, các yếu tố sử dụng display: tablevà table-rowsẽ luôn cao như nội dung của chúng. Điều này làm cho heighttài sản của họ hành xử tương tự như min-height.

Giải pháp trong hành động

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>

Một giải pháp JS khác, rất dễ dàng và có thể được sử dụng để tránh một giải pháp đánh dấu / hacky không dễ dàng chỉ dành cho CSS.

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

W / jQuery:

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

Chỉ thị góc:

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');
    }
  };
}]);

Được sử dụng như thế này:

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

Điều này thường làm việc cho tôi:

.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

Chỉ để giữ cho chủ đề này hoàn chỉnh, tôi đã tìm thấy một giải pháp chưa được khám phá ở đây bằng cách sử dụng vị trí Cố định.

Không tràn

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>

Với tràn

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>

Đây là những gì làm việc cho tôi với chiều cao dựa trên tỷ lệ phần trăm và cha mẹ vẫn phát triển theo chiều cao của trẻ em. Hoạt động tốt trong Firefox, Chrome và Safari.

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

.child {
  min-height: 100vh;
}

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

sau khi cố gắng vì chúng ta chrome hiểu rằng tôi muốn phần tử con có chiều cao 100% khi tôi đặt giá trị hiển thị thành khối nội tuyến. btw thiết lập float sẽ gây ra nó.

display:inline-block

cập nhật

đây không phải là làm việc. giải pháp là lấy offset cha mẹ và sử dụng nó tại và trên trang với javascript.

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