求解div+css布局的问题

图片说明

要做一个上图这样的布局
要求:
1.头部固定
2.左边栏定宽,右边主体部分占满剩下宽度
3.左边栏和右div高度始终保持一致,且左右div的高度随内容变化而变化
4.footer部分不能高过屏幕底边

第3点我没搞定。要求不要用js,只用css解决

8个回答

.bigbox{
display: flex;
width: 100%;
height: 500px;
border:5px solid red;

    }
    .left{
        width: 200px;
        border:5px solid yellow;
    }
    .right{
        flex:1;
        border:5px solid green;
    }
sgsy_2013
xuhanchn flex? 我现在好像不能用这个
大约 3 年之前 回复

你没有 clear:left 吧

sgsy_2013
xuhanchn 跟clear没关系啊。我是要第2个div和第3个div同高
大约 3 年之前 回复

你的 第二步骤 靠什么 解决的 ?

<div style="background-color:green;width:100px;height:100px">
    <div style="background-color:red;width:100px;height:20px">1</div>
    <div style="background-color:blue;width:100px;height:80px">
        <div style="background-color:yellow;width:30px;height:80px;float:left">2</div>
        <div style="background-color:pink;width:70px;height:80px;float:right;">3</div>
    </div>
    <div style="background-color:lightgreen;width:100px;height:20px">4</div>
</div>![图片说明](https://img-ask.csdn.net/upload/201609/05/1473062863_235002.png)

图片说明

sgsy_2013
xuhanchn 对是这个
大约 3 年之前 回复
ying_huaxue
樱_花雪 是要这个样子吗
大约 3 年之前 回复

图片说明

sgsy_2013
xuhanchn 回复樱_花雪: 谢谢啦,我还是自己用js解决了。如果不用js可能只能用css3的display: flex了。我暂时还不会
大约 3 年之前 回复
ying_huaxue
樱_花雪 你试试这个例子吧 我试着还可以
大约 3 年之前 回复
ying_huaxue
樱_花雪 http://www.cnblogs.com/xiaoliao/p/3321193.html
大约 3 年之前 回复
ying_huaxue
樱_花雪 回复sgsy_2013: 你调好了吗
大约 3 年之前 回复
sgsy_2013
xuhanchn 回复樱_花雪: 不行
大约 3 年之前 回复
ying_huaxue
樱_花雪 回复sgsy_2013: 把高度换成百分比不行吗
大约 3 年之前 回复
sgsy_2013
xuhanchn 额 。不是啊,我是要2 3两个div的高度会根据内部内容自适应的增加,并且两个div的高度还要相等
大约 3 年之前 回复

图片说明
这种有动态的广告例子的布局可以不?行的话给个邮箱发给你

zewu_chen
二次不等试 回复sgsy_2013: 不好意思,工作较忙,已经发了
大约 3 年之前 回复
sgsy_2013
xuhanchn sgsy_2013@126.com
大约 3 年之前 回复
sgsy_2013
xuhanchn 可以啊。sgsy
大约 3 年之前 回复

不好意思,工作较忙,已经发了图片说明

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!