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

Question

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

起初我尝试过类似https://jsfiddle.net/jr6av8n5/2/

但由于列的 100% 高度占用了父 div 的高度，因此它们不会占用整个屏幕空间。

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

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

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

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

谢谢

Answer 1

下面的演示显示了一个可能的解决方案，固定位置为header 和footer，main 占据窗口的 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 上找到，因此您可以看到它在不同窗口大小下的运行情况。

Answer 2

我不知道我是否理解你的问题。

在我看来，如果您在第一个 Fiddle 中为 html 和 body 添加 100% 的高度，它就可以正常工作。

也许你已经看到滚动条了，因为默认情况下 body 有边距，除非设置为 0。

然而这些天来，我总是在我的项目中加入，特别是在高度 100% 的情况下，这个：

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

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

FIDDLE

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