使用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的大小

回答

相关问题