javascript - 下部のdivを修正します。（javascriptを使用せずに）

Question

私の問題を説明するために、次のコードを実行しました。

質問は。

div "Footer"は、常に画面の下部に接着する必要があります（下部：0）。
ただし、div "content"がスクロールバーを作成するところまで成長した場合、div"footer"はdiv"content"のすぐ下にある必要があります。

互いに重ならないようにしてください。

例でわかるように、画面が小さすぎる場合、「＃footer」は「#content」をオーバーライドします。これは起こりえません！

ありがとう！

</ p>

score 1 · Accepted Answer

.container {
    position: relative;
}
.container .glued_bottom {
    position: absolute;
    bottom: 0;
    height: 20px;
}

score 1 · Accepted Answer

あなたのフィドルごとに私が理解していることから、あなたがやりたいことはcssだけでは不可能です。そうは言っても、あなたが望むと思うことをするために使用できるjqueryの1行を思いついた：

$('#spacer').height($("#footer > div").height());

デモ

jquery 以外のコード:

document.getElementById('spacer').style.height = document.getElementById('footer-inner').offsetHeight + "px";

デモ

ただし、どちらのスニペットでも、HTML 構造を少し変更する必要があります。spacerどちらも、 div の下からコンテンツを押し上げる div を追加しfooterます。ただし、2 番目のスニペットでは、フッターの内部 div にも ID を指定する必要があります。

score 0 · Accepted Answer

このスティッキーフッターチュートリアル経由。次のコードだけで、スティッキーフッターを作成できます。

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
    height: 142px; /* .push must be the same height as .footer */
}

/*

Sticky Footer by Ryan Fait
http://ryanfait.com/

*/

あなたの場合、html と body の 100% の高さを除いて、上記の CSS のほとんどすべてが欠けていました。あなたのjsfiddleを更新しました。

ライブデモ

score 0 · Accepted Answer

フッターのレイアウトに取り組むいくつかの方法

パーセンテージの高さを使用すると、場合によっては機能します

html, body { height:100%;}
#header {height:10%; }
#content { height:80%; }
#footer { height:10%;}

あなたのサイトのコンテンツには合わないかもしれませんが、css のみのオプションとして一見の価値があります。

もう 1 つは、背景の CSS 要素を使用することです。ページの色をフッターの色にします (緑としましょう)。

ヘッダーとコンテンツ要素を、たとえば目的のために白に設定します

body { background-color:green; }
#header { background-color:white; }
#content { background-color:white; }

...おそらく遊ぶための非Javascriptのアイデアのカップル

はい、固定または絶対配置は、監視を続けて再配置の変更を行うための Javascript を追加しなくてもオーバーラップを引き起こします。

希望は少し役立ちます

score -1 · Accepted Answer

position:fixed;下と左が設定されている要素でCSSを使用します。例えば：

#footer {
position: fixed;
bottom: 0px;
left: 0px;
}

javascript - 下部のdivを修正します。（javascriptを使用せずに）

5 に答える 5

Related

Reference