0

現時点では、HTML レイアウトに取り組んでおり、結果が私が望むものではない理由がわかりません。赤い矢印がそこにあってはならないスペースを示している下の画像を参照してください。フッターの白い部分はブラウザーの下部にある必要があります。

あってはならないパディング/マージン

私はほとんどすべてを試しましたが、問題は次の HTML の css にあると思います:

<ul class="footer-trust">

これを HTML から削除すると、フッターがページの下部にあり、その上に約 50px ぶら下がっていません。HTML を jsfiddle に投稿しました。こちらのリンクを参照してください: http://jsfiddle.net/Cb4Jy/

数時間苦労していて、もう表示されないので、誰かが修正を知っていることを願っています!

4

3 に答える 3

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 に答える