我在Expression Web4中使用了两列模板--如何保持侧边栏的大小相等？

Question

我尝试了另一个人列出的解决方案，它有点和它一样，但因为内容部分根据我放在其中的内容而增长，它看起来很傻，侧栏保持较小的尺寸。

我对想法持开放态度，但我更愿意让栏目随着内容一起移动，比如上下浮动，或者...至少显示出同样的大小。

以下是我现在在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

定义height

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