html - ページ下部の余白

Question

下部に空白があります。私はそれをチェックしましたが、私の CSS には最小の高さが記載されていません。

以下のように、本体のcssの詳細にあると思われます。

    body {
        line-height: 1.5;
        font-size: 87.5%;
        word-wrap: break-word;
        margin-top: 0px;
        margin-left: 0px;
        margin-right: 0px;
        padding: 0;
        border: 0;
        outline: 0;
        background: none repeat scroll 0 0 #EFEFEF;
    }
    
    html, body, #page {
        height: 100%;
    }

score 12 · Accepted Answer

これにより、Safari での出血がなくなりました6.0.3。

#footer-wrapper {
    margin-top: 40px;
    background: url("../images/footer.png") repeat-x scroll 0 0;
    overflow: hidden;
}

内部のコンテンツに基づいて、そのオーバーフローを別の方法で処理したい場合があります。しかし、これで空白が修正されるはずです。

DOM のボトムアップからノードを削除するだけで解決しました。にある必要がありました#footer-wrapper。margin-bottom が機能せず、相対的な配置を使用していたため、その要素から影のスタイリングがにじみ出ていると考えました。

更新（より良い修正）

問題の本当の問題を見つけました。

.clearfix::after {
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

に変更content: ".";しcontent: "";て固定します。または、その場合は使用されていないように見えるため、そのスタイルをまったく削除します。

score 2 · Accepted Answer

"overflow: hidden"

物事を難しくしますが、試してみてください。

"overflow: auto"

必要なときに流れるように。

score 0 · Accepted Answer

この空白スペースを作成するのは、サードパーティのサービスによって作成された iframe/オブジェクトである場合があります。私の場合、Google Adwords と Google Analytics がこれを作成していました。したがって、次の CSS を追加して削除しました。

object[type="application/gas-events-cef"],
iframe[name="google_conversion_frame"] {
    display: none !important;
    height: 0 !important;
    width: 0 !important;
    line-height: 0 !important;
    font-size: 0 !important;
    margin-top: -13px;
    float: left;
}

ケースにいくつかのルールを追加する必要があるかもしれません。それが役立つことを願っています。

score 0 · Accepted Answer

0

margin-bottom: 0px;

これでうまくいきます.ところで..素敵なサイトの男:)

于 2013-04-21T17:39:06.687 に答える

html - ページ下部の余白

5 に答える 5

Related

Reference