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不会再与其他问题一起水平居中。

我已经尝试过让身体保持100％的高度并且它的工作原理除了它考虑到每个其他页面元素的高度并将其总结到身体高度使得滚动条出现并且通常看起来很糟糕（一切都得到）向下移动。）

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

由于

Answer 1

下面的演示展示了一种可能的解决方案，其固定位置为header和footer，而main占据窗口高度的100％。由于header和footer的高度不可预测，我在计算中添加了一些javascript。

＆＃13;

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);

＆＃13;

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;
}

＆＃13;

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

＆＃13;

也可在JSFiddle上使用，因此您可以针对不同的窗口尺寸查看它。

Answer 2

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

在我看来，如果你在你的第一个小提琴中为html和body添加100％的高度，它就可以正常工作。

也许您已经看过滚动条，因为默认情况下，身体有余量，除非设置为0。

然而，这些天我总是包括在我的项目中，特别是在高度100％的情况下，这个：

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

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

<强> FIDDLE

编辑：如果您有100％高度容器之外的元素，您可以减去设置的高度高度：calc（100％ - 150px）; asuming 150px是这些元素组合的总高度

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

2 个答案: