使用CSS動態調整DIV的大小

我有一個動態調整側欄div高度以匹配內容div的問題。基於這裏的各種其他問題和谷歌搜索，我認爲沒有設置高度，它會使用父級div高度，但它似乎自動適合高度的內容，而不是。使用CSS動態調整DIV的大小

這可以在「baradineholdings.com.au」可以看出（請不要判斷網站，我是一個菜鳥，我更希望得到正常工作的基礎之前，我讓「漂亮」）。

主頁看起來很好，主要是因爲沒有內容。如果您前往關於頁面，您可以看到問題。我幾乎懷疑在主頁面的實例中，內容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，但即使在大約頁面中使用大量內容，它也會使它變小，因此它不會影響側邊欄... I已經在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去除背景色線。（我也必須添加一個float到#internal，並將其寬度更改爲auto以使其工作。）

Here it is in JSFiddle

來源

2012-02-03 00:36:31 ellawren

很好的鏈接。我也喜歡http://css-tricks.com/fluid-width-equal-height-columns/ – 2012-02-03 01:30:25

哈，這是一個很好的解決方法，我沒有想到這樣做！謝謝:) – FizzBuzz 2012-02-03 04:12:23

你想完成什麼？藍色邊欄與de內容區域中的te文字具有相同的高度？
如果是這樣，最簡單的方法是將一個藍色的背景圖像放在div上，它包含側邊欄和te內容div。

要做到這一點，你必須把< DIV的風格= 「明確：既」> </DIV>後您的< DIV CLASS = 「內容」> ... </DIV>
這樣，你的ID內部div將隨着de漂浮兒童元素的高度而增長。

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

之後，你可以添加一個重複的藍色圖像：

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

另一種方法是使用jquery/CSS黑客，但我懷疑它是值得的。

來源

2012-02-03 00:34:14 driedoezoe

使用CSS動態調整DIV的大小

回答

相關問題