CSS - 使div消耗所有可用空间 [英] CSS - Making a div consume all available space

问题描述

全部，

我有一个页面，假设只占用浏览器中的可用屏幕空间。

我有一个顶栏和底栏，它们都固定在页面的顶部和底部。我想要一个div，它将消耗（占用）上述两个栏之间的剩余空间。

至关重要的是中间的div不会被顶部和底部条。这是所有可能的CSS或者我需要使用js。

此外，如果我使用js，考虑浏览器在js代码之前加载CSS，上面的工作是如何使用js进行中心定位？ / p>

非常感谢，

解决方案

>相对和绝对位置。这里有个例子：

css

  html，body，＃wrapper {
 height：100％; 
 margin：0; 
 padding：0; 
} 
 #wrapper {
 position：relative; 
} 
 
 #top，#middle，#bottom {
 position：absolute; 
} 
 
 #top {
 height：50px; 
 width：100％; 
 background：gray; 
} 
 #middle {
 top：50px; 
 bottom：50px; 
 width：100％; 
 background：black; 
} 
 #bottom {
 bottom：0; 
 height：50px; 
 width：100％; 
 background：gray; 
} 
  

html

 < div id =wrapper> 
< div id =top>< / div> 
< div id =middle>< / div> 
< div id =bottom>< / div> 
< / div> 
  

演示： http://jsfiddle.net/jz4rb/4

All,

I have a page which is suppose to take up only the available screen space in the browser.

I have a 'top bar' and a 'bottom bar', both of which are fixed positioned at the top and bottom of the page. I want to have a div which will consume (take up) the remaining of the space inbetween the two bars mentioned above.

Its crucial that the middle div is not overlapped by the top and bottom bars. Is this at all possible with CSS or do I need to make use of js.

Also, if I do go with js, considering the browser loads up the CSS first before the js code, how is the above work out using js for centre positioning?

Many thanks,

解决方案

You can use relative and absolute positions. Here an example:

css

   html,body,#wrapper {
        height:100%;
        margin:0;
        padding:0;
    }
    #wrapper {
        position:relative;
    }

    #top, #middle, #bottom {
        position:absolute;
    }

    #top {
        height:50px;
        width:100%;
        background:grey;
    }
    #middle {
        top:50px;
        bottom:50px;
        width:100%;
        background:black;
    }
    #bottom {
        bottom:0;
        height:50px;
        width:100%;
        background:grey;
    }

html

<div id="wrapper">
    <div id="top"></div>
    <div id="middle"></div>
    <div id="bottom"></div>
</div>

Demo: http://jsfiddle.net/jz4rb/4

这篇关于CSS - 使div消耗所有可用空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！