Question

我遇到了一些问题，我测试的任何内容似乎都无法正常工作。

我的HTML：

<div id="parent">
    <div id="top_parent">Top_background
        <div id="top">Top_Picture</div></div>
    <div id="content">Here comes random stuff<div>
        </div>

        <div id="bottom">Footer</div>

CSS：

#top_parent {
    background:#f00;
    height:100px;
}

#top{
    background:#0f0;
    float:right;
    position:relative;   
    height:100px;
    width:50%;
}
#content{
    top:-50px;
    background:#00f;
    <!--   position:relative;-->
    height:100px;
    width:80%;
    margin:auto;
}
#parent{
    background:#000;
    height:350px;
    width:100%; 
}

#bottom {
    height: 50px;
    background:#ff0;
    bottom:0px;
    <!--position:absolute; -->
    <!--position:relative; -->
}

现在我的问题是，页脚不会进入parent div，它会停留在内容区域。我做错了什么？

jsF link：my source

感谢您的帮助。

Answer 1

你还没有关闭这个div：

<div id="content">Here comes random stuff<div>

应该是：

<div id="content">Here comes random stuff</div>

如果你缩进你的div，你可以很容易地看到这个：

<div id="parent">
  <div id="top_parent">Top_background
    <div id="top">Top_Picture</div>
  </div>
  <div id="content">Here comes random stuff<div> <!-- Can see the problem -->
</div>
<div id="bottom">Footer</div>

Answer 2

在发布代码时不确定是否复制粘贴或是否为拼写错误，但是这一行：

<div id="content">Here comes random stuff<div>

最后应该有一个结束</div>标记，而不是那个开放的<div>标记。如果这实际上是你的HTML，那么就不会按照你想要/期望的方式对div进行分组。

Answer 3

我认为你有一个错误的HTML：

<div id="parent">
    <div id="top_parent">Top_background
        <div id="top">Top_Picture</div></div>
    <div id="content">Here comes random stuff<div>
        </div>

        <div id="bottom">Footer</div>

您没有关闭div父级，也没有关闭内容

<div id="parent">
    <div id="top_parent">Top_background
        <div id="top">Top_Picture</div>
    </div>
    <div id="content">Here comes random stuff</div>
    <div id="bottom">Footer</div>
</div>

解释您希望“父”中的“底部”div，否则：

<div id="parent">
    <div id="top_parent">Top_background
        <div id="top">Top_Picture</div>
    </div>
    <div id="content">Here comes random stuff</div>
</div>    
<div id="bottom">Footer</div>

另外，在你的css中你应该为#content div启用position：relative，否则top参数将不起作用。如果这样可以解决问题，请尝试。

Answer 4

为了在内容div之后定位页脚，你必须首先浮动内容div，然后添加clear：两个css命令到页脚。所以你的树应该是这样的:::

<div class="wrapper"><div class="left"></div><div class="right"></div><br clear="all" /><div class="footer"></div>

对于此示例，您的css应如下:::

div.wrapper {    宽度：80％;
   位置：相对;
   保证金：0自动;
}

div.left {    浮动：左;
   宽度：60％;
   背景：绿色;
   高度：200像素; / 仅用于测试的高度，因此您可以看到结果 / }

div.right {    浮：右;
   宽度：30％;
   背景：红色;
   高度：200像素; / 仅用于测试的高度，因此您可以看到结果 / }

div.footer {    明确：两者;
   高度：40px; / 高度仅用于测试，因此您可以看到结果 /    背景：黄色;
   宽度：100％;
}

Answer 5

您是否尝试在#bottom规则中删除“bottom”属性？

div的HTML-CSS位置问题

5 个答案: