Question

目前我正在制作HTML布局，无法理解为什么结果不是我想要的。请参见下图，红色箭头显示不应存在的空间。页脚的白色部分应位于浏览器的底部。

padding/margin which shouldn't be there

我几乎尝试了所有内容，我认为问题在于使用以下HTML的CSS：

<ul class="footer-trust">

如果我从HTML中移除此页面，而不是页脚底部的页脚，而不是悬挂在其上方约50px。我在jsfiddle上发布了HTML，请参阅此处的链接：http://jsfiddle.net/Cb4Jy/

我希望有人知道这个问题，因为我正在努力工作几个小时而且再也看不到了！

Answer 1

更改以下属性：

#service-footer { height: 261px; }
#subfooter { top: 0; }

在这里小提琴：http://jsfiddle.net/Cb4Jy/7/

Answer 2

这是因为页脚下方有填充或边距。

如果要删除它，请转到“开发人员工具”并查找应用于它的任何边距。

或者您可以使用位置并始终使用bottom: 0和position: absolute对齐底部。

Answer 3

您的标记和技术有点过头了，这反过来导致这些类型的问题更难以调试。

我已经清理了你的代码，删除了不必要的嵌套div，并使用CSS技术替换了简单的效果（阴影）。这是一种更清洁，适应性更强的方法。

http://jsfiddle.net/Cb4Jy/10/

为了实现粘性页脚，我使用了此页面上列出的方法：http://ryanfait.com/resources/footer-stick-to-bottom-of-page/

<强> HTML：

<body>
    <div id="wrapper">    
        <div id="top">Candy canes croissant gingerbread jelly beans.</div>
        <div id="container">
            <div class="content">Unerdwear.com chocolate cake dragée cotton candy cheesecake marzipan gummies marzipan. Unerdwear.com tiramisu danish topping marshmallow bear claw macaroon jujubes. Chocolate cake applicake carrot cake croissant muffin soufflé croissant cake apple pie. Gingerbread powder jelly soufflé. Lemon drops sweet roll lollipop caramels caramels. Soufflé wafer jelly beans macaroon carrot cake gummi bears macaroon. Tootsie roll soufflé biscuit toffee fruitcake. Gingerbread macaroon oat cake fruitcake chocolate bar applicake icing chocolate cake. Cookie icing chocolate bar oat cake cupcake candy. Gummi bears cake oat cake soufflé liquorice dragée sweet liquorice. Candy lollipop icing. Apple pie sesame snaps lollipop. Bear claw bear claw oat cake muffin lemon drops sweet danish. Marshmallow gummies halvah cheesecake jelly-o gummi bears dragée. Candy canes croissant gingerbread jelly beans. Pastry bear claw gingerbread fruitcake. Icing brownie tiramisu. Macaroon carrot cake ice cream biscuit sugar plum muffin. Chocolate pastry cheesecake. Croissant cotton candy sweet unerdwear.com chocolate bar. Tootsie roll cookie topping caramels applicake danish tootsie roll. Biscuit macaroon candy soufflé cotton candy caramels. Carrot cake pudding toffee cotton candy jelly. Liquorice marzipan toffee bonbon sugar plum. Cupcake gummi bears cake powder topping cake dessert jelly. Wafer wafer jujubes icing donut bear claw sesame snaps oat cake candy canes. Oat cake cotton candy jelly beans. Cotton candy topping jujubes cookie gummi bears. Gummi bears tootsie roll cheesecake candy jelly-o sugar plum. Cake biscuit lollipop icing ice cream tootsie roll carrot cake cookie pie. Brownie dragée wafer macaroon cotton candy topping cupcake. Biscuit dragée dragée cookie. Tart chocolate candy jelly jujubes cheesecake cupcake cheesecake chocolate. Gummies cheesecake tart pie jelly danish. Tiramisu cotton candy lemon drops tart muffin candy tootsie roll candy canes carrot cake. Marshmallow jelly-o gingerbread. Lollipop tootsie roll wafer sugar plum sesame snaps marzipan powder chocolate cake. Cake chocolate bonbon. Dragée donut caramels. Sweet chocolate bar sweet roll halvah sweet.</div>
        </div><!-- end #container -->            
        <footer id="footer" class="content">
            <ul class="footer-trust">
                <li><a href="#" class="trust-link trust-1"></a>

                </li>
                <li><a href="#" class="trust-link trust-2"></a>

                </li>
                <li><a href="#" class="trust-link trust-3"></a>

                </li>
                <li><a href="#" class="trust-link trust-4"></a>

                </li>
            </ul>
            <div class="footer-agreement">
                <p>Marshmallow jelly-o gingerbread. Lollipop tootsie roll wafer sugar plum sesame snaps marzipan powder chocolate cake</p> <address>Copyright &copy; Carrot cake pudding toffee cotton candy jelly. </address>
            </div>
        </footer>
    </div><!-- end #wrapper -->
</body>

CSS：

html, body, #wrapper {
    height: 100%;
}

body {
    margin: 0px;
    padding: 0px;
    background-color: #f3f3f3;
    height: 100%;
    font-family:Arial, Geneva, Helvetica, sans-serif;
    font-size: 12px;
}

p {
    margin:0px;
}

.content {
    background: #FFF;
    padding: 15px;
    -webkit-box-shadow: 0px 0px 20px rgba(50, 50, 50, 0.6);
    -moz-box-shadow:    0px 0px 20px rgba(50, 50, 50, 0.6);
    box-shadow:         0px 0px 20px rgba(50, 50, 50, 0.6);
}

#wrapper {
    padding: 0 30px;
    width: 1000px;
}

#container {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -50px;
}

#container:after {
    display: block;
    height: 50px;
    content: "";
    width: 100%;
}

#container .content { margin: 50px 0 20px; }

#footer {
    display: block;
    height: 50px;
    margin: 0 auto;
}

#top {
    position: fixed;
    top: 0px;
    width: 100%;
    height: 30px;
    background-color: white;
    z-index: 1;
    box-shadow: 0px 0px 15px 0px gray;
}

ul.footer-trust {
    list-style: none;
    margin: 0px;
    padding: 0px;
}
.footer-agreement {
    text-align: right;
    font-size: 10px;
}
ul.footer-trust li {
    float: left;
    padding-right: 23px;
}
.trust-link {
    background: url('https://dl.dropboxusercontent.com/u/60346690/footer-logos.png') no-repeat;
    display: block;
}
.trust-1 {
    width: 74px;
    height: 23px;
    background-position: 0 0;
}
.trust-2 {
    width: 25px;
    height: 23px;
    background-position: -75px 0;
}
.trust-3{
    width: 52px;
    height: 23px;
    background-position: -101px 0;
}
.trust-4{
    width: 21px;
    height: 23px;
    background-position: -154px 0;
}

CSS布局页脚不在浏览器底部

3 个答案: