sgsy_2013
xuhanchn
2016-09-05 07:17
采纳率: 92.7%
浏览 1.1k
已采纳

求解div+css布局的问题

图片说明

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

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

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

8条回答 默认 最新

  • huishou_mass
    huishou_mass 2016-09-05 07:46
    已采纳

    .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;
    }
    点赞 评论
  • waterhexuan
    编天码地 2016-09-05 07:27

    你没有 clear：left 吧

    点赞 评论
  • waterhexuan
    编天码地 2016-09-05 07:52

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

    点赞 评论
  • ying_huaxue
    樱_花雪 2016-09-05 08:07
    <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)
    点赞 评论
  • ying_huaxue
    樱_花雪 2016-09-05 08:10

    图片说明

    点赞 评论
  • ying_huaxue
    樱_花雪 2016-09-05 08:13

    图片说明

    点赞 评论
  • zewu_chen
    二次不等试 2016-09-05 08:39

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

    点赞 评论
  • zewu_chen
    二次不等试 2016-09-08 11:16

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

    点赞 评论
提交

相关推荐