1

私はきれいな CSS レイアウトに取り組んでおり、サイドバーとコンテンツが必要です。また、コンテンツ ボックス内のコンテンツにサイドバーとしてより多くのテキストがある場合、サイドバーは 100% まで拡大する必要があります。しかし、私はこの問題の解決策を見つけることができません。

<body>
<div id="page">
    <div class="left">
        <div class="logo"></div>
        <div class="sidebar">sidebar</div>
    </div>
    <div class="right">
        <div class="header">
                <h1>
            title
        </h1>

        </div>
        <div class="content">
             content text
        </div>
    </div>
</div>
</body>

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    background-color: #fff;
    font-size: 1.0em;
    font-style: normal;
    font-family:"Century Gothic", "Avantgarde", arial, sans-serif;
    line-height: 20px;
    color: #666;
}
div.rightBox {
    display: block;
    position: absolute;
    z-index: 1;
    width: 40px;
    height: 40px;
    top: 181px;
    left: 981px;
    background-color: #95C97A;
    border-bottom: #CAE3BB solid 25px;
    border-right: #CAE3BB solid 25px;
}
div#page {
    background-color: #fff;
    min-height: 100%;
    /* Mindesthöhe für moderne Browser */
    height: auto !important;
    /* Important Regel für moderne Browser */
    height: 100%;
    /* Mindesthöhe für den IE */
    overflow: hidden !important;
    /* FF Scroll-leiste */
    border: 1px solid #000;
}
div#page .left {
    margin: 0 0 0 0;
    background-color: #CAE3BB;
    min-height: 100%;
    height: auto !important;
    height: 100%;
    width: 200px;
    border: 1px solid #000;
    border-left: #fff 21px solid;
    display: block;
    position: absolute;
    float: left;
}
div#page .left .logo {
    margin: 21px 0 0 -21px;
    width: 200px;
    height: 200px;
    border-left: #B0D69A 21px solid;
    background-color: #93C677;
}
div#page .left .logo img {
    margin: 5px 0 0 10px;
}
div#page .left .sidebar {
    padding: 10px 10px 10px 10px;
}
div#page .right {
    background-color: #fff;
    min-height: 100%;
    height: 100%;
    margin: 0 0 0 221px;
    display: block;
    position: absolute;
}
div#page .right .header {
    margin: 21px 0 0 0;
    background-color: #B0D69A;
    width: 800px;
    height: 200px;
}
    div#page .right .content {
    padding: 20px 0 20px 15px;
    width: 770px;
    border: 1px solid #000;
}

ここにフィドラーがあります：http://jsfiddle.net/c6TGQ/

誰でも私を助けることができますか？

4

1 に答える 1

1

2 つの列が必要な場合は、display: inline-blockまたはを使用する必要がありますdisplay: table-cell。例:

http://jsfiddle.net/c6TGQ/1/

http://jsfiddle.net/c6TGQ/2/

于 2013-04-27T21:25:59.167 に答える