Question

我正在尝试将侧边栏放在 #SUBCONTAINER div的末尾。这是HTML代码：

<body>
<div id="container">
    <div id="subcontainer">
        <div id="sidebar">
            <div class="logo">
            <img src="pictures/icon.png" alt="LOGO">
            </div>
        </div>
        <div id="pagecontainer">
            <div class="page">
            <p>Lorem ipsum dolor sit amet...</p>
            </div>
        </div>
    </div>
    <div id="footer">
    footer
    </div>
</div>
</body>

这就是我现在正在使用的CSS：

html, body {
    background-color:#ffffff;
    margin:0 0 0 0;
    height:100%;
}

#container {
    position:relative;
    width:100%;
}

#subcontainer {
    position:relative;
    clear:both;
}

#sidebar {
    width:20%;
    float:left;
    background-color:#BD4538;
    color:white;
}
    .logo {
        text-align:center;
        left:50%;
        right:50%;
        border-left:-8em;
        border-right:-8em;
    }

#pagecontainer {
    width:80%;
    float:right;
    background-color:#FFFFFF;
    color:black;
}

    .page {
        padding:1em 1em 1em 1em;
        background-color:#FFFFFF;
        color:black;
    }

#footer {
    clear:both;
    height:10em;
    width:100%;
    bottom:0;
    background-color:#B82928;
    color:white;
}

p {
    margin: 0em 0em 0em 0em;
    text-align:justify;
    text-indent:1em;
}

不幸的是， SIDEBAR DIV没有延伸到父 SUBCONTAINER 容器的末尾，所以如果我在 PAGECONTAINER DIV中有更长的文字，我会在 SIDEBARE DIV下看到父 BODY 的白色背景。

我想到了一个技巧：如果我将容器 PAGECONTAINER 的背景更改为 SIDEBAR 的bgcolor，我就会得到我想要的东西，但我正在努力响应式网站因此 SIDEBAR 需要改变位置并转到pabe的顶端

那么，有什么建议吗？

Answer 1

从#sidebar div和#pagecontainer div中删除“float”属性，并将其设置为display: table-cell; 另外，将#subcontainer设置为display:table和width:100%;。这将使侧边栏和页面容器填充子容器div。

看看：

html, body {
    background-color:#ffffff;
    margin:0 0 0 0;
    height:100%;
}

#container {
    position:relative;
    width:100%;
}

#subcontainer {
    position:relative;
    display: table;
    clear:both;
    width: 100%;
}

#sidebar {
    width:20%;
    display: table-cell;
    background-color:#BD4538;
    color:white;
}
    .logo {
        text-align:center;
        left:50%;
        right:50%;
        border-left:-8em;
        border-right:-8em;
    }

#pagecontainer {
    width:80%;
    display:table-cell;
    background-color:#FFFFFF;
    color:black;
}

    .page {
        padding:1em 1em 1em 1em;
        background-color:#FFFFFF;
        color:black;
    }

#footer {
    clear:both;
    height:10em;
    width:100%;
    bottom:0;
    background-color:#B82928;
    color:white;
}

p {
    margin: 0em 0em 0em 0em;
    text-align:justify;
    text-indent:1em;
}

这是小提琴：http://jsfiddle.net/z56S3/

Answer 2

我已经修改了一点代码。通常要使用相同高度的列div display:table display:table-cell属性。

html, body {
    background-color:#ffffff;
    margin:0 0 0 0;
    height:100%;
}

#container {
    width:100%;

}

#subcontainer {
display:table;

}

#sidebar {
    width:20%;
    background-color:#BD4538;
    color:white;
 display:table-cell;
}
    .logo {
        text-align:center;
        border-left:-8em;
        border-right:-8em;
    }

#pagecontainer {
    width:80%;
  display:table-cell;
    background-color:#FFFFFF;
  color:black;}

工作演示链接。 http://jsbin.com/mopunime/1/edit enter image description here

Answer 3

如果您想要的是DIV“侧边栏”适合（“subcontainer”）div（宽度或高度），那么请执行以下操作：

#sidebar {
    width:100%;
    height: 100%;
    float:left;
    background-color:#BD4538;
    color:white;
}

如何使DIV（SIDEBAR）扩展到滚动页面的末尾？

3 个答案: