如何使正确的列（<div>）占据正确空间的其余部分？ （包括小提琴）</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的范围内，#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%;
}

请参阅此处的小提琴：http://jsfiddle.net/WnmLc/4/

编辑：

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

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

Answer 2

嗨我在小提琴上使用这个代码你也可以在那里试试

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