1

ページの下部に常に表示されるフッターをページに追加する方法を探しています。問題は、ページ上のコンテンツの多くが を介して設定されてposition: absolute;いるため、現時点では、フッターに手動でmargin-top: 900px;値を指定しない限り、絶対配置コンテンツの 1 つによって単純に隠されていることです。ただし、コンテンツが 900px 未満の一部のページでは、ページの最後とフッターの間の下部に不要なギャップがあります。

コンテンツの最後とフッターの間に隙間がないようにするにはどうすればよいですか?

4

6 に答える 6

1

インデックスもつけられます。Z インデックス: 1;

http://www.fiveminuteargument.com/fixed-position-z-index

あなたの場合、フッターの css に z-index を 10 以上に設定します。

于 2013-01-15T21:53:46.923 に答える
1

新しいjqueryでは、これを使用できます：

<div data-role="footer" data-position="fixed">
<h1>Fixed Footer!</h1>
</div>

http://jquerymobile.com/demos/1.2.0/docs/toolbars/bars-fixed.htmlから

于 2013-01-15T21:14:03.047 に答える
1

フッターの前にあるすべてのものを、相対的な位置で div に配置します。この div は、その中のコンテンツに対して垂直方向に曲がり、そのすぐ下にあるものを保持するためのバッファーを提供します。マージンは必要ありません。

于 2013-01-15T21:15:23.333 に答える
0

いじくり回した後、絶対配置がドキュメントフローから要素を削除することを思い出しました。絶対配置された要素に依存して、他の要素に影響を与えることはできません。コンテンツの高さがわからないため、margin-top を使用することは明らかにオプションではありません。

だから私はこれを思いつきました：基本的にフロートで通常のレイアウトを行い、次に相対位置を使用してアイテムを必要な場所に移動します。このように、要素は引き続きドキュメント フローに影響を与えますが、位置を完全に制御できるようになりました。これがまさに相対配置の目的です。要素の位置を完全に制御したいが、要素がレイアウトに通常どおり影響するようにしたい場合。

<html>

<head>

<style>

body {
    text-align:center;
}
#container {
    position:relative;
    margin:0 auto;
    width: 1000px;
    text-align:left;
}
#header {
    position:relative;
    top:0px;
    left:0px;
    width:1000px;
    height: 100px;
    border:solid 1px #000;
}
#sidebar {
    position:relative;
    top:10px;
    left:0px;
    width:300px;
    height: 500px; /* for demo */
    float:left;
    margin-bottom: 20px;
    border:solid 1px #000;
}
#main {
    position:relative;
    top:10px;
    left:310px;
    width:690px;
    height: 200px; /* for demo */
    margin-bottom:20px;
    border:solid 1px #000;
}
#footer {
    margin:0 auto;
    top:20px;
    width: 1000px;
    text-align:left;
    height: 100px;
    clear:both;
    border:solid 1px #000;
}
</style>
</head>
<body>

<div id="container"> <!-- Holds all the content except the footer -->

<div id="header">Header content here</div>
<div id="sidebar">Sidebar content here</div>
<div id="main">Main content here</div>

</div>

<div id="footer">Footer content here</div>

</body>

</html>
于 2013-01-20T20:23:20.397 に答える
0

と<footer>でスタイルされた を想定してみましょう。display: blockheight: 250px

したがって、あなたが望むものを達成するためにあなたがしなければならないことは、追加することだけです:

position: fixed;
top: 100%;
margin-top: -250px;

それでおしまい。下部に永久に配置されます。:)

于 2013-01-15T21:14:24.833 に答える
0

スティッキー フッター。JavaScript は必要ありません:

http://www.cssstickyfooter.com/

于 2013-01-15T21:15:26.400 に答える