拉伸液体容器以及浮动内容物 [英] stretch liquid container along with floated contents

问题描述

基本上，我想让容器与 id = content 中的内容垂直。我似乎不知道如何，即使高度：100％值为 id = container 不工作。 / p>

http://jsfiddle.net/hVksr/

容器的CSS

  #container {
 width ：400px; 
 height：100％; 
 margin：auto; 
 background：#ccc; 
} 
  

HTML MARKUP

 < div id =container> 
< div id =head> 
 header 
< / div> 
 
< div id =content> 
目录这里
< / div> 
 
< div id =side> 
侧面内容
< / div> 
 
< / div><！ -  / container  - > 
  

解决方案

尝试这样才能工作

  #container {
 width：400px; 
 min-height：100px; 
 height：auto; 
 overflow：hidden; 
 margin：auto; 
 background：#ccc; 
 
 
} 
  

希望这有助于：D

basically, i want the container to stretch vertically along with the contents inside id=content. i cant seem to figure out how, even putting height:100% value for the id=container doesnt work.

http://jsfiddle.net/hVksr/

CSS for container

#container {
width: 400px;
height:100%;
margin:auto;   
background:#ccc; 
}

HTML MARKUP

<div id="container">
   <div id="head">
       header
   </div>

   <div id="content">
      Contents Here  
   </div>

   <div id="side">
      Side Contents
   </div>

</div>​ <!--/container-->

解决方案

Try this it should work

#container {
    width: 400px;
    min-height:100px;
    height:auto;
    overflow:hidden;
    margin:auto;   
    background:#ccc;


}

Hope this helps :D

这篇关于拉伸液体容器以及浮动内容物的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！