Question

我正在开发一个内部网页，该页面有一个在线教程推荐的包装DIV。在包装器内部有：header，mainnav，content，sidenav和footer。内容和sidenav是两个并排的DIV。侧栏包含通常更改的菜单。我的问题是我想让内容DIV与sidenav具有相同的高度。

这是我的两个DIV的CSS

#content {
    width: 75%;
    float: left;
    padding-top: 5px;
    height: 100%;
}
#sidenav {
    width: 25%;
    float: right;
}

这是包装器的CSS

#wrapper {
    background-color: #FFFFFF;
    width: 100%;
    min-width: 740px;
    max-width: 1000px;
    margin-right: auto;
    margin-left: auto;
    -webkit-box-shadow: 0px 1px 20px #999999;
    box-shadow: 0px 1px 20px #999999;
}

Answer 1

如果您没有具有已定义高度的父级，则高度100％不起作用。我不知道为什么你想要相同的高度？如果是背景颜色，只需将其添加到包装中并覆盖侧边栏即可。将来你可能想要签出一个框架来克服这样的问题。 bootstrap是一个很好的开始。

https://jsfiddle.net/dtz8cmnt/1/

.column {
    float: left;
    width: 33%;
}
.menu {
    background:red;
}
.content {
    background:blue;
}
.clear {
    clear: both;
    width: 100%;
}

在小提琴中你会找到一个使用clear的例子。请注意，列的高度不同。

Answer 2

为他们两人提供以下属性：

height:100%;

如果给它一个特定的高度，它们应该填充包装div的整个高度。我还建议在它们之后添加另一个div，然后将其设置为如下，以防止它们越过它：

width: 100%;
clear: both;

两个并排的DIV标签具有相同的高度

2 个答案: