stackoom
  简体   繁体   中英

How to stretch div height to fill parent div - CSS

 原文  2011-04-07 13:23:58  2   8    html/ css

Question

I have a page with div s like shown in the layout / screenshot below:

布局

The code is here: 

 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; border: solid 4px #00CC00; } #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 id="container"> <div id="A">A</div> <div id="B"> <div id="B1">B1</div> <div id="B2">B2</div> </div> <div id="C">C</div> <div id="D">D</div> </div>

I want to adjust the height of B2 div to fill (or stretch to) entire B div (marked with a green border in the image) and don't want to cross the footer D div . Here is a working fiddle link (updated). How can I solve this??

8 answers

solution1
 44 ACCPTED  2011-04-07 14:12:07

I have a page with divs like below

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

with styling as;

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

See the layout / screenshot below;

布局

I want to adjust the height of div B2 to fill (or stretch to) entire div B (marked with a green border) and don't want to cross footer div D. Here is a working fiddle demo (updated). How can I solve this??

solution2
 43  2017-07-06 12:34:31

Suppose you have

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

With normal CSS, you can do the following. See a working app https://github.com/onmyway133/Lyrics/blob/master/index.html

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

With flexbox, you can

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

#root {
  width: 100%
}

solution3
 14  2011-04-07 13:26:24

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

Use the "min-height" property
Be wary of paddings, margins and borders :)

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

solution4
 5  2011-04-07 13:34:05

If you're gonna use B2 for styling purposes you can try this "hack"

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

jsFiddle

solution5
 4  2013-08-07 07:21:33

What suited my purpose was to create a div that was always bounded within the overall browser window by a fixed amount.

What worked, at least on firefox, was this

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

Insofar as the actual window is not forced into scrolling, the div preserves its boundaries to the window edge during all re-sizing.

Hope this saves someone some time.

solution6
 1  2019-02-24 01:56:18

B2 container position relative

Top position B2 + of remaining height

Height of B2 + height B1 or remaining height

solution7
 0  2021-11-10 10:25:41

如果您使用的是 JQuery，您可以这样做：

<body onload="$('nav').height($('main').height());">

solution8
 0  2022-04-22 16:25:39

I've always noticed this is possible with tables, so just change your div display types to table types and it works.

To control width: Set container div to display:table (or inline-table) and inside divs to display:table-cell like this:

<div style='width: 100%; height: 100%; display: table;'>
  <div style='background-color: red; width: 50%; height: 100%; display: table-cell;'>
    Left Side
  </div>
  <div style='background-color: green; height: 100%; display: table-cell;'>
    Right Side<br>
    <div style='background-color: blue; width = 100%;'>
      This is 100% of remainder!
    <div>
  </div>
</div>

The above will have the left div is 50% and the right inner div will fill the remainder. You can even place another div in the right inner with 100% width and it will fill the remainder.

To control height you just use table-row instead of table-cell:

<div style='width: 100%; height: 100%; display: table;'>
  <div style='background-color: red; width: 100%; height: 100%; display: table;'>
    <div style='background-color: red; width: 100%; height: 20%; display: table-row;'>
      Top Side
    </div>
    <div style='background-color: green; height: 100%; display: table-row;'>
      Bottom Side<br>
    </div>
  </div>
</div>

solution9
 0  2022-09-13 06:32:17

I have just found another solution, which is to position everything absolutely and then use {top:0; bottom:0}. 

 #B { position:absolute; width: 200px; height: 200px; background-color: orange; } #B1 { position:absolute; top:0; bottom: 0; width: 100%; background-color: cyan; } #B2 { position:absolute; bottom: 0; height: 35px; width: 100%; background: green; }
 <div id="B"> <div id="B1">B1</div> <div id="B2">B2</div> </div>

Note that there is some overlapping.

solution10
 -6  2011-04-07 13:30:11

I have a page with divs like below

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

with styling as;

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

I want to adjust the height of div B2 to fill (or stretch to) entire div B (marked with a green border) and don't want to cross footer div D. Here is a working fiddle demo (updated). How can I solve this??

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question CSS Make div to fill its parent but not to stretch it How to stretch DIV height to parent DIV? Stretch child div height to fill parent that has dynamic height CSS - How to stretch images vertically to fill when parent div doesn't have fixed height. (Without flex) DIV tag height won't stretch to fill parent space Stretch div to parent's height CSS/Bootstrap div to Fill it's parent height div how to fill parent in css Div fill height of parent div? CSS stretch parent div to max height of overlaid children
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM