如何伸展格的高度，以填補父格 - CSS

我有div的頁面如下圖所示如何伸展格的高度，以填補父格 - CSS

<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.這裏是工作提琴demo （更新）。我該如何解決這個問題？

來源

2011-04-07 blasteralfred Ψ

只需添加height: 100%;到#B2造型。 min-height應該沒有必要。

來源

2011-04-07 14:12:07 Snorbuckle

這將是，如果dif是空的。 – x10 2011-04-07 14:25:55

[小提琴：]（http://jsfiddle.net/UpGJq/）似乎罰款這裏有一個空的div。 – Snorbuckle 2011-04-07 14:39:18

+10

不好回答＃B2將與#B一樣高，但不能拉伸以填充剩餘空間，如 – nest 2015-07-29 13:57:10

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

使用「最小高度」屬性
警惕的補白，邊距和邊框:)

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

來源

2011-04-07 13:26:24 x10

沒有..它填滿整個頁面上邊距。我只想填寫特定的div' B' – 2011-04-07 13:30:07

它在Chrome和Firefox中正常工作。如果這不適合你，你可以使用[Faux Columns]（http://www.alistapart.com/articles/fauxcolumns/） – x10 2011-04-07 13:44:21

它的工作原理，但它正在削減頁腳'div id = D'。我不想讓它穿越div＃ – 2011-04-07 13:59:55

-5

我會用JavaScript解決方案（jQuery的），如果解決這個問題大小可以變化。

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

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

來源

2011-04-07 13:30:11 NKCSS

我正在尋找一個純粹的CSS解決方案... – 2011-04-07 13:33:50

您可能想要添加到您的問題:) – NKCSS 2011-04-07 13:35:19

+38

是不是沒有'javascript'或'jquery'標籤不夠？ – kapa 2011-04-07 14:04:04

如果你對造型的目的，你可以試試這個要去使用B2 「黑客」

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

jsFiddle

來源

2011-04-07 13:34:05 Teneff

看看@我更新的小提琴在這裏http://jsfiddle.net/QWDxr/2/ – 2011-04-07 13:35:09

這個作品，謝謝。順便說一句，它應該是'margin-bottom： - 9999px;'。你錯過了減號。 – Gaui 2015-05-22 15:22:10

什麼適合我的目的是創建一個總是在整個瀏覽器窗口內固定數量的div。

什麼工作，至少在Firefox，是這樣的

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

只要實際窗口沒有強迫滾動，股利全部重新調整大小時保留其邊界的窗口邊緣。

希望這節省了一些人的時間。

來源

2013-08-07 07:21:33

假設你有

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

來源

2017-07-06 12:34:31 onmyway133

如何伸展格的高度，以填補父格 - CSS

回答

相關問題