简单的水平等于div

Question

好的，我正在设置一个迷你页面，我希望它是100％可扩展的，所以我只想使用％。

但我没有得到33％宽度的“项目”，并且分发超过了“内容”的80％。

我做错了什么？

body, html{
    width: 100%;
    height: 100%;
}

.menu{
    width: 20%;
    height: 100%;
    background: #fff;
    float: left;
}

.content{
    width: 80%;
    height: 100%;
    background: #eee;
    float: left;
}

.bottom{
    position: absolute;
    bottom: 0;
}

.item{
    width: 33%;
    float: left;
}

.red{background: red;}
.blue{background: blue;}
.green{background: green;}

<div class="menu">menu</div>
<div class="content">content
    <div class="bottom">
        <div class="item red">left</div>
        <div class="item blue">mid</div>
        <div class="item green">right</div>
    </div>
</div>

Answer 1

请尝试以下操作： Demo

.content{       
    position: relative; 
}

.bottom{       
    width:100%;
}

.item{       
    box-sizing:border-box;
}