Question

我尝试了清楚：两者和身体的位置都是相对的，但由于某些原因它仍然总是在包装内显示出来，任何帮助都会非常感激

这是jsfiddle上的代码：

这是我正在处理的代码：

<center>
  <img src="images/eshop.jpg" width="800px" height="120px"/>
</center>
<div id="menu">
  <ul class="navigation">
    <li>
      <a href="#" >
        HOME
      </a>
    </li>
    <li>
      <a href="#">
        HOT ITEMS
      </a>
    </li>
    <li>
      <a href="#">
        SELL TO US
      </a>
    </li>
    <li>
      <a href="#">
        ABOUT US
      </a>
    </li>
    <li>
      <a href="#">
        CONTACT
      </a>
    </li>
  </ul>
</div>
<div id="wrap">
  <center>
    <div class="box">
      <h3>
        Neutrogena Body Wash
      </h3>
      <p float="left">
        <img src="images/item1.jpg" width="50%" height="200px" alt="item1"/>
      </p>
      <h4>
        3$
      </h4>
    </div>
    <div class="box">
      <h3>
        Summer Boots
      </h3>
      <p float="left">
        <img src="images/item2.png" width="50%" height="200px" alt="item2"/>
      </p>
      <h4>
        5$
      </h4>
    </div>
    <div class="box">
      <h3>
        Samsung Galaxy S4
      </h3>
      <p float="left">
        <img src="images/item3.jpg" width="50%" height="200px" alt="item3"/>
      </p>
      <h4>
        500$
      </h4>
    </div>
    <div class="box">
      <h3>
        Liquid Perfume
      </h3>
      <p float="left">
        <img src="images/item4.gif" width="50%" height="200px" alt="item4"/>
      </p>
      <h4>
        10$
      </h4>
    </div>
    <div class="box">
      <h3>
        ASUS Laptop i3
      </h3>
      <p float="left">
        <img src="images/item5.png" width="50%" height="200px" alt="item5"/>
      </p>
      <h4>
        400$
      </h4>
    </div>
    <div class="box">
      <h3>
        Sony PS2 VGA
      </h3>
      <p float="left">
        <img src="images/item6.jpg" width="50%" height="200px" alt="item6"/>
      </p>
      <h4>
        7$
      </h4>
    </div>
    <div class="box">
      <h3>
        8GB Memory Card
      </h3>
      <p float="left">
        <img src="images/item7.jpg" width="50%" height="200px" alt="item7"/>
      </p>
      <h4>
        12$
      </h4>
    </div>
    <div class="box">
      <h3>
        2GB DDR3 RAM
      </h3>
      <p float="left">
        <img src="images/item8.jpg" width="50%" height="200px" alt="item8"/>
      </p>
      <h4>
        20$
      </h4>
    </div>
    <div class="box">
      <h3>
        50" LED TV
      </h3>
      <p float="left">
        <img src="images/item9.jpg" width="50%" height="200px" alt="item9"/>
      </p>
      <h4>
        999$
      </h4>
    </div>
    <div class="box2">
      <a href="#">
        <h4>
          Next Page
        </h4>
      </a>
    </div>
  </center>
</div>

<div id="footer">
    test
</div>

CSS：

#wrap{
    width:90%;
    margin:0 auto;
    margin-top: 5em;
}
.box{
    float:left;
    width:30%;
    height:300px;
    margin:0 auto;
}   
.box2{
    float:right;
    width:30%;  
    margin:0 auto;
}
#footer {
    width:100%;
    height:80px;
    position:absolute;
    bottom:0;
    left:0;
    background:#ee5;
    clear: both;
}

Answer 1

您不需要使用position:absolute。正如@JimmyRare指出的那样，绝对定位是相对于窗口定位的。因此，只需删除绝对定位，您的页脚将被放回正常的文档流程中。

JSFIDDLE PROOF HERE

Answer 2

您的页脚相对于窗口是绝对定位的，不在您的包装内。尝试将窗口放大，您会看到页脚将保持在底部这种类型的定位在滚动时不会重新定位，这可能是您认为它在包装内呈现的原因。

也许这更像是你在寻找什么？只需删除绝对定位，然后将其放在所有内容之后。

#footer {
    width:100%;
    height:80px;
    background:#ee5;
    clear: both;
}

Fiddle

Answer 3

尝试使用css中的页脚

#footer {
width:100%;
height:80px;
position:absolute;
top:250%;
left:0;
background:#ee5;
clear: both;

}

您可能需要稍微调整％

包装内出现的html页脚？

3 个答案: