How can I make a div auto-adjust its height between two divs, according to window height using CSS/Javascript?

问题

I have a div positioned at the top of the body and another div positioned at the bottom of the body

Now I want to place a div between those two divs and have its height take the max space available between those two divs.

The vertical space between those two divs is not fixed, meaning that when the user decreases/increases the height of the window, I want the middle div to readjust its height accordingly.

More specifically :

<body>
  <div style="position: fixed; top: 0px; left: 0px; width: 200px; height: 100%;">
    <div style="float: left; height: 50px, width: 200px; background-color: green;"/>
    <div style="float: left; height: ???? ; width: 200px; background-color: red;"/> 
    <div style="float: left; height: 50px, width: 200px; background-color: blue;" />
  </div>
</body>

So basically imagine a green rectangular fixed at the top left of the page, a blue one fixed at the bottom left of the page and a red column between them readjusting its height according to the height of the window.

How can I achieve this?

Setting its height at 100% simply makes the middle div expand its height to the bottom of the window which is not what I want. I need it to stop where the blue div starts. Also, making its height e.g. 73% doesn't make it auto-adjust itself correctly when the window height is changed either.

回答1:

Assuming you are doing this because you want a footer that is flushed to the bottom of the page, then this will achieve a similar effect: http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

However solution does not resize the middle div but merely positions the footer over it and then use padding to prevent the contents of the middle div from going onto the footer.

If you want to actually change the size of the middle div, here's the JavaScript for it using jQuery: http://jsfiddle.net/BnJxE/

JavaScript

var minHeight = 30; // Define a minimum height for the middle div

var resizeMiddle = function() {
    var h = $('body').height() - $('#header').height() - $('#footer').height();
    h = h > minHeight ? h : minHeight;
    $('#body').height(h);
}

$(document).ready(resizeMiddle);
$(window).resize(resizeMiddle);

HTML

<div id="container">
   <div id="header"></div>
   <div id="body"></div>
   <div id="footer"></div>
</div>

CSS

html,
body {
   margin:0;
   padding:0;
   height: 100%;
}

#header {
   background:#ff0;
   height: 100px;
}
#body {
   background: #aaa;
}
#footer {
   height: 60px;
   background:#6cf;
}

回答2:

The correct way of ending <div> tag is by using </div>.

Try this code-

<body>
  <div style="position: fixed; top: 0px; left: 0px; width: 200px; height: 100%;">
    <div style="float: left; height: 50px; width: 200px; background-color: green; position: fixed;"></div>
    <div style="float: left; height: 100%; width: 200px; background-color: red;"></div> 
    <div style="float: left; bottom: 0px; left:0px; position: fixed; height: 50px; width: 200px; background-color: blue;"></div>
  </div>
</body>

回答3:

HTML:

<body>
    <div id="wrapper">
        <div id="div1">...</div>
        <div id="div2">...</div>
        <div id="div3">
            content<br/>
            content<br/>
        </div>
    </div>
</body>

CSS:

html, body {
    height:100%;
}
#wrapper {
    position:relative;
    height:100%;
}
#div3 {
    background:pink;
    bottom:0;
    position:absolute;
    width:100%;
}

jsfiddle: http://jsfiddle.net/BnJxE/

回答4:

You can use paddings the same height of your top and bottom elements and set box-sizing to border-box. By setting the height to 100% it will cover the entire height minus the paddings.

JSFiddle with scrollable content

#container {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 200px;
  height: 100%;
}
#top {
  float: left;
  height: 50px;
  width: 200px;
  background-color: green;
  position: fixed;
  top: 0;
}
#middle {
  float: left;
  height: 100%;
  width: 200px;
  background-color: red;
  box-sizing: border-box;
  padding-bottom: 50px;
  padding-top: 50px;
}
#bottom {
  float: left;
  height: 50px;
  width: 200px;
  background-color: blue;
  position: fixed;
  bottom: 0;
}

<body>
  <div id="container">
    <div id="top"></div>
    <div id="middle"></div> 
    <div id="bottom"></div>
  </div>
</body>

来源：https://stackoverflow.com/questions/17665476/how-can-i-make-a-div-auto-adjust-its-height-between-two-divs-according-to-windo

标签

javascript

css

html

height