0

我有这样的jsfiddle

<div id="foo">
  <div>
    <div class="header"></div>
    <div class="main"></div>
    <div class="footer"></div>
  </div>
</div>


 #foo {
   position: absolute;
   min-height: 300px;
   width: 400px;
 }

 #foo > div {
   position:relative;
 }

 .header, .footer {
   min-height: 30px;
 }

如何让“#foo > div”占据#foo 上设置的 300px 高度？我也想将 '.footer' 固定在 '#foo > div' 的底部。'.main' 应该填充剩余的空间，即使它是空的，并且当它的内容需要它时变成可滚动的。

我已经为此苦苦挣扎了几个小时，所以现在是时候问大师了。任何有关小提琴的帮助将不胜感激。谢谢！

4

3 回答 3

1

您的 CSS 引用了 ID，但您的 div 有类，而不是 ID。另外，您在 class="fotter" 中有错字

于 2013-06-07T19:11:12.327 回答
1

你可能正在寻找这样的东西：

http://jsfiddle.net/audetwebdesign/V2gdj/4/

使用以下 CSS；

div {
    border: 1px solid gray;    
}

#foo {
    position: absolute;
    height: 300px;
    width: 400px;
}

#foo > div {
    position: relative;
    height: inherit;
}

.header, .footer {
    height: 30px;
}
.main {
    position: absolute;
    top: 30px;
    bottom: 30px;
    left: 0;
    right: 0;
    outline: 1px solid blue;
    overflow: auto;
}
.footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

等待您的评论的解释。

于 2013-06-07T19:42:14.087 回答
0

首先，你有一些错误需要整理。在您的 HTML 中您称它为fotter，但在 CSS 中它是footer。其次，在 HTML 中，您有分配了类的 div，但在 CSS 中，您选择了 ID。换一个到另一个，你就走在了正确的轨道上。

要使页脚粘在底部，您可以在 CSS 中尝试：

.main {min-height: 240px;}

这是一个小提琴，看看它是否是你要找的东西：http: //jsfiddle.net/Jzq2Q/

祝你好运。

于 2013-06-07T19:42:48.333 回答