BinaryDevelop
  1. ホーム
  2. html

[解決済み] フッターの内容が重なっているのを修正するには？

2022-02-10 04:18:13

質問

同じような問題をここや他の場所で探し回ったのですが、決定的な答えが見つからないようです。フッターに届くくらいのテキストをページに追加すると、フッターが単にテキストに重なってしまいます。ブラウザのウィンドウサイズを小さくして、フッターとコンテンツを入れているコンテナを強制的に会わせた場合も同じです。この現象は、薄い灰色の部分であるコンテナが、常に100%の高さを占めているはずなのに、何らかの理由で縮小してしまうこともあります。

こんな感じで、徹夜続きなので、考えがまとまりません。しかし、私はプロのデザイナーではないので、何が問題なのかがわからないのです。

以下は、私のコードと、ページの関連部分をすべて使って作成したJSFiddleです。 

html, body {
    margin: 0;
    padding: 0;
}
html, body {
    background: #252525;
    font-family: Arial, Helvetica, sans-serif;
    height: 100%;
    text-align: center;
}
body {
    background: #363636;
    border-left: 1px solid #111;
    border-right: 1px solid #111;
    margin: 0 22.5%;
}
#container {
    color: white;
    margin-bottom: 2em;
    min-height: 100%;
    overflow: auto;
    padding: 0 2em;
    text-align: justify;
}
#footer {
    bottom: 0;
    color: #707070;
    height: 2em;
    left: 0;
    position: fixed;
    font-size: small;
    width:100%;
}

<body>
    <div id="container">
         <h1>A webpage</h1>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pretium augue quis augue ornare tempor. Donec eu purus vitae nisi eleifend euismod. Nullam sem nunc, bibendum tempor iaculis eu, consequat in sem. Phasellus nec molestie orci. Fusce varius nisi est, non aliquet dolor porttitor non. Aliquam eu ante nec massa pulvinar posuere. Praesent consectetur porttitor ipsum, eget viverra urna ultricies et.
            <p>Quisque vehicula neque a enim dignissim, et vestibulum orci viverra. Pellentesque aliquam feugiat interdum. Ut molestie vitae lacus in eleifend. Sed scelerisque urna ut elit venenatis suscipit. Nullam nec urna vel enim mattis interdum ut consequat libero. Proin in imperdiet orci. Vivamus felis lacus, dictum ac eros eu, malesuada pretium nisi. Cras suscipit nunc magna, a egestas neque facilisis sed.</div>
    <div id="footer">This is a footer.</div>
</body>

以下は JSFiddleの例 .

解決方法は？

これを変更します。 

#footer {
    bottom: 0;
    color: #707070;
    height: 2em;
    left: 0;
    position: relative; //changed to relative from fixed also works if position is not there
    font-size: small;
    width:100%;
}

デモ

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します