2

我正在建立一个 3 列布局网站。将header固定在顶部，nav将固定在左侧。然后包装器将包含mainand aside。我想要的是 main 和 side 可以填充包装器的高度。

这是我的CSS。您还可以查看我的 jsFiddle http://jsfiddle.net/scarletsky/h8r2z/3/

* {
    margin: 0;
    padding: 0;    
}

html, body {
    width: 100%;
    height: 100%;
}

.header {
    width: 100%;
    height: 100px;
    position: fixed;
    top: 0;
    z-index: 9;
    background: red;
}

.nav {
    width: 20%;
    height: 100%;
    position: fixed;
    top: 100px;
    left: 0;
    background: green;
}

.wrapper {
    width: 80%;
    min-height: 100%;
    margin-top: 100px;
    margin-left: 20%;
    position: relative;
}

.main {
    width: 70%;
    min-height: 100%;
    position: absolute;
    left: 0;
    background: black;
}

.aside {
    width: 30%;
    min-height: 100%;
    position: absolute;
    right: 0;
    background: blue;
}

.u-color-white {
    color: white;
}

看来他们可以很好地工作。但是当内容的高度在main或aside超过自己的高度时，它就不起作用了。我不知道如何解决它。

谁能帮我？谢谢！

4

3 回答 3

3

你有一个非常严格的布局。一切都已修复.. 如果您需要将标题从 100 像素高度更改为 120 怎么办？你必须在很多不同的地方相应地改变它。

这是针对您的布局的纯 CSS 解决方案，无需固定任何高度或宽度。（如果你愿意，你可以固定高度或宽度）这个布局是完全响应式的，并且是跨浏览器的。

如果您不固定元素的高度/宽度，它们将完全满足他们的需要。

这是一个工作小提琴

HTML：

<header class="Header"></header>
<div class="HeightTaker">
    <div class="Wrapper">
        <nav class="Nav"></nav>
        <div class="ContentArea">
            <div class="Table">
                <div class="Main"></div>
                <div class="Aside"></div>
            </div>
        </div>
    </div>
</div>

CSS：

* {
    margin: 0;
    padding: 0;
}
html, body {
    width: 100%;
    height: 100%;
}
body:before {
    content:'';
    height: 100%;
    float: left;
}
.Header {
    height: 100px;
    /*No need to fix it*/
    background-color: red;
}
.HeightTaker {
    position: relative;
}
.HeightTaker:after {
    content:'';
    display: block;
    clear: both;
}
.Wrapper {
    position: absolute;
    width: 100%;
    height:100%;
}
.Nav {
    height: 100%;
    float: left;
    background-color: green;
}
.ContentArea {
    overflow: auto;
    height: 100%;
}
.Table {
    display: table;
    width: 100%;
    height: 100%;
}
.Main {
    width: 70%;
    /*No need to fix it*/
    background-color: black;
    display: table-cell;
}
.Aside {
    width: 30%;
    /*No need to fix it*/
    background-color: black;
    display: table-cell;
    background-color: blue;
}
.u-color-white {
    color: white;
}
于 2013-10-12T19:22:09.597 回答
1

这是一个很常见的问题。我建议为包装器提供背景图像，使其看起来像旁边的最小高度为 100% 或使用此站点上的方法：http: //css-tricks.com/fluid-width-equal-height -列/

于 2013-10-12T16:26:45.627 回答
0

看看这个小提琴......希望这是你想要的......

.aside {
width: 30%;
min-height: 100%;
position:fixed;
right: 0;
background: blue;

}

http://jsfiddle.net/h8r2z/6/

于 2013-10-12T17:12:36.347 回答