CSSのDIVと100％の高さでの奇妙な動作

私は...

<div class="divStretch" />

...単独で...それは、マスターページを持っているのVisual Studio 2010での非常に基本的なページ...

<body> 
    <form id="form1" runat="server"> 
     <div> 
      <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server" /> 
     </div> 
    </form> 
</body>

を持っていますコンテンツ。

CSSは次のとおりです。

body, form, html 
{ 
    background-color: Black; 
    height: 100%; 
} 

body 
{ 
    margin: auto; 
} 

.divStretch 
{ 
    background-color: Red; 
    height: 100%; 
}

は今のContentPlaceHolder周り<div>タグで、ページ全体は黒です。つまり、コンテンツdivは表示されません。 <div>タグがないと、どこでも赤色になり、コンテンツdivの高さはウィンドウの高さの約2倍になり、垂直スクロールバーが表示されます。

私が望むのは、コンテンツのdivがウィンドウを完全に埋めることです。

出典

2011-06-21 S. Valmont

どのブラウザが、あなたはDOCTYPEを使用していますか？ –

IE9とChrome 12. <！DOCTYPE html PUBLIC " - // W3C // DTD XHTML 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> –

おそらく、あなたのサイトのマークアップがどういうものなのか分かりませんが、あなたが持っている問題を再現することはできません。 http://jsfiddle.net/jzuNg/ – Wex

私はここに新しいので、私はあなたの質問にコメントを追加することは許されていません - それについて申し訳ありません！私はあなたの質問に答えることに最善を尽くし、いくつかのことを仮定します。前提条件が間違っていれば、私は答えを編集します。

「コンテンツディビジョン」によって最後に言及すると、フォーム内にあるdivを参照していると仮定しています。あなたがそれを参照しているウィンドウを正確に埋めるようにすると

：私は、次のCSSを使用しました http://jsfiddle.net/trev/3xuzZ/

：（この例では幅を埋めるしたい場合は、単に幅を追加：100％）の高さに私は何を作ってみた

 
body { 
    margin: 0px; 
    padding: 0px; 
    background: black; 
} 

.contentDiv { 
    position: fixed; 
    top: 0px; 
    bottom: 0px; 
    background: red; 
}

また、次のHTML：

<body> 
<form> 
    <div class="contentDiv"> 
     <input type="text" /> <br /> 
     <input type="text" /> <br /> 
     <input type="text" /> <br /> 
     <input type="text" /> <br /> 
     <input type="submit" value="Button!" /> 
    </div> 
</form> 
</body>

これはブラウザのウィンドウ全体を占めていますが、これはページにある可能性のある他の要素を網羅しています。

出典

2011-06-21 03:32:25

JSFIDDLEは素晴らしいツールです。あなたのCSSは正しい方向に私を指摘しました。 –

1つのナグル。 positionは固定されているため、このdivはマスターページの親divの外側に浮動します。私が親のdivにマージンを適用する場合、私はウェブサイトを一貫させるためにcontentDivのCSSでこれを繰り返さなければなりません。固定位置なしで同じ動作を達成する方法はありますか？ –

ここでは相対的な絶対的な位置付けについて考えています。あなたのサイトがどのように配置されているのかわからないが、おそらく親divを「相対位置」にして、位置を「固定」から「絶対」に変更してみてください。編集：サイトにはスクロールバーがありますか？あるいは、それは単一のページ（例えばgroovesharkのようなもの）上でそれを意味します。 –

CSSのDIVと100％の高さでの奇妙な動作

答えて

関連する問題