วิธียืดความสูง div เพื่อเติม div ระดับบนสุด

107

ฉันมีหน้าที่มี div เหมือนด้านล่าง

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

ด้วยสไตล์เป็น;

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

ฉันต้องการปรับความสูงของ div B2เพื่อเติม (หรือยืดเป็น) div ทั้งหมดB(ทำเครื่องหมายด้วยขอบสีเขียว) และไม่ต้องการข้ามส่วนท้าย div D นี่คือการสาธิตซอที่ใช้งานได้ (อัปเดต) ฉันจะแก้ปัญหานี้ได้อย่างไร ??

css

— อัลเฟรด
แหล่งที่มา

38

เพียงแค่เพิ่มheight: 100%;การ#B2จัดแต่งทรงผม min-heightไม่จำเป็น

— Snorbuckle
แหล่งที่มา

4

มันจะเป็นถ้า dif ว่างเปล่า

— x10

39

คำตอบที่ไม่ดี # B2 จะสูงเท่า #B แต่ไม่ยืดจนเต็มพื้นที่ที่เหลือตามที่ถาม

— รัง

3

สิ่งนี้ใช้ไม่ได้กับ div ที่แตกต่างกันfloatแล้วเป็นพาเรนต์ใช่หรือไม่

— Don Cheadle

ครอบคลุมชั้น B1 และใช้พื้นที่ทั้งหมด /

— mikus

1

สิ่งนี้ใช้ไม่ได้อย่างชัดเจนความสูง: 100% คือ 100% ของคอนเทนเนอร์ (ฉันคิดว่าส่วนใหญ่มักจะเป็นวิวพอร์ตทั้งหมด) - ความสูงจะมากกว่าที่ต้องการ

— BT

25

สมมติว่าคุณมี

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

ด้วย CSS ปกติคุณสามารถทำสิ่งต่อไปนี้ได้ ดูแอปที่ใช้งานได้https://github.com/onmyway133/Lyrics/blob/master/index.html

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

ด้วย flexbox คุณสามารถทำได้

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

#root {
  width: 100%
}

— onmyway133
แหล่งที่มา

10

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

ใช้คุณสมบัติ "min-height"
ระวังการพายระยะขอบและขอบ :)

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
แหล่งที่มา

1

ไม่ .. มันเติมขอบด้านบนทั้งหน้า ฉันแค่ต้องการเติม div เฉพาะB

— Alfred

ทำงานได้อย่างถูกต้องใน chrome และ firefox หากวิธีนี้ไม่ได้ผลคุณสามารถใช้Faux Columns

— x10

มันทำงาน div id= Dแต่มันคือการตัดส่วนท้าย ฉันไม่ต้องการให้มันข้าม div d

— Alfred

2

height:100%ไม่มีเครื่องหมายอัฒภาคสำหรับ#B2สไตล์

— Emil

5

สิ่งที่เหมาะกับจุดประสงค์ของฉันคือการสร้าง div ที่ล้อมรอบเสมอภายในหน้าต่างเบราว์เซอร์โดยรวมด้วยจำนวนคงที่

สิ่งที่ได้ผลอย่างน้อยใน firefox คือสิ่งนี้

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

ตราบใดที่หน้าต่างจริงไม่ได้ถูกบังคับให้เลื่อน div จะรักษาขอบเขตไว้ที่ขอบหน้าต่างในระหว่างการปรับขนาดใหม่ทั้งหมด

หวังว่านี่จะช่วยใครบางคนได้บ้าง

— ลีโอสมิ ธ
แหล่งที่มา

5

หากคุณจะใช้ B2 เพื่อการจัดแต่งทรงผมคุณสามารถลองใช้ "แฮ็ก" นี้

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

jsFiddle

— Teneff
แหล่งที่มา

1

ใช้งานได้ขอบคุณ margin-bottom: -9999px;โดยวิธีการที่มันควรจะเป็น คุณไม่มีเครื่องหมายลบ

— Gaui

1

ตำแหน่งคอนเทนเนอร์ B2 ญาติ

ตำแหน่งบนสุด B2 + ของความสูงที่เหลือ

ความสูง B2 + ความสูง B1 หรือความสูงที่เหลือ

— Dmytro Yurchenko
แหล่งที่มา

การตั้งค่าโหนดแม่ให้วางตำแหน่งสัมพัทธ์ช่วยแก้ปัญหาที่ไม่เกี่ยวข้องของฉันได้! ขอบคุณ!

— Deejers

0

ฉันใช้height: stretch;. ที่นี่คุณสามารถหารายละเอียดเกี่ยวกับการใช้งาน

— Ihor
แหล่งที่มา

-4

ฉันจะแก้ปัญหาด้วยโซลูชันจาวาสคริปต์ (jQUery) หากขนาดอาจแตกต่างกันไป

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

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

— NKCSS
แหล่งที่มา

8

คุณอาจต้องการเพิ่มคำถามของคุณ :)

— NKCSS

48

ไม่มีjavascriptหรือjqueryแท็กเพียงพอหรือไม่?

— kapa

1

สิ่งนี้ไม่จำเป็นโดยสิ้นเชิง CSS มาไกลในช่วงสองสามปีที่ผ่านมา ชำระเงินกล่องดิ้นและคำนวณ ()

— Shawn Whinnery

1

Flexbox ไม่รองรับ <IE10 :(

— Constant Meiring

@ConstantMeiring คำถามที่แท้จริงคือไม่มีใครสนใจ <IE10? ;)

— Clonkex

วิธียืดความสูง div เพื่อเติม div ระดับบนสุด - CSS