Question

我有类似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＆gt; div'占用#foo上设置的300px高度？我想将'.footer'固定在'#foo＆gt;的底部。 div'也是。 '.main'应该填充空间的剩余部分，即使它是空的，并且当它的内容需要时可以滚动。

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

Answer 1

您的CSS引用了ID，但您的div有类，而不是ID。另外，你有一个拼写错误= class =“fotter”

Answer 2

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

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

您的评论中有待解释。

Answer 3

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

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

.main {min-height: 240px;}

这是一个小提琴，看看它是否是您正在寻找的：http://jsfiddle.net/Jzq2Q/

祝你好运。

如何在绝对定位元素内设置相对定位元素的高度？

3 个答案: