は、私は次のようになります。ここで、ここでレイアウトを作成しようとしています親

の下にdivのスティックを行います。ここで私はcontent sectionがheaderとfooter間の完全なスペースを取るしたいthe fiddle は、私は次のようになります。ここで、ここでレイアウトを作成しようとしています親

<body> 
    <div class="wrapper"> 
     <div class="header"> 
      Header 
     </div> 
     <div class="content"> 
      This is the content section 
     </div> 
     <div class="stream-content"> 
       This is the stream content. 
     </div> 
     <div class="push"> 
     </div> 
    </div> 
    <div class="footer"> 
    </div> 
<body>

ですセクション。 [stream-content]と呼ばれる追加のセクションがあり、そこにあれば（ホームページにしか存在しません）、footerの直前の位置を取らなければなりません。その場合、contentセクションは、headerとstream-contentセクションの間のスペースをすべて占有する必要があります。私は絶対的な位置付けで同じことを試みましたが、すべての要素がうまくいきませんでしたので、これを行う正しい方法を理解したいと思っていました。すべての助けを前もってありがとう！

出典

2013-12-09 user1240679

あなたのdivの高さをいつでもパーセントで設定することができます。ヘッダー5％、ボディ90％、フッター5％。もしパーセンテージがぶつかるのかどうかはわかりませんが、うまくいくはずです。 –

[これは役立つかもしれません]（http://jsfiddle.net/peteng/9DLeg/） - 内容とストリームの内容を真ん中の部分に入れて – Pete

position:relativeをラッパークラスに追加してください。 position:absolute;bottom:0;をストリームコンテンツクラスに追加します。

ここで確認してください。 Fiddle

出典

2013-12-09 15:57:34

お返事ありがとうございます。しかし、私は、「コンテンツ」セクションに多くの問題を追加すると、私が粘着性があると思った赤いフッターも下がっていることに気付きました。私はここでCSSのトリックを見て、その粘り強いフッターを作ったhttp://css-tricks.com/snippets/css/sticky-footer/しかし、それは今働いているようです。私がここで逃した何かがありますか？いくつかの助けを得ることは素晴らしいだろう。 – user1240679

ブラウザの下部またはラッパーの底に貼り付けたいのですか？ –

これはラッパーとは関係ありません。 'fixed 'の位置は、要素の親ではなく、画面のビューポートからの相対位置です。 –

私が正しく理解していれば、ラッパーはフッターを底に置いているので、[スチームコンテンツ]をラッパーの外に置くことです。ラッパーの内側に[スチームコンテンツ]がなければならない場合は、http://ryanfait.com/sticky-footer/をフッタと一緒に底に置いておいてください

出典

2013-12-09 15:49:21 user3034378

リンクが壊れました。私はアーカイブされたバージョンを見つけようとしますが、robots.txtはインデックスを作成できません。 – carefulnow1

は、私は次のようになります。ここで、ここでレイアウトを作成しようとしています親

答えて

関連する問題