html - 我在 Expression Web 4 中使用 2 列模板 - 如何保持边栏大小相等？

Question

我尝试了另一个人列出的解决方案，结果差不多，但是因为内容部分的增长取决于我放入的内容，所以它看起来很愚蠢，边栏保持较小的尺寸。

我对想法持开放态度，但我更希望栏目随内容移动，例如上下 float ，或者...至少显示相同的大小...

以下是我现在在 CSS 中的内容:

@import url("layout.css");
 body {
    font-family:"Georgia", "Times New Roman", Times, serif;
    font-size: 0.8em;
    background-color: #764;
    background-image: url("../images/background.gif");
    background-repeat: repeat;
    background-attachment: scroll;
}
#container {
    width: 700px;
    margin: 10px auto;
}
#masthead {
    text-align: center;
    width: 698px;
    border: 1px solid #431;
    background-color: #fff;
    background-image:;
    background-attachment: scroll;
}
#navigation {
    position: absolute;
    float: left;
    width: 148px;
    height: 100%;
    margin-top: 10px;
    margin-bottom: 10px;
    border: 1px solid #431;
    background-color: #fff;
}
#content {
    overflow: hidden;
    float: right;
    width: 518px;
    margin:auto;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 10px;
    padding: 10px;
    border: 1px solid #431;
    background-color: #fff;
}
#footer {
    text-align: center;
    clear: both;
    width: 698px;
    padding: 0px;
    border: 1px solid #431;
    background-color: #fff;
}

网页可见http://www.crucifiedwithchrist.org .

谢谢，约翰

Answer 1

定义高度

#navigation {
position: relative;
float: left;
width: 148px;
margin-top: 10px;
margin-bottom: 10px;
border: 1px solid #431;
background-color: #fff;
height: 730px;
}