Question

我在干净的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/

任何人都可以帮助我吗？

Answer 1

如果您需要两列，则应使用display: inline-block或display: table-cell。示例：

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

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

具有两列的CSS布局不起作用

1 个答案: