Html 带有css的div的动态高度

Dynamic height of div with css

提问by sirait

My HTML:

我的HTML：

<!-- Content -->
    <div class="content">
        <!-- Content left -->
        <div class="content-left"></div>
        <!-- Content center -->
        <div class="content-center">

        </div>
        <!-- Content right -->
        <div class="content-right"></div>
    </div>

My CSS:

我的CSS：

.content
{
 background-color: black;
 height: auto;
 margin: 80px auto 0px auto;
 min-height: 100px;
 padding: 10px 10px;
 width: 1200px;
}

.content-center
{
 -khtml-box-shadow: 0px -3px 5px rgba(0,0,2,2);
 -moz-box-shadow: 0px -3px 5px rgba(0,0,2,2);
 -webkit-box-shadow: 0px -3px 5px rgba(0,0,2,2);
 background-color: #ffffff;    
 border-left: 1px solid;
 border-right: 1px solid;
 border-color: #999999;
 box-shadow: 0px -3px 5px rgba(0,0,2,2);
 height : 900px;
 float: left;
 width : 800px;
}

.content-left
{
 background-color: #fff;
 float: left;
 height: 300px;
 width: 190px;
}

.content-right
{
 background-color: #fff;
 float: left;
 height: 300px;
 width: 190px;
}

My problem is DIV with class "content" don't have same height with other element as child of this tag. I want div with class "content" have dynamic height according to "content-center", "content-left" or "content-right". I have use min-height and height : auto in class "content" but it still not correct.

我的问题是带有“内容”类的 DIV 与此标签的子元素的其他元素的高度不同。我希望具有“内容”类的 div 具有根据“内容中心”、“内容左”或“内容右”的动态高度。我在“内容”类中使用了 min-height 和 height : auto ，但它仍然不正确。

回答by Sowmya

Add overflow:autoto .content

添加overflow:auto到.content

.content{
  width: 1200px;
  min-height: 100px;
  height: auto;
  margin: 80px auto 0px auto;
  background-color: black;
  padding: 10px 10px; 
  overflow:auto
}

DEMO

演示

回答by pala?н

Try this:

尝试这个：

* {
    margin: 0;
    padding: 0;
}

html, body {
    height:100%;
}

.content {
    width: 1200px;
    min-height: 100px;
    height: auto;
    margin: 80px auto 0px auto;
    background-color: black;
    padding: 10px 10px;
    display:table;
    overflow:hidden;
    height:100%;
}

Demo Here

演示在这里