css - 如何让右列 () 占据剩余的右侧空间？ (包括 fiddle )

Question

我遇到了一个我无法解决的问题。如果您查看以下内容:http://jsfiddle.net/WnmLc/2/

<div id="top">top</div>
<div id="bottom">
    <div id="left">left</div>
    <div id="right">
        <div id="head">head</div>
        <div id="content">content</div>
        <div id="footer">footer</div>
    </div>
</div>​

这是我到目前为止得到的:

#top
{
    height: 50px;
}
#bottom
{
    position: absolute;
    top: 50px;
    bottom: 0;
}
#left
{
    float: left;
    height: 100%;
    width: 100px;
}
#right
{  
    float: left;
    height: 100%;
}
#content
{
    height: 100%;
    overflow: auto;
}
​

我希望#right 将所有可用空间都放在它的右边，并且页脚在#right 的范围内，它本身不应超出#bottom。 #content 可以是任何大小，并且应该只在需要时显示一个滚动条，#head 和#footer 应该在一个固定的位置，即。 #right 的顶部/底部。

恐怕我在 javascript 方面比在 css 方面更流利，所以我可以在这里使用一些指针:)

提前致谢!

Answer 1

您可以调整#left 和#right 的百分比。只要它们加起来等于 100%，这就可以工作。#head、#content 和 #footer 也是如此。我假设您希望内容更大，所以我为您将其设置为 80%。

#bottom {
width: 100%;
}

#left {
width: 20%;
}

#right {
width: 80%; 
}

#head, #footer {
height: 10%;
}

#content {
height: 80%;
}

在这里查看 fiddle :http://jsfiddle.net/WnmLc/4/

编辑:

如果你想为 #left 设置手动宽度，你可以通过使 #bottom 成为表格来解决这个问题，同时 #left 和 #right 表格单元格。然后需要将#right包裹在一个外层的div(表格)中，这样里面的内容就可以显示为表格行了。 #top 必须移到 #bottom 中以避免溢出。但是，我建议不要使用表格......它们已经过时并且在某些浏览器中缺乏支持。

参见 fiddle :http://jsfiddle.net/WnmLc/8/