0

我页面上的页脚位于: http ://cinicraft.com/site2.0/index.html

应该在显示“内容”的主内容窗口下方,但我似乎无法让它位于显示“CiniCraft (c) 2013 All Rights Reserved”的页脚正上方

这是我的 HTML5 代码:

<body>
<div>

<div class="newsBtn">
<h2>News</h2>
</div>

<div class="instaCraftBtn">
<h2>InstaCraft</h2>
</div>

<div class="youTubeBtn">
<h2>YouTube</h2>
</div>

<div class="contactBtn">
<h2>Contact</h2>
</div>

<div class="contentWindow">
CONTENT
</div>

</div>

</body>

<footer>
<div class="dock">
CiniCraft (c) 2013 All Rights Reserved
</div>
</footer>

这是内容和页脚的 CSS 代码:

div.contentWindow
{
float:right;
text-align:center;
background-color: #000000;
width:900px;
height:900px;
padding:1px;
margin:5px;
}


div.dock
{

overflow-y: hidden;
position:relative;
left:-10px;
background-color: black;

padding:1px;
border:5px solid black;
margin-top: 120px;
}

我怎样才能让我的页脚直接停留在内容窗口的下方?谢谢

4

3 回答 3

2

您想要的称为粘性页脚。

这应该有助于:

http://ryanfait.com/sticky-footer/

还:

css-tricks 示例
清理粘滞页脚

于 2013-08-27T17:59:02.053 回答
1

clear:both页脚。

于 2013-08-27T18:02:45.640 回答
0

这是因为你有浮动元素。在您的 div 下方创建一个清晰的contentWindowdiv。

<div style="clear:both"></div>
于 2013-08-27T17:58:57.770 回答