CSS：コンテンツ領域の高さは100％です

これは私を夢中にしています...私はhttp://one29090testvdscom.accounts.combell.net/nlにページを構築しています。ヘッダー、左メニュー、コンテンツ、フッターを持つページです。幅は水平に中央に960ピクセルで固定されます。これはすべて動作します。しかし、コンテンツにテキストがほとんどない場合は、灰色のコンテンツ領域に常に利用可能な画面の高さが必要なので、フッターがページの下に来るようにしてください。CSS：コンテンツ領域の高さは100％です

ページには、次のようになります。

<body> 

    <!-- Centered container that contains site --> 
    <div id="centeredcontainer">    
     <!-- Area with header --> 
     <div id="header">     
      header here        
     </div>    
     <!-- Area that contains main menu on the left and content on the right --> 
     <div id="mainmenuandcontent"> 
      <!-- Main menu on the left --> 
      <div id="mainmenu"> 
       main menu here     
      </div> 
      <!-- Content on the right --> 
      <div id="content"> 
       body here 
      </div>     
      <!-- Clears the floats so that next elements can use margins normally --> 
      <div class="clearer"></div> 
      <!-- Red line under content --> 
      <div id="RedLineUnderContent"></div> 
     </div>       
     <!-- Area with languages --> 
     <div id="languages"> 
      footer here   
     </div>      
    </div>    
</body>

、関連CSSは次のとおりです。

body 
{ 
    font-size: 12px; 
    font-family:Century Gothic,Helvetica,Verdana,Arial,sans-serif; 
    line-height:1.5em;  
    margin: 0; 
    padding: 0; 
    background-color: Black; 
} 

#centeredcontainer 
{ 
    width: 960px;  
    margin-left: auto ; 
    margin-right: auto ; 
} 

#header 
{ 
    margin-bottom: 20px; 
    margin-top:20px; 
} 

#mainmenuandcontent 
{ 
    width: 960px; 
    clear: both;  
    position: relative;  
} 

#mainmenu 
{   
    float: left; 
    width:180px; 
    padding:10px; 
} 

#content 
{ 
    float: left; 
    background-color: #403F3F;   
    width: 760px; 
    min-height: 400px; 
    color:White; 
} 

#RedLineUnderContent 
{ 
    height: 20px; 
    background: #A10C10; 
    margin-left: 200px; 
} 

#languages 
{   
    margin-top: 10px; 
    margin-left: 200px; 
    margin-bottom:20px; 
    text-transform:uppercase; 
} 

.clearer 
{ 
    clear:both; 
}

出典

2011-07-28 L-Four

私は同じ問題を抱えていましたが、解決策を決めることはできませんでした。どんな理由であれ、CSSの 'height：100％;'は決して私のために働いたことはありません。私は今はJavaScriptについて十分に分かっていませんが、それを使ってユーザーの画面解像度を検出し、高さをおおよそのピクセル数に設定する必要があります。あなたが適切な解決策を見つけたら教えてください。 – Edwin

私は1つを見つけたと思う、私の答えを見る... –

私は、CSSだけでこれを行うためのクロスブラウザの方法はわかりません。

は、私はちょうどかかわらず、JSを使用して、この最後の夜に似た何かをした：

<head> 
    .... 
    <script type="text/javascript"> 
     function resize() { 
      var frame = document.getElementById("main"); 
      var windowheight = window.innerHeight; 
      document.body.style.height = windowheight + "px"; 
      frame.style.height = windowheight - 180 + "px"; 
     } 
    </script> 
</head> 
<body onload="resize()" onresize="resize()"> 
...

これはidを持つ要素のサイズを変更します「メイン」ウィンドウ以下180ピクセル（180isの目に見える高さにの高さであります私のヘッダー）

出典

2011-07-28 20:01:44 Derrick

ありがとう、私はもう一度純粋なCSSのソリューションを試してみますが、それが動作しない場合、私は（jqueryもちろん使用して） –

コンテンツは、ウィンドウよりも大きい場合はどうしますか？？ –

こんにちは、あなたの提案は私にjqueryの方法に行くよう促しました。それは私がそれを行う方法を見つけたようです... –

はおそらく、あなたはthis page, which achieves a 100% height layoutに似たCSSを使用することができますか？

出典

2011-07-28 19:54:16 Nightfirecat

はい私はこれを試したが、色;この例のレイアウトとは若干異なります： - この例では、コンテンツを含むdivはコンテンツ自体のサイズを持ち、最小の高さはありません。 –

ええ、ちょうどそれを試してみて、 '＃mainmenuandcontent' divを展開する運がなかった。 – Nightfirecat

-1

容器に高さ：100％を置く？

Updated 2016：パーセンテージまたはピクセルの代わりにビューポート相対単位を使用します。 width: 100wv; height: 100wh;。単位はブラウザのウィンドウサイズの割合を表し、親要素のサイズは無視されます。

出典

2011-07-28 19:54:33 hdor

'height：100％;'何らかの理由でCSSで動作しません。実際には、 'height：（ある数値）％;'はCSSでは決して動作しません。 – Edwin

はうまくいきません... –

Safari 5.1とFirefoxではこれがうまくいきます。 – hdor

コンテナの最小高さを100％に設定できますが、親コンテナも最小高さ100％に設定する必要があります。そうしないと動作しません。近代的でないブラウザーでは、本体とhtmlタグを高さ100％（最小高さではなく！）に設定する必要があることがあります。

出典

2011-07-28 20:14:37

しかし、これは解決策の一部にすぎません... –

jqueryを使用した回避策が見つかりました。私は、マスターページに次のスクリプトを追加しました：

<script type="text/javascript"> 
     var contentHeight; 
     $(document).ready(function() { 
      contentHeight = $('#content').height(); 
      Resize(); 
      $(window).resize(function() { 
       Resize(); 
      }); 
     });      
     function Resize() { 
      currentWindowHeight = $(document).height();         
      if (contentHeight < currentWindowHeight - 160) { 
       $('#content').css('height', (currentWindowHeight - 160) + "px"); 
      }        
     } 
    </script>

だから、各ページのロード後に、それがコンテンツ領域の元の高さの高さを取得します。次に、ウィンドウの高さに応じてサイズを変更するので、コンテンツの高さがウィンドウの高さよりも小さい場合は、ウィンドウの高さ（ヘッダーとフッターの高さを引いたもの）を取るようにサイズが変更されます。ブラウザウィンドウのサイズを変更すると、ブラウザウィンドウはまったく同じになります（現在のコンテンツの高さではなく、現在の高さを使用します）。もちろん

誰もが明るいアイデアを思い付く場合は、それを共有するので、私は、CSSのソリューションを好むだろう:)

出典

2011-07-29 10:08:04

あなたはこのためにJavaScriptを必要としません。 my answer for a related question, "Set div to remaining height using CSS with unknown height divs above and below"をご覧ください。利用可能な領域を満たすためにコンテンツが展開されます。

出典

2012-09-03 05:11:50

CSS：コンテンツ領域の高さは100％です

答えて

関連する問題