div无限地垂直扩展

我有一个页面，我创建的主菜单在页面的左侧，我希望它填满整个左侧。div无限地垂直扩展

实施例图像：

Sample image

蓝色部分是标志，主菜单，版权区域。较深的灰色部分是主要内容的地方。

现在我已经编码了，所以暗灰色区域实际上是具有灰色渐变的html元素，而蓝色区域是我已经向左浮动的div。我碰到的问题是，当灰色区域有足够的内容，你必须向下滚动，左边的div不会随着它扩展。

我希望蓝色和灰色区域保持静态。

HTML：

<body class="clearfix"> 

    <div id="left"> 

     <div id="logo"> 
      <a href="index.html"><img src="images/logo.png" /></a> 
     </div><!-- END logo --> 

     <div id="mainNav"> 
      <ul> 
       <li><a href="aboutMe.html">About Me</a></li> 
       <li><a href="contactMe.html">Contact Me</a></li> 
       <li><a href="index.html">Portfolio</a></li> 
      </ul> 
     </div><!-- END menu --> 

     <div id="copyright"> 
      &copy; 2014 
     </div><!-- END copyright --> 

    </div><!-- END left --> 

    <div id="right"> 
    </div><!-- END right --> 

    </body>

CSS：

html { 
background: #333132 fixed center top; 
background-image: -o-linear-gradient(top, #0b0b0b 0%, #333132 100%); 
background-image: -moz-linear-gradient(top, #0b0b0b 0%, #333132 100%); 
background-image: -webkit-linear-gradient(top, #0b0b0b 0%, #333132 100%); 
background-image: -ms-linear-gradient(top, #0b0b0b 0%, #333132 100%); 
background-image: linear-gradient(to top, #0b0b0b 0%, #333132 100%); 
} 

html, body { 
    height: 100%; 
    margin: 0; 
} 

#left { 
    width: 300px; 
    min-height: 100%; 
    float: left; 
    background: #316b9c fixed center top; 
    background-image: -o-linear-gradient(left, #316b9c 0%, #194980 100%); 
    background-image: -moz-linear-gradient(left, #316b9c 0%, #194980 100%); 
    background-image: -webkit-linear-gradient(left, #316b9c 0%, #194980 100%); 
    background-image: -ms-linear-gradient(left, #316b9c 0%, #194980 100%); 
    background-image: linear-gradient(to left, #316b9c 0%, #194980 100%); 
    box-shadow: 3px 0px 5px #0b0b0b; 
    margin-right: 50px; 
    position: relative; 
} 

#logo { 
    text-align: center; 
    margin: 20px 0; 
} 

#mainNav ul { 
    text-align: right; 
    font-size: 10px; 
    margin-right: 50px; 
} 

#mainNav ul li{ 
    display: inline-block; 
    margin-left: 10px; 
} 

#copyright { 
    color: white; 
    text-align: right; 
    font-size: 10px; 
    margin-right: 50px; 
    position: absolute; 
    bottom: 10px; 
    right: 0; 
}

来源

2014-02-18 Bucthree

你可以在两边都放一个封闭的div，使用overflow：auto;并把你想要展开的div放在没有内容的高度上：100％。 – berentrom

我添加了溢出：自动和高度：100％的#right div，似乎工作。谢谢！ – Bucthree

您需要关闭你已经开始在你的HTML标签的ID的= “正确” 的div标签。您还需要将CSS值定义为CSS中的#right参数。

来源

2014-02-18 19:58:26

他们在我的标记中关闭，这只是一个复制粘贴错误。 – Bucthree

div无限地垂直扩展

回答

相关问题