Làm thế nào để tạo một div nổi 100% chiều cao của cha mẹ?

Đây là HTML:

<div id="outer">
    <div id="inner"></div>
    Test
</div>

Và đây là CSS:

#inner {
  float: left;
  height: 100%;
}

Khi kiểm tra với các công cụ dành cho nhà phát triển Chrome, div bên trong sẽ có chiều cao 0px.

Làm thế nào tôi có thể buộc nó là 100% chiều cao của div cha?

Để #outerchiều cao được dựa trên nội dung của nó, và có#inner dựa trên chiều cao của nó, làm cho cả hai yếu tố được định vị tuyệt đối.

Thông tin chi tiết có thể được tìm thấy trong thông số kỹ thuật cho thuộc tính chiều cao css , nhưng về cơ bản, #innerphải bỏ qua #outerchiều cao nếu #outerchiều cao là auto, trừ khi #outer được định vị tuyệt đối. Sau đó, #innerchiều cao sẽ là 0, trừ khi #inner chính nó được định vị tuyệt đối.

<style>
    #outer {
        position:absolute; 
        height:auto; width:200px; 
        border: 1px solid red; 
    }
    #inner {
        position:absolute; 
        height:100%; 
        width:20px; 
        border: 1px solid black; 
    }
</style>

<div id='outer'>
    <div id='inner'>
    </div>
    text
</div>

Tuy nhiên ... Bằng cách định vị #innerhoàn toàn, một floatcài đặt sẽ bị bỏ qua, do đó bạn sẽ cần chọn chiều rộng cho #innerrõ ràng và thêm phần đệm vào #outerđể giả mạo gói văn bản mà tôi nghi ngờ bạn muốn. Ví dụ, bên dưới, phần đệm #outerlà chiều rộng #inner+3. Thuận tiện (vì toàn bộ vấn đề là tăng #innerchiều cao lên 100%) không cần phải bọc văn bản bên dưới #inner, vì vậy điều này sẽ trông giống như #innerđược thả nổi.

<style>
    #outer2{
        padding-left: 23px;
        position:absolute; 
        height:auto; 
        width:200px; 
        border: 1px solid red; 
    }
    #inner2{
        left:0;
        position:absolute; 
        height:100%; 
        width:20px; 
        border: 1px solid black; 
   }
</style>

<div id='outer2'>
    <div id='inner2'>
    </div>
    text
</div>

Tôi đã xóa câu trả lời trước đó của mình, vì nó dựa trên quá nhiều giả định sai về mục tiêu của bạn.

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: Chỉ có nhược điểm là IE như bình thường, IE9 không hỗ trợ flex. http://caniuse.com/flexbox

Chỉnh sửa 2: Như @toddsby đã lưu ý, các mục căn chỉnh là dành cho cha mẹ và giá trị mặc định của nó thực sự là kéo dài . Nếu bạn muốn một giá trị khác nhau cho trẻ em, có tài sản tự sắp xếp.

Chỉnh sửa 3: jsFiddle: https://jsfiddle.net/bv71tms5/2/

Trên thực tế, miễn là phần tử cha được định vị, bạn có thể đặt chiều cao của trẻ thành 100%. Cụ thể, trong trường hợp bạn không muốn cha mẹ được định vị tuyệt đối. Hãy để tôi giải thích thêm:

<style>
    #outer2 {
        padding-left: 23px;
        position: relative; 
        height:auto; 
        width:200px; 
        border: 1px solid red; 
    }
    #inner2 {
        left:0;
        position:absolute; 
        height:100%; 
        width:20px; 
        border: 1px solid black; 
    }
</style>

<div id='outer2'>
    <div id='inner2'>
    </div>
</div>

Miễn là bạn không cần hỗ trợ các phiên bản Internet Explorer sớm hơn IE8, bạn có thể sử dụng display: table-cellđể thực hiện việc này:

HTML:

<div class="outer">
    <div class="inner">
        <p>Menu or Whatever</p>
    </div>
    <div class="inner">
        <p>Page contents...</p>
    </div>
</div>

CSS:

.inner {
    display: table-cell;
}

Điều này sẽ buộc mỗi phần tử với .innerlớp chiếm toàn bộ chiều cao của phần tử cha của nó.

Tôi đã làm một ví dụ giải quyết vấn đề của bạn.

Bạn phải tạo một trình bao bọc, làm nổi nó, sau đó định vị tuyệt đối div của bạn và cho nó 100% chiều cao.

HTML

<div class="container">
    <div class="left">"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." </div>
  <div class="right-wrapper">
    <div class="right">"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." </div>
  </div>
  <div class="clear">&nbsp;</div>
</div>

CSS:

.container {
    width: 100%;
    position:relative;
}
.left {
    width: 50%;
    background-color: rgba(0, 0, 255, 0.6);
    float: left;
}
.right-wrapper {
    width: 48%;
    float: left;
}
.right {
    height: 100%;
    position: absolute;
}

Giải trình: Div .right được định vị tuyệt đối. Điều đó có nghĩa là chiều rộng và chiều cao của nó, và các vị trí trên cùng và bên trái sẽ được tính toán dựa trên div cha đầu tiên hoàn toàn hoặc vị trí tương đối CHỈ nếu các thuộc tính chiều rộng hoặc chiều cao được khai báo rõ ràng trong CSS; nếu chúng không được khai báo rõ ràng, các thuộc tính đó sẽ được tính dựa trên vùng chứa chính (.right-Wrapper).

Vì vậy, chiều cao 100% của DIV sẽ được tính dựa trên chiều cao cuối cùng của .container và vị trí cuối cùng của vị trí .right sẽ được tính dựa trên vùng chứa chính.

Đây là một cách đơn giản hơn để đạt được điều đó:

1. Đặt hiển thị vùng chứa ba phần tử (#outer): bảng
2. Và tự đặt các phần tử (#inner) hiển thị: ô bảng
3. Bỏ nổi.
4. Sự thành công.

#outer{
    display: table;
}
#inner {
    display: table-cell;
    float: none;
}

Cảm ơn @Itay trong Divated div, chiều cao 100%

Nếu bạn chuẩn bị sử dụng một ít jQuery, câu trả lời rất đơn giản!

$(function() {
    $('.parent').find('.child').css('height', $('.parent').innerHeight());
});

Điều này hoạt động tốt khi thả một phần tử sang một bên với 100% chiều cao của phần tử mẹ trong khi các phần tử nổi khác thường quấn quanh được giữ ở một bên.

Hy vọng điều này sẽ giúp người hâm mộ jQuery.

Đây là một mẫu mã cho hệ thống lưới có chiều cao bằng nhau.

#outer{
width: 100%;
margin-top: 1rem;
display: flex;
height:auto;
}

Trên đây là CSS cho div ngoài

#inner{
width: 20%;
float: left;
border: 1px solid;
}

Trên đây là div bên trong

Hy vọng điều này sẽ giúp bạn

Điều này đã giúp tôi.

#outer {
    position:relative;
}
#inner {
    position:absolute;
    top:0;
    left:0px;
    right:0px;
    height:100%;
}

Thay đổi bên phải: và bên trái: để đặt chiều rộng #inner thích hợp hơn.

Một trường hợp tương tự khi bạn cần một số phần tử con có cùng chiều cao có thể được giải quyết bằng flexbox:

https://css-tricks.com/USE-flexbox/

Đặt display: flex;cho flex: 1;các phần tử cha và con, tất cả chúng sẽ có cùng chiều cao.

thử

#outer{overflow: auto;}

hiển thị nhiều tùy chọn hơn trong: Làm thế nào để bạn giữ cho cha mẹ của các yếu tố nổi không bị sụp đổ?