Question

好的，我有一个ID为“评论”的DIV和另一个ID为“post”的DIV。评论和帖子都在另一个名为“内容”的div中。内容相对定位而评论和帖子绝对定位，我可以轻松定位帖子，但我无法定位评论。问题是评论的静态位置由于某种原因位于“内容”的最顶端，而不是在post div之下。另一个问题是我无法正确放置页脚。要清楚，这是代码：http://jsfiddle.net/BWr93/

CSS：

   #header {
    width:100%;
    height:80px;
    background:#444;
    position:absolute;
    top:0%;
    left:0%;
    right:0%;
}
#logo {
    width:280px;
    height:200px;
    background:url(Logo.png);
    background-repeat:no-repeat;
    position:absolute;
    left:2%;
    top:-50px;
}
.button {
    width: 130px;
    height: 80px;
    position: absolute;
    top: 0%;
    font-family:Poiret One;
    line-height:80px;
    font-size:24px;
    color:#fff;
    -webkit-transition: all 150ms ease-in-out   ;
    -moz-transition: all 150ms ease-in-out;
    -ms-transition: all 150ms ease-in-out;
    -o-transition: all 150ms ease-in-out;
    transition: all 150ms ease-in-out;
}
.button:hover {
    -webkit-transition:all 200ms ease-in-out
    ;-moz-transition:all 200ms ease-in-out;
    -ms-transition:all 200ms ease-in-out;
    -o-transition:all 200ms ease-in-out;
    transition:all 200ms ease-in-out;
    cursor:pointer;
    background: #333;
}
#container {
    top:80px;
    position:relative;
    width:100%;
    padding-bottom:110px;
    min-height:100%;
}
#post {
    width:80%;
    min-height:300px;
    position:absolute;
    top:6%;
    left:3%;
    font-size:20px;
    font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
    background-color:#CCC;
    -webkit-box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    0px 0px 5px 0px rgba(50, 50, 50, 0.75);
    box-shadow:         0px 0px 5px 0px rgba(50, 50, 50, 0.75);
}
#post .title {
    width:100%;
    min-height:70px;
    background:#444;
    top:0;
    left:0;
    right:0;
    font-family:Poiret One;
    line-height:70px;
    font-size:34px;
    color:#fff;
    padding-top:5px;
    padding-bottom:5px;
    -webkit-box-shadow: 0px 0px 0px 0px rgba(50, 50, 50, 0);
    -moz-box-shadow:    0px 0px 0px 0px rgba(50, 50, 50, 0);
    box-shadow:         0px 0px 0px 0px rgba(50, 50, 50, 0);

}
#post .title .date {
    width:8%;
    height:60px;
    background-color:#FFF;
    float:left;
}
#comment{
    position:absolute;
    bottom:10%;
    left:3%;
    background:#444;
    width:80%;
    height:50px;
    line-height:50px;
}
#footer {
    position:absolute;
    bottom:0;
    right:0;
    left:0;
    width:100%;
    height:60px;
    background:#444;
    line-height:60px;
    font-family:Poiret One;
    font-size:20px;
    color:#FFF;
       }

HTML：

<body>
<!--START HEADER-->
<div id="header">
<div id="logo"></div>
<div class="button" style="left:350px"><center>Home</center></div>
<div class="button" style="left:500px;"><center>For Geeks</center></div>
<div class="button" style="left:650px;"><center>Deep Stuff</center></div>
<div class="button" style="right:50px;"><center>About me</center></div>
</div>
<!--END HEADER-->
<div id="container">

<div id="post">
<div class="title"><div class="date"></div>
<div style="position:relative;left:8px;">
HeyHey Hey Hey Hey Hey Hey Hey Hey Hey Hey HeyHey Hey Hey Hey Hey Hey Hey Hey Hey Hey HeyHey Hey Hey Hey Hey Hey Hey Hey Hey Hey</div>
</div>
<div style="position:relative;left:8px;">
HeyHey Hey Hey Hey Hey Hey Hey Hey Hey HeyHeyHey Hey Hey Hey Hey Hey Hey Hey Hey HeyHeyHey Hey Hey Hey Hey Hey Hey Hey Hey HeyHeyHey Hey Hey Hey Hey Hey Hey Hey Hey HeyHeyHey Hey Hey Hey Hey Hey Hey Hey Hey HeyHeyHey Hey Hey Hey Hey Hey Hey Hey Hey HeyHeyHey Hey Hey Hey Hey Hey Hey Hey Hey HeyHey Hey Hey Hey HeyHeyHey Hey Hey Hey Hey Hey Hey Hey Hey HeyHeyHey Hey Hey Hey Hey Hey Hey Hey Hey HeyHeyHey Hey Hey Hey Hey Hey Hey Hey Hey HeyHey Hey Hey Hey HeyHeyHey Hey Hey Hey Hey Hey Hey Hey Hey HeyHeyHey Hey Hey Hey Hey Hey Hey Hey Hey HeyHeyHey Hey Hey Hey Hey Hey Hey Hey Hey HeyHey Hey Hey Hey HeyHeyHey Hey Hey Hey Hey Hey Hey Hey Hey HeyHeyHey Hey Hey Hey Hey Hey Hey Hey Hey HeyHeyHey Hey Hey Hey Hey Hey Hey Hey Hey HeyHey Hey Hey Hey HeyHeyHey Hey Hey Hey Hey Hey Hey Hey Hey HeyHeyHey Hey Hey Hey Hey Hey Hey Hey Hey HeyHeyHey Hey Hey Hey Hey Hey Hey Hey Hey HeyHey Hey Hey Hey HeyHeyHey Hey Hey Hey Hey Hey Hey Hey Hey HeyHeyHey Hey Hey Hey Hey Hey Hey Hey Hey HeyHeyHey Hey Hey Hey Hey Hey Hey Hey Hey HeyHey Hey Hey Hey HeyHeyHey Hey Hey Hey Hey Hey Hey Hey Hey HeyHeyHey Hey Hey Hey Hey Hey Hey Hey Hey HeyHeyHey Hey Hey Hey Hey Hey Hey Hey Hey HeyHey Hey Hey Hey HeyHeyHey Hey Hey Hey Hey Hey Hey Hey Hey HeyHeyHey Hey Hey Hey Hey Hey Hey Hey Hey HeyHeyHey Hey Hey Hey Hey Hey Hey Hey Hey HeyHey Hey Hey Hey HeyHeyHey Hey Hey Hey Hey Hey Hey Hey Hey HeyHeyHey Hey Hey Hey Hey Hey Hey Hey Hey HeyHeyHey Hey Hey Hey Hey Hey Hey Hey Hey HeyHey Hey Hey Hey HeyHeyHey Hey Hey Hey Hey Hey Hey Hey Hey HeyHeyHey Hey Hey Hey Hey Hey Hey Hey Hey HeyHeyHey Hey Hey Hey Hey Hey Hey Hey Hey HeyHey Hey Hey Hey HeyHeyHey Hey Hey Hey Hey Hey Hey Hey Hey 
</div>
</div>
<div id="comment">Comments</div>
<!--FOOTER-->
<div id="footer"><center>All rights reserved Maroworld.com&reg;</center></div>
<!--END FOOTER-->
</div>
</body>

当你看到它时，你会理解所有内容，无论页面内容如何扩展以及评论div在帖子div之下，我只想在底部显示页脚。

提前致谢。

Answer 1

嗯，问题是这一行：

    <div class="title"><div class="date"></div>

您遗漏了</div>的{{1}}代码如果您添加this fiddle，就像THIS一样，您会发现很多问题都已解决。

至于获得一个粘性页脚，{{3}}是一个很好的起点。您可以看到当前实现将页脚相对于浏览器窗口放置。

Answer 2

http://jsfiddle.net/YeUB2/2/我将title和comment定位为亲戚。这解决了所有问题。除此之外，我已经删除了日期的盒子阴影，因为它没有任何效果。填充也得到了改进，评论现在也有了影子。

如何正确定位这个DIV？

2 个答案: