Question

我有多个div，其中大多数都是浮动的。如果我在页面上放置一个绝对位置和底部0px，则页脚将跳到页面的中间位置并位于内容的顶部。这是我的HTML：

<div class="main-content">
    <div class="product-boxes">
        <div class="box-left">
            <h3>Corporate Apparel</h3>
        </div>
        <div class="box-middle">
            <h3>Tradeshow</h3>
        </div>
        <div class="box-right">
            <h3>Desk &amp; Office</h3>
        </div>
    </div>
    <div class="category-links">
        <ul>
            <li></li>
            <ul>
    </div>
    <div class="product">
        <div class="featured-item"></div>
    </div>
    <div class="order-summary">
        <p>list of cart items</p>
    </div>
</div>
<div class="footer"> </div>

这是我的CSS：

    .main-content {
         width: 85%;
         margin: 0 px auto;
     }
    .main-content: after {
         content: '';
         display: block;
         clear: both;
     }
     .footer {
         background: #cdced0;
         height: 112 px;
         padding: 25 px 0 px 25 px 0 px;
         width: 100% ;
         font-family: Arial, 'Helvetica Neue', Helvetica, sans - serif;
         clear: left;
     }

Answer 1

您可以尝试在div之后添加一个空的<div class="clear"></div>，并为其提供以下属性和值.clear { clear:both; }。此外，您可以尝试添加一些其他规则，以确保它跨越整个页面.clear { clear:both; width:100%; float:left; }

页脚底部没有停留在页面底部

1 个答案: