自动扩展侧列

问题描述：

我正在构建一个网页，它有一个名为content的div标签，它具有min-height：200px的CSS属性;我想放入另一个高度为100％的div标签，但是，这不起作用。我希望它自动增长，以便内容变大时看起来不错。但我不确定如何做到这一点。自动扩展侧列

任何帮助表示赞赏，但我希望它是XHTML严格和CSS3兼容。

试图做这样的事情： Something like this

- 他们灰色的边栏，就是我想做的事，它是在涂料中添加，其余的我已经和CSS3完成。

也试过，身高：继承，没有成功。 –

答

我理解这个问题有高度：100％这是我将如何只使用CSS做到这一点：

那就是：

<html> 

<head> 
<style type="text/css"> 
    body{ 
     background-color: #cbf; 
    } 

    #wrap { 
     border-radius: 20px; 
     margin: 10px auto; 
     overflow: hidden; 
     width: 900px; 
    } 

    #head { 
     text-align: center; 
     background-color: red; 
     height: 100px; 
     overflow: hidden; 
    } 

    #main { 
     float: left; 
     background-color: gray; 
     min-height: 200px; 
    } 

    #sidebar { 
     width:200px; 
     float: left; 
     background-color: gray; 
    } 

    #content { 
     float:left; 
     background-color: white; 
     min-height: 200px; 
     width: 700px; 
    } 

</style> 
<title> 
    example 
</title> 
</head> 

<body> 
<div id="wrap"> 
    <div id="head"> 
     <h1>example site name</h1> 
    </div> 
    <div id="main"> 
     <div id="sidebar"> 
      &nbsp; 
     </div> 
     <div id="content"> 
      &nbsp; 
      <p> 
       ***</br></br></br> 
       ***</br></br></br> 
       ***</br></br></br> 
       ***</br></br></br> 
       ***</br></br></br> 
       ***</br></br></br> 
       ***</br></br></br> 
       ***</br></br></br> 
       ***</br></br></br> 
       ***</br></br></br> 
       ***</br></br></br> 
       ***</br></br></br> 
       ***</br></br></br> 
       ***</br></br></br> 
       ***</br></br></br> 
       ***</br></br></br> 

      </p> 
     </div> 
    </div> 
</div> 
</body> 
</html>

您还可以交替使用

创建工具条

 #wrap { 
      background: url('bg.png') repeat-y white; 
     }

bg.png需要是一个1像素高的图像，其宽度与侧栏相同。使用CSS高度100％在这种情况下不起作用。

希望这会有所帮助。

相关推荐