3

我遇到了一个我还无法解决的问题。如果您查看以下内容：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更流利，所以我可以在这里使用一些指针:)

提前致谢！

4

3 回答 3

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/

于 2012-12-24T09:51:19.513 回答
0

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

    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;
}
​
于 2012-12-24T10:09:00.197 回答
0

尽管 Michelle 建议的 table 选项在小提琴中运行良好，但事实证明，当在#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;
}
​
于 2012-12-24T12:33:19.613 回答