web-dev-qa-db-ja.com

divが全高を拡張するため

Divを完全な高さに拡張するために使用できる方法はありますか？スティッキーフッターもあります。

Webページは次のとおりです。Website removed。私が話している真ん中のビットは、CSS値を持つ白いdiv、midcontentです。

.midcontent{
     width:85%;
     margin:0 auto;
     padding:10px 20px;
     padding-top:0;
     background-color:#FFF;
     overflow:hidden;
     min-height:100%;
     max-width:968px; 
     height:100%;
}

はい、明らかにheight:100%は機能しませんでした。さらに、すべての親コンテナには高さが設定されています。

一般的な構造は次のとおりです

<body>
    <div id="wrap">
        <div id="main">
            <div class="headout">
                <div class="headimg"></div>
            </div>
            <div class="midcontainer"></div>
        </div>
    </div>
    <div id="footer">
        <div class="footer"></div>
    </div>
cssxhtmlhtml
64
bear

CSSでhtmlタグとbodyタグの高さを設定したことを覚えていますか？これは通常、DIVを完全な高さに拡張する方法です。


<html>
  <head>
    <style type="text/css">

      html,body { height: 100%; margin: 0px; padding: 0px; }
      #full { background: #0f0; height: 100% }

    </style>
  </head>
  <body>
    <div id="full">
    </div>
  </body>
</html>
127
Tom

これはいくつかの助けになるかもしれません： http://www.webmasterworld.com/forum83/200.htm

関連する引用：

これを達成するためのほとんどの試みは、プロパティと値を割り当てることによって行われました：div {height：100％}-これだけでは機能しません。理由は、親定義の高さがない場合、div {height：100％;}は100％を因数分解するものがなく、デフォルトのdiv {height：auto;}の値になります-autoは「必要に応じて値これは実際のコンテンツによって管理されているため、div {height：100％}はコンテンツが要求する範囲でのみ拡張されます。

この問題の解決策は、親コンテナ（この場合はbody要素）に高さの値を割り当てることで見つかります。身長100％を含むように体格を書くと、必要な価値が得られます。

html, body { 
  margin:0; 
  padding:0; 
  height:100%; 
}
37
Brian Clapper

高さを100％に設定しても機能しない場合は、divでmin-height = 100％を試してください。まだhtmlタグを設定する必要があります。

html {
    height: 100%;
    margin: 0px;
    padding: 0px;
    position: relative;
}

#fullHeight{

    width: 450px;
    **min-height: 100%;**
    background-color: blue;

}
0
Dimitris Kremezis