2

3 列のレイアウトの Web サイトを構築しています。header意志は上に固定され、意志navは左側に固定されます。次に、ラッパーには and が含まれmainますaside。私が欲しいのはメインで、脇はラッパーの高さを埋めることができます。

そして、ここに私の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

あなたは非常に厳密なレイアウトを持っています。すべてが修正されました..ヘッダーの高さを 100px から 120px に変更する必要がある場合はどうすればよいでしょうか? それに応じて、さまざまな場所で変更する必要があります。

これは、高さや幅を固定しない、レイアウト用の純粋な 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 に答える