如何使右侧的列（<div>）占据剩余的右侧空间？(包含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 可以占用其右侧的所有可用空间，而 footer 应该在 #right 的边界内，并且 #right 本身不应延伸到 #bottom 之外。 #content 可以是任何大小，当需要时应显示滚动条，#head 和 #footer 应固定在 #right 的顶部/底部。

很抱歉，我对 JavaScript 的了解比 CSS 更熟悉，所以我需要一些指导。

提前感谢！

- Arjan

---

你为什么要将 #bottom 的 position 设为 absolute 呢？是因为你想让 #bottom 的高度延伸到页面高度吗？ - Michelle

没错，整个布局应该是全屏的。 - Arjan

只是确认一下 - #left 必须是100像素吗？ - Michelle

我猜你在考虑按比例分配百分比？我宁愿避免使用这个选项，因为不同的纵横比可能会破坏布局。 - Arjan

好的 - 我已经更新了我的答案，针对一个固定宽度的 #left。 - Michelle

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设置为表格单元格来解决此问题。然后，您需要在外部div（表格）中包装#right，以便其中的内容可以显示为表行。#top必须移动到#bottom中，以避免溢出。 但是，我建议不要使用表格...它们已经过时，并且在某些浏览器中缺乏支持。

查看fiddle：http://jsfiddle.net/WnmLc/8/

- Michelle

---

我非常了解表格问题，但是你最后的例子最接近我所需要的，但是总大小似乎超出了页面范围，而且页眉/页脚中的百分比不是一个选项，但我猜想可以使用相同的表格技巧来解决这个问题。 - Arjan

@Arjan - 希望这次修改解决了所有问题！http://jsfiddle.net/WnmLc/8/ - Michelle

嘿，不错，这非常接近了，但是似乎在处理更大的内容时存在问题：http://jsfiddle.net/WnmLc/9/（我还将页眉/页脚设置为固定大小） - Arjan

哈哈，我自己用一个额外的div修复了它，我将你的建议标记为答案。这是最终结果：http://jsfiddle.net/WnmLc/10/ - Arjan

事实证明，这种方法存在一些问题，请参见我的答案以获取不使用表格的 CSS 版本。 - Arjan

Answer 2

嗨，我在 Fiddle 上使用了这段代码，你也可以在那里尝试一下。

    div
{
    border: 1px solid red;
}
#top
{
    height: 50px;
}
#bottom
{
    position: absolute;
    top: 50px;
    width:100%;
    bottom: 0;
}
#left
{
    float: left;
    height: 100%;
    width: 10%;
}
#right
{  
    float: left;
    width:89%;
    height: 100%;

}
#content
{
    height: 87%;    
    overflow: auto;
}
​

- sunitj

Answer 3

尽管Michelle建议的表格选项在fiddle中运行良好，但事实证明，在输入数据到#top部分时，存在一些严重的列跨度问题。

我成功地使用CSS而不是表格样式代码使其工作，您可以在此处找到示例： http://jsfiddle.net/WnmLc/11/ HTML:

<div id="top">top</div>
<div id="left">left</div>
<div id="head">head</div>
<div id="content">
    <div id="scroll">content</div>
</div>
<div id="footer">footer</div>

CSS：

div
{
    position: absolute;
    box-shadow: inset 0 0px 3px red;
}
#top
{
    left: 0;
    top: 0;
    right: 0;
    height: 50pt;
}
#left
{
    left: 0;
    top: 50pt;
    width: 100pt;
    bottom: 0;
}
#head, #footer
{
    height: 12pt;
}
#head
{
    top: 50pt;
    left: 100pt;
    right: 0;
}
#footer
{
    bottom: 0;
    left: 100pt;
    right: 0;
}
#content
{
    top: 62pt;
    left: 100pt;
    right: 0;
    bottom: 12pt;
}
#scroll
{
    width: 100%;
    height: 100%;
    overflow: auto;
}
​

- Arjan