Cách kéo dài chiều cao div để lấp đầy div mẹ

106

Tôi có một trang với div như dưới đây

<div id="container">
    <div id="A">
    </div>
    <div id="B">
        <div id="B1"></div>
        <div id="B2">B2</div>
    </div>
    <div id="C"></div>
    <div id="D">
    </div>
</div>

với kiểu dáng như;

html, body {
    margin: 0;
    padding: 0;
    border: 0;
}
#B, #C, #D {
    position: absolute;
}
#A{
    top: 0;
    width: 100%;
    height: 35px;
    background-color: #99CC00;
}
#B {
    top: 35px;
    width: 200px;
    bottom: 35px;
    background-color: #999999;
    z-index:100;
}
#B2 {
    margin-top: -35px;
    bottom: 0;
    background-color: #FFFFFF;
    width: 200px;
    overflow: scroll;
}
#B1 {
    height: 35px;
    width: 35px;
    margin-left: 200px;
    background-color: #CC0066;
}
#C {
    top: 35px;
    left: 200px;
    right: 0;
    bottom: 35px;
    background-color: #CCCCCC;
}
#D {
    bottom: 0;
    width: 100%;
    height: 35px;
    background-color: #3399FF;
}

Tôi muốn điều chỉnh chiều cao của div B2để lấp đầy (hoặc kéo dài đến) toàn bộ div B(được đánh dấu bằng đường viền màu xanh lá cây) và không muốn cắt ngang chân div D. Đây là bản demo fiddle đang hoạt động (đã cập nhật). Làm sao tôi có thể giải quyết việc này??

css

— Alfred
nguồn

38

Chỉ cần thêm height: 100%;vào #B2kiểu dáng. min-heightkhông cần thiết.

— Snorbuckle
nguồn

4

Nó sẽ là, nếu dif trống.

— x10

39

xấu Câu trả lời # B2 sẽ cao như #B nhưng không kéo dài đến lấp đầy khoảng trống còn lại như hỏi

— tổ

3

điều này không hoạt động đối với một div với một div khác floatthì nó là cha mẹ?

— Don Cheadle

nó bao phủ B1 và chiếm hết không gian; /

— mikus

1

Điều này rõ ràng không hoạt động, chiều cao: 100% là 100% của vùng chứa (tôi nghĩ thường là toàn bộ khung nhìn) - chiều cao của nó sẽ nhiều hơn mong muốn.

— BT

25

Giả sử bạn có

<body>
  <div id="root" />
</body>

Với CSS thông thường, bạn có thể làm như sau. Xem ứng dụng đang hoạt động https://github.com/onmyway133/Lyrics/blob/master/index.html

#root {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

Với flexbox, bạn có thể

html, body {
  height: 100%
}
body {
  display: flex;
  align-items: stretch;
}

#root {
  width: 100%
}

— onmyway133
nguồn

10

http://jsfiddle.net/QWDxr/1/

Sử dụng thuộc tính "min-height"
Hãy thận trọng với các phần đệm, lề và đường viền :)

html, body {
    margin: 0;
    padding: 0;
    border: 0;
}
#B, #C, #D {
    position: absolute;
}
#A{
    top: 0;
    width: 100%;
    height: 35px;
    background-color: #99CC00;
}
#B {
    top: 35px;
    width: 200px;
    bottom: 35px;
    background-color: #999999;
    z-index:100;
}
#B2 {
    min-height: 100%;
    height: 100%;
    margin-top: -35px;
    bottom: 0;
    background-color: red;
    width: 200px;
    overflow: scroll;
}
#B1 {
    height: 35px;
    width: 35px;
    margin-left: 200px;
    background-color: #CC0066;
}
#C {
    top: 35px;
    left: 200px;
    right: 0;
    bottom: 35px;
    background-color: #CCCCCC;
}
#D {
    bottom: 0;
    width: 100%;
    height: 35px;
    background-color: #3399FF;
}

— x10
nguồn

1

không .. nó lấp đầy toàn bộ trang với một lề trên. tôi chỉ muốn điền vào div cụ thểB

— Alfred

Nó hoạt động chính xác trong chrome và firefox. Nếu điều này không hiệu quả với bạn, bạn có thể sử dụng Faux Columns

— x10

nó hoạt động, nhưng nó đang cắt phần chân trang div id= D. Tôi không muốn nó vượt qua div d

— Alfred

2

height:100%thiếu dấu chấm phẩy cho #B2kiểu.

— Emil

5

Điều phù hợp với mục đích của tôi là tạo một div luôn được giới hạn trong cửa sổ trình duyệt tổng thể bằng một số tiền cố định.

Điều hoạt động, ít nhất là trên firefox, là

<div style="position: absolute; top: 127px; left: 75px;right: 75px; bottom: 50px;">

Trong chừng mực cửa sổ thực tế không bị buộc phải cuộn, div sẽ bảo toàn ranh giới của nó với mép cửa sổ trong tất cả việc định cỡ lại.

Hy vọng điều này sẽ tiết kiệm thời gian cho ai đó.

— Leo Smith
nguồn

5

Nếu bạn định sử dụng B2 cho mục đích tạo kiểu, bạn có thể thử "hack" này

#B { overflow: hidden;}
#B2 {padding-bottom: 9999px; margin-bottom: -9999px}

jsFiddle

— Teneff
nguồn

1

Điều này hoạt động, cảm ơn. Nhân tiện, nó nên được margin-bottom: -9999px;. Bạn đang thiếu dấu trừ.

— Gaui

1

Tương đối vị trí container B2

Vị trí trên cùng B2 + của chiều cao còn lại

Chiều cao B2 + chiều cao B1 hoặc chiều cao còn lại

— Dmytro Yurchenko
nguồn

Đặt nút cha thành vị trí tương đối đã giải quyết được vấn đề không liên quan của tôi! Cảm ơn!

— Deejers

0

Tôi sử dụng height: stretch;. Ở đây bạn có thể tìm thấy một số chi tiết về cách sử dụng.

— Ihor
nguồn

-4

Tôi sẽ giải quyết nó bằng giải pháp javascript (jQUery) nếu kích thước có thể khác nhau.

window.setTimeout(function () {
    $(document).ready(function () {
        var ResizeTarget = $('#B');

        ResizeTarget.resize(function () {
            var target = $('#B2');
            target.css('height', ResizeTarget.height());
        }).trigger('resize');
    }); 
}, 500);

— NKCSS
nguồn

8

Bạn có thể muốn thêm điều đó vào câu hỏi của mình :)

— NKCSS

48

Không có thẻ javascripthoặc jquerykhông đủ?

— kapa

1

Điều này cũng hoàn toàn không cần thiết. CSS đã đi một chặng đường dài trong vài năm qua. Checkout flex-box và calc ().

— Shawn Whinnery,

1

Flexbox không hỗ trợ <IE10 :(

— Liên tục Meiring

@ConstantMeiring Câu hỏi thực sự là, có ai còn quan tâm đến <IE10 không? ;)

— Clonkex

Cách kéo dài chiều cao div để lấp đầy div mẹ - CSS