Html CSS - 使 div 消耗所有可用空间

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/5776367/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 08:12:54  来源:igfitidea点击:

CSS - Making a div consume all available space

csshtmlcss-position

提问by Kayote

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.

我有一个“顶栏”和一个“底栏”,它们都固定在页面的顶部和底部。我想要一个 div 来消耗(占用)上面提到的两个条之间的剩余空间。

enter image description here

enter image description here

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.

中间 div 不与顶部和底部条重叠,这一点至关重要。这完全可以使用 CSS 还是我需要使用 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?

另外,如果我确实使用 js,考虑到浏览器会在 js 代码之前先加载 CSS,那么使用 js 进行中心定位如何解决上述问题?

Many thanks,

非常感谢,

回答by Sotiris

You can use relativeand absolutepositions. Here an example:

您可以使用relativeabsolute位置。这里有一个例子:

css

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

html

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

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

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

回答by andyb

This demoworks for me in Chrome12 but YMMVdepending on which browsers you need to support. For example position:fixeddoes not work correctly in IE6.

这个演示在 Chrome12 中适用于我,但YMMV取决于您需要支持的浏览器。例如position:fixed在 IE6 中不能正常工作。

回答by Stephen Chung

Use absolute positioning on the bodytag. position:absolutewith zero top and bottom will "stretch" body to be the same size as the browser window. Alternatively, setting height: 100%also works but I remember it works wierd for certain old browsers.

body标签上使用绝对定位。position:absolute顶部和底部为零将“拉伸”主体到与浏览器窗口相同的大小。或者,设置height: 100%也有效,但我记得它在某些旧浏览器上很奇怪。

Then use absolute positioning on the center div, with enough top/bottom offsets to avoid your header and footer bars. The header bar is absolutely positioned with topand the fotter is absolutely positioned with bottom.

然后在中心 div 上使用绝对定位,并使用足够的顶部/底部偏移量来避开页眉和页脚栏。标题栏绝对定位于top,而 fotter 绝对定位于bottom

Note: This won't work on mobile browsers. You'll need to use JS to get the window's height and manually set the center div's height.

注意:这不适用于移动浏览器。您需要使用 JS 来获取窗口的高度并手动设置中心 div 的高度。