CSSでdivの高さを自動的に調整する

divsが6つあるとしましょう。CSSでdivの高さを自動的に調整する

第1、第2、第3のdivは固定された高さを持ちます。 25px、100px、25px 4番目のdivはコンテンツ領域で、自動調整divである必要があります。 5th divにはコンテンツがあり、最小高さは100pxです（高さは固定されていません）。 6番目のdivは固定高さのフッターです。 25ピクセル。

5番目と6番目のdivは、第四のDIV（div_auto_height）は、コンテンツをたくさん持っていると、ページが同じように長い以上であるときは問題はありません

（スティッキーNOT）ページの下部に常にする必要があります画面よりも

問題は、ページが画面よりも短く、6番目のdivの後に空白がある場合に発生します。その後、5位と6位はどこにいるのか分からない。

This is the normal case

1が自動的に空きスペースを埋めるように調整第四のDIV（div_auto_height）の高さを得ることができれば、問題は解決されるだろう。

This is what we need to have

私はまともな解決策なしで多くの方法でこの問題を解決しようとしています。

に動作していないソリューションは：MIN-高さが小さいかワイドスクリーン用非常に長いページをせずに大画面でを動作しないように

は、異なる画面解像度があります。
それはdiv要素5と6は、ここでは第四のDIV（div_auto_height）

の一番上に来るようになりますので、私はきちんと上部と下部位置のプロパティが動作を取得することができていないが、あなたの修正のためのテンプレートです。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head><title>No title</title> 
<style type="text/css"> 

html { 
    height: 100%; 
} 

body { 
    height: 100%; 
    margin: 0; 
} 

#div1 { 
    height: 25px; 
    background-color: #123456; 
} 

#div2 { 
    height: 100px; 
    background-color: #345678; 
} 

#div3 { 
    height: 25px; 
    background-color: #567890; 
} 

#div_auto_height { 
    height: auto ; 
    background-color: #789012; 
} 

#div5 { 
    min-height: 100px; 
    background-color: #9; 
} 

#div6 { 
    height: 25px; 
    background-color: #123456; 
} 

</style> 
</head> 
<body> 
    <div id="div1">Div 1</div> 
    <div id="div2">Div 2</div> 
    <div id="div3">Div 3</div> 
    <div id="div_auto_height">This div should adjust automatically</div> 
    <div id="div5">Div 5</div> 
    <div id="div6">Div 6</div> 
</body> 
</html> 
</body> 
</html>

出典

2012-01-09 Johnny

**引用**：_ "... 6つのdivを他の1" _。それは一体何の意味ですか？たぶんあなたはあなたがしたいことの写真を提供することができます。 – Sparky

なぜdiv_auto_heightにmi-heightを指定できないのですか？あなたの質問が十分にはっきりしていないことがわかりまし – Sandeep

私はテーブルの問題を解決するために、できるだけ普遍的なものになるようにしています... – Johnny

「全画面の高さ - いくつかの固定ピクセル」という値をプロパティに与えるCSS方法はありません。 Javascriptを使用してください。

出典

2012-01-10 08:06:23

これは私が純粋なCSSソリューションがないことを恐れていたことです... – Johnny

または、 'display：table'などを使って、全体の高さを100％にします。しかし、6行すべてが同じ量の余分な垂直パディングを得るでしょう。 –

この問題を解決するにはjavascriptを使用する必要があります。そこにjqueryのような使いやすいJavaScriptフレームワークがたくさんあります。あなたは何をすべき

：

は、あなたのdivにIDを与えます。これらのIDを使用して
あなたのdivを見つける - 第四以外の - とその高さ
が窓
の高さを得る計算は、あなたの他のdivの高さ

これだけです。コードが必要な場合は教えてください。

編集：コードは見つかりませんでしたが、私はjquery dimensionsを使用したことを覚えています。そこにサンプルコードがあります！

出典

2012-01-10 08:12:58

これは確かに問題を解決します。また、テーブルを使用して簡単に解決できます。私は、そのことを行うための純粋なCSSソリューションがあるかどうか疑問に思っていました。 JavaScriptコードが既にファイルに含まれている場合は、このファイルを入手することに非常に感謝しています。すでにありがとう！ – Johnny

これはあなたのための最も有効な解決策ではないかもしれませんが、あなたは5番目と6番目のdivのためmax-heightを知っていれば、あなたはあなたの結果を達成するためにposition: absoluteとpadding（max-height値に設定）を使用することができます：

<div id="wrapper"> 
    <div class="div-25"></div> 
    <div class="div-100"></div> 
    <div class="div-25"></div> 
    <div id="content"> 
     <div class="fluid"> 

     </div> 
    </div> 
</div> 
<div id="container"> 
    <div class="footer"> 
     <div class="div-25"></div> 
    </div> 
</div>

CSS：

html, body { 
    margin: 0; 
    height: 100%; } 
div { width: 100%; } 
#wrapper { min-height: 100%; } 
.div-25 { 
    background: green; 
    height: 25px; } 
.div-100 { 
    background: grey; 
    height: 50px; } 
#content { padding: 0 0 150px; } /* Max Height */ 
.fluid { 
    background: red; 
    height: 100px; } 
#container { position: relative; } 
.footer { 
    background: blue; 
    position: absolute; 
    bottom: 100%; 
    min-height: 100px; }

プレビュー：http://jsfiddle.net/Wexcode/jzdDU/

出典

2012-01-10 17:36:47 Wex

ねえ！これは私のために働くかもしれない...ありがとう。 – Johnny

あなたの問題を解決したと感じる場合は、この回答を受け入れてください:) – Wex

それは近いですがまだかなりありません... 5番目のdivのコンテンツがいくつかの高さを取得する場合、このソリューションはかなり壊れやすいです。 – Johnny

変更

#div_auto_height { 
    height: auto ; 
    background-color: #789012; 
}

へ

#div_auto_height { 
    height: 100% ; 
    background-color: #789012; 
}

または多分あなたはこれを必要とする：

#div_auto_height { 
    height: calc(100% - 275px); ; 
    background-color: #789012; 
}

出典

2014-05-30 02:12:54 crazyjune

CSSでdivの高さを自動的に調整する

答えて

関連する問題