0

目前我正在处理 HTML 布局，但不知道为什么结果不是我想要的。请参阅下图，其中红色箭头显示不应该存在的空间。页脚的白色部分应位于浏览器的底部。

不应该存在的填充/边距

我几乎尝试了所有方法，我认为问题出在以下 HTML 的 css 上：

<ul class="footer-trust">

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

我希望有人知道解决方法，因为我已经为此苦苦挣扎了几个小时，只是再也看不到它了！

4

3 回答 3

1

更改以下属性：

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

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

于 2013-10-16T15:14:58.983 回答
0

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

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

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

于 2013-10-16T15:05:31.330 回答
0

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

我已经清理了您的代码，删除了不必要的嵌套 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;
}
于 2013-10-16T15:34:21.073 回答