2012-03-30 6 views
4

さて、まずはIE7に戻ってサポートしていますので、ボックスサイズが外です。javascriptなしで半液体レイアウトを行う方法を教えてください、私は何かが簡単でないと感じています

私は固定サイズのヘッダーとフッター(それぞれ80pxと言う)をウィンドウの上部と下部に配置しています。

divは、ウィンドウのサイズに関係なく、すべてのスペースを占有します。 JavaScriptを使って簡単に楽しめますが、CSSだけでそれを行う方法はありますか?

答えて

1

http://jsfiddle.net/ZLrPF/。 IE7はもう少し余分な愛が必要です。

編集:

これは要求されるように動作するIE7 +ソリューションです。

html { 
    height: 100%; 
} 
body { 
    margin: 0; 
    width: 100%; 
    height: 100%; 
    display: table; 
} 
#header-wrapper, #content-wrapper, #footer-wrapper { 
    display: table-row; 
} 
#header, #content, #footer { 
    display: table-cell; 
} 
#header, #footer { 
    height: 80px; 
    background-color: orange; 
} 
#content { 
    background-color: green; 
} 

<body> 
    <div id="header-wrapper"> 
     <div id="header">header</div> 
    </div> 

    <div id="content-wrapper"> 
     <div id="content">content</div> 
    </div> 

    <div id="footer-wrapper"> 
     <div id="footer">footer</div> 
    </div> 
</body> 
+0

+1、およびjsfiddleにheadsupに感謝。 –

+0

ありがとうございました。歓迎です:)しかし、ウィンドウを埋めるのに十分ではないにしても、コンテンツ部分がページの残りを埋めるという要件であることを忘れてしまったと思います。私の例は、ウィンドウの高さに達するとコンテンツは塗りつぶされ、正しくプッシュされます。これは実際にはかなり深刻な問題であり、私はそれを修正するために何かを考え出し、この記事を更新します。身体の最小高さを使用することでかなり効果を上げることができますが、これがどのようにして完全に柔軟に行われるのか不思議です。表示:テーブル行が使用されていることを既に確認できます。 – mystrdat

+0

通常の要素の表動作を利用し、要求されたほど柔軟なIE7 +ソリューションで更新されました。 – mystrdat

関連する問題