Question

JsFiddle：Here

所以我遇到了两个问题，我似乎无法弄清楚解决方案。一：我需要内容div的最小高度为菜单的高度（我不想使用最小高度规则）二：当内容div大于菜单时，我需要菜单的高度为内容div的大小。

HTML：

<div class="container">
    <div class="menu">
        <ul>
            <li>Menu1</li>
            <li>Menu2</li>
            <li>Menu3</li>
            <li>Menu4</li>
        </ul>
    </div> 
    <div class="content">content</div>
</div>
<div class="container">
    <div class="menu">
        <ul>
            <li>Menu1</li>
            <li>Menu2</li>
            <li>Menu3</li>
            <li>Menu4</li>
        </ul>
    </div> 
    <div class="content">content2</div>
</div>

CSS：

.container{
    padding: 5px 0;
    clear: both;
}
.menu{
   float:left;
    background-color: green;
}
    .menu ul{
        list-style-type: none;
        padding: 0;
        margin:0;
    }
.content{
    background-color: yellow;
    padding-left: 50px;
}

编辑：

在jsFiddle搞砸了之后我想出了This，这里有人似乎有问题吗？基本上它使用显示表和显示表行...

HTML：

<div class="table">
    <div class="row">
        <div class="cell first">
            asdfasdf
        </div>
                <div class="cell second">
            Content 1 
        </div>
    </div>
</div>

<div class="table">
    <div class="row">
        <div class="cell first">
            asdfasdf
        </div>
                <div class="cell second">
            Cotent 2
        </div>
    </div>
</div>

CSS：

.table{
    display table;
    padding-top: 20px;
}

.row{
    display: table-row;
}

.first{
    background-color:green;
}

.second{
        background-color:yellow;
    width: 100%;
}
.cell{
    display:table-cell;
}

Answer 1

如果您希望两列具有相同的高度，请尝试使用one true layout方法：

Adjusted JSFiddle here.

/* CSS */

.container{
    padding: 5px 0;
    clear: both;
    overflow: hidden;
}

.menu, .content {
    padding-bottom: 999999px;
    margin-bottom: -999999px;
}

.menu{
   float:left;
    background-color: green;
}
    .menu ul{
        list-style-type: none;
        padding: 0;
        margin:0;
    }
.content{
    background-color: yellow;
    padding-left: 50px;
}

Answer 2

最小内容大小....这是浮动菜单和内容和适当宽度的问题

NB。当内容与各种解决方案进行不同的讨论时，菜单的高度相等。

JSFiddle Demo（粗糙，因为我整理并使用'box-sizing

.container{
    padding: 5px 0;
    clear: both;
     background-color: yellow;
    overflow:hidden;
    margin-bottom:10px;
}
.menu{
   float:left;
    background-color: green;
    width:10%;
}
    .menu ul{
        list-style-type: none;
        padding: 0;
        margin:0;
    }
.content{
 float:left;
    width:80%;
    margin-left:10px;
}

用html构建菜单，右边有内容

2 个答案: