css 使主要内容的左右布局列 div 占据浏览器的整个高度 window

Question

我正在尝试使 div 的左右图形占据浏览器的整个高度 window。

起初我试过这样的东西https://jsfiddle.net/jr6av8n5/2/

但是由于列的 100% 高度占据了父级 div 的高度，它们不会占据整个屏幕 space。

<div id="main">
    <div id="leftLayoutCol">
    </div>
    <div id="rightLayoutCol">
    </div>
        <h1>TEST</h1>
        <h1>TEST</h1>
        <h1>TEST</h1>
        <h1>TEST</h1>
        <h1>TEST</h1>
</div>

h1 {padding:0px;margin:0px;}

#main {
    position: fixed;
    width: 55%;
    height: 100%;
    max-width: 1200px;
    margin-left: 50%;
    left: -25%;
    background-color: grey;
}

#leftLayoutCol {
    display: inline-block;
    height: 100%;
    position: absolute;
    width: 40px;
    left: -40px;
    background-color: green;
}

#rightLayoutCol {
    display: inline-block;
    height: 100%;
    position: absolute;
    width: 40px;
    right: -40px;
    background-color: green;
}

然后我尝试了这样的事情https://jsfiddle.net/4d8d8tds/2/

这更接近我想要实现的目标，但它不是可靠的解决方案，因为如果调整浏览器 window 的大小，#main div 不再水平居中以及其他一些问题。

我已经试过给 body 设置 100% 的高度并且它起作用了，除了它考虑了所有其他页面元素的高度并将它加到 body 高度使得滚动条出现并且通常看起来很糟糕（一切都向下移动）。

有什么建议吗？（可能不适用于 css3，因为在旧版浏览器上需要运行）

谢谢

Answer 1

不知道你的问题我理解的对不对

在我看来，如果您在第一个 Fiddle 中将 html 和 body 的高度都增加 100%，效果会很好。

也许你见过滚动条，因为默认情况下 body 有边距，除非设置为 0。

然而这些天我总是在我的项目中加入，特别是在使用 100% 高度时，这个：

* {
-moz-box-sizing: border-box;
     box-sizing: border-box;
}

因此填充和边框永远不会弄乱您的任何元素。我推荐你使用它。

FIDDLE

已编辑：如果元素在 100% 高度容器之外，您可以减去设置的高度 height: calc (100% - 150px);假设 150px 是这些元素组合的总高度

Answer 2

下面的演示显示了一个可能的解决方案，固定位置 header 和 footer，main 占据 window 的 100% 高度。由于 header 和 footer 的高度无法预测，我添加了一点 javascript 来计算。

var callback = function () {

    var windowHeight = $(window).height();
    var headerHeight = $("#header").height();
    var footerHeight = $("#footer").height();
    var mainHeight = windowHeight - headerHeight - footerHeight;

    $("#main").css({
        "min-height": mainHeight + "px",
        "margin-top": headerHeight + "px",
        "margin-bottom": footerHeight + "px"
    });

};

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

body, h1 {
    margin: 0;
}
#header, #footer {
    background: green;
    position: fixed;
    z-index: 1;
    left: 0;
    width: 100%;
}
#header {
    top: 0;
}
#footer {
    bottom: 0;
}
#main {
    background: silver;
    position: relative;
    width: 50%;
    height: 100%;
    max-width: 1200px;
    margin: 0 auto;
}
#left, #right {
    background: navy;
    display: block;
    width: 40px;
    height: 100%;
    position: absolute;
    top: 0;
}
#left {
    left: -40px;
}
#right {
    right: -40px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="header">header</div>
<div id="main">
    <div id="left"></div>
    <div id="right"></div>
    <h1>TEST</h1>
    <h1>TEST</h1>
    <h1>TEST</h1>
    <h1>TEST</h1>
    <h1>TEST</h1>
    <h1>TEST</h1>
    <h1>TEST</h1>
    <h1>TEST</h1>
</div>
<div id="footer">footer</div>

也可在 JSFiddle 上使用，因此您可以看到不同 window 尺寸的效果。

css 使主要内容的左右布局列 div 占据浏览器的整个高度 window

css make layout cols left and right of main content div take up whole height of browser window

html

css

layout

height