带css的动态高度div [英] Dynamic height of div with css

问题描述

我的 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>

我的 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;
}

我的问题是DIV与类内容不具有相同的高度其他元素作为此标记的子元素。我想要div与类内容具有根据内容中心，内容左或内容右的动态高度。我在类内容中使用了min-height和height：auto。但是它仍然不正确。

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.

推荐答案

$ c> overflow：auto 到 .content

Add overflow:auto to .content

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

DEMO

DEMO

这篇关于带css的动态高度div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！