CSSを100％伸ばしているdivがサイトコンテナとブラウザウィンドウを超えています

フッターを下にして100％高さのレイアウトを作成しようとしています。私は2つのコンテンツdivを持つサイトラッパーを持っています。 2番目のコンテンツdivには、一番下にフッターがあります。問題はトップのコンテンツ部門がウェブサイトのラッパーを超えて2番目のコンテンツ部門を押しているようだ。CSSを100％伸ばしているdivがサイトコンテナとブラウザウィンドウを超えています

これは私がを試しているコードです：

<style type="text/css"> 
html, body { height:100%;} 

#sitecontainer { 
    height:100%; 
    border: medium #000 solid; 
} 
#contentcontainerone{ 
    border: medium #F00 solid; 
} 
#contentcontainertwo{ 
    height:100%; 
    border: medium #00F solid; 
    position:relative; 
} 
#footer{ 
    position:absolute; 
    bottom:0; 
    width:100%; 
    text-align:center; 
} 
</style> 
</head> 

<body> 
<div id="sitecontainer"> 
    <div id="contentcontainerone"> 
    Some content <br /> 
    Some content <br /> 
    Some content <br /> 
    Some content <br /> 
    Some content <br /> 
    </div> 
    <div id="contentcontainertwo"> 
     <div id="footer">Footer</div> 
    </div> 
</div> 
</body>

このページへのリンクです：私は基本的に達成したい何http://www.smsidat.com/test/index.html

は、ウェブサイトは、常に100％の高さでなければならないことですブラウザウィンドウの下部に伸びるか、下部にフッターが表示されている場合は内容が終了します。理想的には、青い枠線を持つdivは、黒い枠線を持つラッパーの中にとどまり、ブラウザーウィンドウの下端またはコンテンツの終端よりも大きくならないようにしてください。

これを修正する方法はありがたいと思いますが、ありがとうございます。

出典

2010-11-27 SMSidat

-2

別のdivの最後にDIVを整列しようとするのは難しいことがあります。これを達成するためのhackish方法がありますが、私はテーブルを使用することをお勧めします。

<table> 
    <tr> 
     <td><div id="header"></div></td> 
    </tr> 
    <tr> 
     <td><div id="content"></div></td> 
    </tr> 
    <tr> 
     <td><div id="footer"></div></td> 
    </tr> 
</table>

、ヘッダとフッタのDIVは元の高さに滞在しながら、オーバーフローが発生するまで、コンテンツDIVページで延伸して、各DIVの高さを定義するためにCSSを使用します。ここで

出典

2010-11-27 11:49:16 bitxwise

この問題を解決するためにテーブルを使用すること自体がハックです。 – Rob

この問題を「修正」するためにテーブルを使用することを提案していませんでした。私はそれを代替アプローチとして提案していました。問題は、静的な高さがないため、DIVの高さを相対的に設定しようとすると難しいことです。各ブラウザはこれらの設定を別々に処理します。さらに、彼は2つのコンテンツDIVを持っていて、物事を複雑にするために、もしこれらのコンテンツDIVのうち1つが他のDIVを含んでいれば、いつまでも伸びたいのですか？ DIVの配置とCSSによる相対的な高さの割り当てでこれを行う簡単な方法はありません。 – bitxwise

SMSidatは、ページの拡張に伴って拡大/縮小する静的ヘッダー、フッター、およびコンテンツDIVを持つことを目標に達成する方法を尋ねました。テーブルを使用するのは簡単な方法です。率直に言えば、私の答えをマークして、それを実際にはちょうど代替のときに「ハック」と呼ぶと（上記の理由で）、DIV純粋主義者のようなものの最初の要求は却下されます... – bitxwise

ソリューション：

html, body 
{ 
    height: 100%; 
    overflow: hidden; 
} 

#sitecontainer 
{ 
    height: 100%; 
    position: relative; 
} 

#footer /*OUTSIDE THE CONTAINER */ 
{ 
    bottom: 0; 
    position: absolute; 
    height: 50px; /*change this*/ 
}

出典

2010-11-27 12:02:18

Thanks - このコードの問題は、コンテナ2オーバーフローのために切断されます：hidden – SMSidat

オーバーフローを変更：overflow：hiddenにオーバーレイされ、自動的にスクロールバーが表示されます。これがあなたが望むものでないなら、おそらく100％の高さはあなたの後ろではありませんが、あなたはそれをビューポートから流出させるべきですか？ :) – Bazzz

この回答は、ブラウザを越えるdivの部分を隠しています。 OPや他のほとんどの人は、ブラウザのビューポートを越えるのではなく、100％の高さがブラウザの境界を占めることを望んでいます。そこに解決策はありますか？ – Nav

<table>タグを使用するには、レイアウトにはお勧めできません確かです。 CSS3には、上記のようにこれを解決する多くの方法があります（容器とその親の高さをhtmlタグまで100％使用してください）。しかし、CSS display: table-cellのスタイル属性がレイアウトに適している場合（少なくともEric Meyer、Smashing CSS book）、レイアウトコントロールをCSSとコンテンツのベストプラクティスに戻す場合があります。

出典

2013-01-15 15:56:57

CSSを100％伸ばしているdivがサイトコンテナとブラウザウィンドウを超えています

答えて

関連する問題