如何使正确的列 (<div>) 占用正确空间的其余部分？(包括小提琴)

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之外#内容可以是任何大小，并且应该在需要时显示滚动条，#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%;
}

请在此处查看小提琴：http://jsfiddle.net/WnmLc/4/

编辑：

如果要为#left设置手动宽度，可以通过将#bottom设置为表，并同时设置#left和#right表单元格来解决此问题。然后，您需要将#right封装在外部div(表(中，以便内部内容可以显示为表行。为了避免溢出，必须将#top移到#bottom中。然而，我建议不要使用表格。。。它们已经过时，并且在某些浏览器中缺乏支持。

参见小提琴：http://jsfiddle.net/WnmLc/8/

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;
}
​

Answer 3

尽管Michelle建议的表选项在实践中效果良好，但事实证明，在#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;
}
​