CSSを使用してDIVを動的にサイズ変更する

コンテンツのdivに合わせてサイドバーdivの高さを動的に変更する際に問題があります。ここやGoogle検索の他のさまざまな質問に基づいて、私は高さが設定されていなければ、親のdivの高さを使用すると思っていましたが、代わりに高さをコンテンツに自動的に合わせるようです。CSSを使用してDIVを動的にサイズ変更する

これは "baradineholdings.com.au"（サイトを判断しないでください、私は1つのノブです。私はそれをかなり美しくする前に、基本的に正しく働いています）。

主にコンテンツがないため、ホームページが正常に表示されます。 aboutページに進むと、問題が表示されます。私は、メインページのインスタンスでは、コンテンツdivがサイドバーdivの高さを取っていると思われますが、理由はわかりません。

HTML;

<body> 
    <div id="wrapper"> 
     <?php include('includes/header.php'); ?> 
     <div id="internal"> 
      <div id="sidebar"> 
       <h3>Navigation</h3> 
        <li><a href="index.php">Home</a></li> 
        <li><a href="about.php">About</a></li> 
        <li><a href="gallery.php">Gallery</a></li> 
        <li><a href="contact.php">Contact</a></li> 
      </div> <!-- end #sidebar --> 
      <div id="content"> 
       <p>Images Coming Soon!</p> 
       <p>Please see the about page for more information.</p> 
      </div> <!-- end #content --> 
     </div> <!-- end #internal --> 
     <?php include('includes/footer.php'); ?> 
    </div> <!-- end #wrapper --> 
</body>

CSS。

body { 
background-color: #f1f1f1; 
font-family: georgia,sans-serif; 
color: #333; 
margin: 0; 
padding: 0; 
} 

#wrapper { 
width: 960px; 
background-color: #f1f1f1; 
margin: 0 auto; 
border-left: 1px solid #ccc; 
border-right: 1px solid #ccc; 
} 

#internal 
{ 
width: 959px; 
height: auto; 
background-color: #f1f1f1; 
margin: 0 auto; 
border-right: 1px solid #ccc; 
} 

#content { 
width: 675px; 
height: auto; 
float: left; 
padding: 10px; 
} 

#sidebar { 
width: 150px; 
/* height: 410px; */ 
float: left; 
background-color: #27408B; 
color: white; 
} 

#sidebar a { 
text-decoration: none; 
color: white; 
} 

#sidebar li { 
list-style: none; 
}

私が言ったように、新入り。だから私はおそらくここでは何かばかなことをやっている... 私はjsfiddleを試してみたが、約ページのコンテンツを大量に使用しても、小さなレンダリング、サイドバーには影響しません... 私ChromeとIEでテスト済みですが、どちらも同じ問題があります。

出典

2012-02-03 FizzBuzz

これは、既存のコードで簡単に修正できます。基本的な方法はここに概説されています：CSS Equal Height Columns。

基本的には、サイドバーの色をラッパーdivに追加することで偽装します（あなたの場合は＃内部を使用できます）。このdivは実際にメインコンテンツを含んでいるため、必要に応じて展開されます。サイドバーのように見えるようにするには、メインコンテンツにあなたの体に合った背景色を与えます。実際のサイドバーdivには背景はなく、テキストを保持します。それは本当に意味をなすためにのためにあなたは、この動作を確認する必要があるかもしれませんが、ここでCSSの関連ビットは、以下のとおりです。

#internal { 
    background-color: #27408B; /* the color you want for the sidebar */ 
} 

#content { 
    background-color: #f1f1f1; /* matches the body background */ 
}

そして#sidebarから背景色の行を削除します。（#internalに浮動小数点を追加し、その幅をautoに変更して動作させる必要もありました。）

Here it is in JSFiddle

出典

2012-02-03 00:36:31 ellawren

いいリンク。私も好きですhttp://css-tricks.com/fluid-width-equal-height-columns/ –

ハァッ、それは素晴らしい回避策です、私はそれをやっているとは思わなかった！ありがとう:) – FizzBuzz

達成したいのは何ですか？コンテンツエリアのテキストと同じ高さを持つ青いサイドバー？
もしそうなら、最も簡単な方法は、サイドバーとteコンテンツdivを含むdivに青い背景イメージを置くことです。

それを行うには、<のdivのスタイルを配置する必要があります= "クリア：両方"> </div>のご<のdivクラス= "コンテンツ"> ... </div>の
この方法で、あなたのIDの後に内部divは浮動小数点要素の高さに伴って増加します。

#internal { 
background: url(blue.png) top left repeat-y; 
}

代替はjqueryの/ CSSハックを使用することですが、私はそれは努力の価値が疑問：

<div class="sidebar">...< /div><br /> 
<div class="content">...< /div><br /> 
< div style="clear:both">...< /div><br />

は、その後、あなたは繰り返し青色の画像を追加することができます。

出典

2012-02-03 00:34:14 driedoezoe

CSSを使用してDIVを動的にサイズ変更する

答えて

関連する問題