Làm cách nào để buộc div con đạt 100% chiều cao của div cha mà không chỉ định chiều cao của bố mẹ?

Tôi có một trang web với cấu trúc sau:

<div id="header"></div>

<div id="main">
  <div id="navigation"></div>
  <div id="content"></div>
</div>

<div id="footer"></div>

Điều hướng ở bên trái và div nội dung ở bên phải. Thông tin cho div nội dung được đưa vào thông qua PHP, vì vậy nó khác nhau mỗi lần.

Làm cách nào tôi có thể điều chỉnh tỷ lệ điều hướng theo chiều dọc để chiều cao của nó giống với chiều cao của div nội dung, bất kể trang nào được tải?

LƯU Ý : Câu trả lời này có thể áp dụng cho các trình duyệt cũ mà không hỗ trợ cho tiêu chuẩn Flexbox. Để biết cách tiếp cận hiện đại, hãy xem: https://stackoverflow.com/a/23300532/1155721

Tôi khuyên bạn nên xem qua các cột có chiều cao bằng nhau với CSS trình duyệt chéo và không có hack .

Về cơ bản, làm điều này với CSS theo cách tương thích với trình duyệt không phải là chuyện nhỏ (mà là tầm thường với các bảng), vì vậy hãy tìm cho mình một giải pháp đóng gói sẵn thích hợp.

Ngoài ra, câu trả lời khác nhau tùy thuộc vào việc bạn muốn chiều cao 100% hay chiều cao bằng nhau. Thông thường đó là chiều cao bằng nhau. Nếu đó là chiều cao 100% thì câu trả lời hơi khác.

Dành cho phụ huynh:

display: flex;

Bạn nên thêm một số tiền tố, http://css-tricks.com/USE-flexbox/ .

Chỉnh sửa: Như @Adam Garner đã lưu ý, align-items: Stretch; không cần thiết Cách sử dụng của nó cũng dành cho cha mẹ, không phải trẻ em. Nếu bạn muốn xác định trẻ em kéo dài, bạn sử dụng align-self.

.parent {
  background: red;
  padding: 10px;
  display:flex;
}

.other-child {
  width: 100px;
  background: yellow;
  height: 150px;
  padding: .5rem;
}

.child {  
  width: 100px;
  background: blue;
}

<div class="parent">
  <div class="other-child">
    Only used for stretching the parent
  </div>
  <div class="child"></div>
</div>

Đây là một vấn đề bực bội liên quan đến các nhà thiết kế mọi lúc. Mẹo nhỏ là bạn cần đặt chiều cao thành 100% trên BODY và ​​HTML trong CSS của mình.

html,body {
    height:100%;
}

Mã dường như vô nghĩa này là để xác định cho trình duyệt ý nghĩa 100%. Thất vọng, có, nhưng là cách đơn giản nhất.

Tôi thấy rằng thiết lập hai cột display: table-cell;thay vì float: left;hoạt động tốt.

Nếu bạn không phiền div điều hướng bị cắt trong trường hợp div nội dung ngắn bất ngờ, có ít nhất một cách dễ dàng:

#main {
position: relative;
}

#main #navigation {
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 10em; /* or whatever */
}

#main #content {
margin: 0;
margin-left: 10em; /* or whatever width you set for #navigation */
}

Mặt khác, có kỹ thuật cột giả .

#main {
    overflow: hidden;
}
#navigation, #content {
    margin-bottom: -1000px;
    padding-bottom: 1000px;
}

sử dụng jQuery:

$(function() {
    function unifyHeights() {
        var maxHeight = 0;
        $('#container').children('#navigation, #content').each(function() {
            var height = $(this).outerHeight();
            // alert(height);
            if ( height > maxHeight ) {
                maxHeight = height;
            }
        });
        $('#navigation, #content').css('height', maxHeight);
    }
    unifyHeights();
});

Hãy thử làm cho lề dưới 100%.

margin-bottom: 100%;

#main {
   display: table;
} 
#navigation, #content {
   display: table-cell;
}

Nhìn vào ví dụ này .

height : <percent>sẽ chỉ hoạt động nếu bạn có tất cả các nút cha có chiều cao phần trăm được chỉ định với chiều cao cố định tính bằng pixel, ems, v.v. ở cấp cao nhất. Bằng cách đó, chiều cao sẽ xếp tầng xuống thành phần của bạn.

Bạn có thể chỉ định 100% cho html và các phần tử cơ thể như @Travis đã nêu trước đó để có chiều cao trang xếp tầng xuống các nút của bạn.

Sau một thời gian dài tìm kiếm và thử, không có gì giải quyết được vấn đề của tôi ngoại trừ

style = "height:100%;"

trên div trẻ em

và cho phụ huynh áp dụng điều này

.parent {
    display: flex;
    flex-direction: column;
}

Ngoài ra, tôi đang sử dụng bootstrap và điều này không làm hỏng phản hồi cho tôi.

Dựa trên phương pháp được mô tả trong bài viết này, tôi đã tạo ra giải pháp động .Less:

Html:

<div id="container3">
    <div id="container2">
        <div id="container1">
            <div id="col1">Column 1</div>
            <div id="col2">Column 2</div>
            <div id="col3">Column 3</div>
        </div>
    </div>
</div>

Ít hơn:

/* Changes these variables to adjust your columns */
@col1Width: 60%;
@col2Width: 1%;
@padding: 0%;

/* Misc variable. Do not change */
@col3Width: 100% - @col1Width - @col2Width;

#container3 {
    float: left;
    width: 100%;
    overflow: hidden;
    background-color: red;
    position: relative;

    #container2 {
        float: left;
        width: 100%;
        position: relative;
        background-color: yellow;
        right: @col3Width;

        #container1 {
            float: left;
            width: 100%;
            position: relative;
            right: @col2Width;
            background-color: green;

            #col1 {
                float: left;
                width: @col1Width - @padding * 2;
                position: relative;
                left: 100% - @col1Width + @padding;
                overflow: hidden;
            }

            .col2 {
                float: left;
                width: @col2Width - @padding * 2;
                position: relative;
                left: 100% - @col1Width + @padding + @padding * 2;
                overflow: hidden;
            }

            #col3 {
                float: left;
                width: @col3Width - @padding * 2;
                position: relative;
                left: 100% - @col1Width + @padding + @padding * 4;
                overflow: hidden;
            }
        }
    }
}

Thêm display: gridvào cha mẹ

Tôi biết đó là một thời gian dài kể từ khi câu hỏi được đưa ra, nhưng tôi đã tìm thấy một giải pháp dễ dàng và nghĩ rằng ai đó có thể sử dụng nó (xin lỗi về tiếng Anh kém). Nó đi từ đây:

CSS

.main, .sidebar {
    float: none;
    padding: 20px;
    vertical-align: top;
}
.container {
    display: table;
}
.main {
    width: 400px;
    background-color: LightSlateGrey;
    display: table-cell;
}
.sidebar {
    width: 200px;
    display: table-cell;
    background-color: Tomato;
}

HTML

<div class="container clearfix">
    <div class="sidebar">
        simple text here
    </div>
    <div class="main">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam congue, tortor in mattis mattis, arcu erat pharetra orci, at vestibulum lorem ante a felis. Integer sit amet est ac elit vulputate lobortis. Vestibulum in ipsum nulla. Aenean erat elit, lacinia sit amet adipiscing quis, aliquet at erat. Vivamus massa sem, cursus vel semper non, dictum vitae mi. Donec sed bibendum ante.
    </div>
</div>

Ví dụ đơn giản. Lưu ý rằng bạn có thể biến thành phản ứng.

Giải pháp của tôi:

$(window).resize(function() {
   $('#div_to_occupy_the_rest').height(
        $(window).height() - $('#div_to_occupy_the_rest').offset().top
    );
});

Có một chút mâu thuẫn trong tiêu đề và nội dung của câu hỏi. Tiêu đề nói về một div cha, nhưng câu hỏi làm cho nó có vẻ như bạn muốn hai div anh chị em (điều hướng và nội dung) có cùng chiều cao.

Bạn (a) muốn cả điều hướng và nội dung phải cao 100% chiều cao của chính hay (b) muốn điều hướng và nội dung có cùng chiều cao?

Tôi sẽ giả sử (b) ... nếu đó là như vậy, tôi không nghĩ bạn sẽ có thể làm điều đó với cấu trúc trang hiện tại của bạn (ít nhất, không phải với CSS thuần túy và không có kịch bản). Bạn có thể sẽ cần phải làm một cái gì đó như:

<main div>
    <content div>
         <navigation div></div>
    </div>
</div>

và đặt div nội dung có lề trái cho dù chiều rộng của ngăn điều hướng là bao nhiêu. Theo cách đó, nội dung của nội dung nằm ở bên phải của điều hướng và bạn có thể đặt div điều hướng ở mức 100% chiều cao của nội dung.

EDIT: Tôi đang làm điều này hoàn toàn trong đầu, nhưng có lẽ bạn cũng cần đặt lề trái của div điều hướng thành giá trị âm hoặc đặt nó tuyệt đối sang 0 để đẩy nó về phía bên trái. Vấn đề là, có nhiều cách để loại bỏ điều này nhưng không phải tất cả chúng đều tương thích với tất cả các trình duyệt.

[Đề cập đến mã ít hơn của Dmity trong một câu trả lời khác] Tôi đoán rằng đây là một loại "mã giả" nào đó?

Từ những gì tôi hiểu, hãy thử sử dụng kỹ thuật cột giả nên thực hiện thủ thuật.

http://www.alistapart.com/articles/fauxcolumns/

Hi vọng điêu nay co ich :)

Thủ thuật này không hoạt động: Thêm một yếu tố cuối cùng trong phần HTML của bạn với một phong cách rõ ràng: cả hai;

    <div style="clear:both;"></div>

Tất cả mọi thứ trước đó sẽ được bao gồm trong chiều cao.

cho position: absolute;đứa trẻ làm việc trong trường hợp của tôi

Bạn sử dụng CSS Flexbox

.flex-container {
  display: flex;
  background-color: DodgerBlue;
}

.flex-container > div {
  background-color: #f1f1f1;
  margin: 10px;
  padding: 20px;
  font-size: 30px;
}

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
</div>

<p>A Flexible Layout must have a parent element with the <em>display</em> property set to <em>flex</em>.</p>

<p>Direct child elements(s) of the flexible container automatically becomes flexible items.</p>

</body>
</html>

Câu trả lời này không còn lý tưởng nữa kể từ CSS flexbox và lưới nơi triển khai CSS. Tuy nhiên nó vẫn là một giải pháp làm việc

Trên màn hình nhỏ hơn, bạn có thể muốn giữ chiều cao tự động vì col1, col2 và col3 được xếp chồng lên nhau.

Tuy nhiên, sau một điểm dừng truy vấn phương tiện, bạn muốn các cols xuất hiện cạnh nhau với chiều cao bằng nhau cho tất cả các cột.

1125 px chỉ là một ví dụ về điểm dừng chiều rộng cửa sổ mà sau đó bạn muốn đặt tất cả các cột thành cùng một chiều cao.

<div class="wraper">
    <div class="col1">Lorem ipsum dolor sit amet.</div>
    <div class="col2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos laudantium, possimus sed, debitis amet in, explicabo dolor similique eligendi officia numquam eaque quae illo magnam distinctio odio, esse vero aspernatur.</div>
    <div class="col3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem, odio qui praesentium.</div>
</div>

Tất nhiên, bạn có thể đặt nhiều điểm dừng hơn nếu bạn cần.

<script>
    $(document).ready(function(){
        $(window).on('load resize', function() {
            let vraperH = $('.wraper').height();
            if (window.innerWidth>= 1125) {
              $('.col1').height(vraperH);
              $('.col2').height(vraperH);
              $('.col3').height(vraperH);
            }
            if (window.innerWidth < 1125) {
              $('.col1').height('auto');
              $('.col2').height('auto');
              $('.col3').height('auto');
            }
        });
    });
</script>

Tôi có cùng một vấn đề, nó hoạt động dựa trên câu trả lời của Hakam Fostok, tôi đã tạo một ví dụ nhỏ, trong một số trường hợp, nó có thể hoạt động mà không cần phải thêm display: flex;và flex-direction: column;vào thùng chứa cha

.row {
    margin-top: 20px;
}

.col {
    box-sizing: border-box;
    border: solid 1px #6c757d;
    padding: 10px;
}

.card {
    background-color: #a0a0a0;
    height: 100%;
}

Câu đố

Như được hiển thị trước đó, flexbox là dễ nhất. ví dụ.

#main{ display: flex; align-items:center;}

điều này sẽ căn chỉnh tất cả các phần tử con vào trung tâm trong phần tử cha.

.row-eq-height {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display:         flex;
 }

Từ:

http://getbootstrap.com.vn/examples/equal-height-columns/equal-height-columns.css

trạng thái bootstrap nhưng bạn không cần bootstrap để sử dụng cái này. Trả lời câu hỏi cũ này, vì điều này làm việc cho tôi, và có vẻ khá dễ thực hiện.

Đây là cùng một câu trả lời tôi cung cấp cho Câu hỏi này

Ở đây demo thời trang cũ dựa trên position: absolutecontainer nội dung và position: relativecontainer cha.

Đối với cách hiện đại để làm điều đó - hộp flex là tốt nhất.

Cách dễ nhất để làm điều này là chỉ giả nó. A List Apart đã đề cập đến vấn đề này trong nhiều năm qua, như trong bài viết này của Dan Cederholm từ năm 2004 .

Đây là cách tôi thường làm:

<div id="container" class="clearfix" style="margin:0 auto;width:950px;background:white url(SOME_REPEATING_PATTERN.png) scroll repeat-y center top;">
    <div id="navigation" style="float:left;width:190px;padding-right:10px;">
        <!-- Navigation -->
    </div>
    <div id="content" style="float:left;width:750px;">
        <!-- Content -->
    </div>
</div>

Bạn có thể dễ dàng thêm tiêu đề vào thiết kế này bằng cách gói #container vào div khác, nhúng div tiêu đề dưới dạng anh chị em của # chứa, và di chuyển các kiểu lề và chiều rộng sang vùng chứa chính. Ngoài ra, CSS nên được chuyển thành một file riêng biệt và không giữ inline, vv vv Cuối cùng, lớp clearfix có thể được tìm thấy trên positioniseverything .