问答详情
源自:4-1 编程挑战

格栅布局怎样让整个body分为两列,例如左侧背景为灰色且高度充满

格栅布局怎样让整个body分为两列,例如左侧背景为灰色

提问者:慕粉3982295 2016-10-26 10:37

个回答

  • 拾木
    2016-11-25 17:31:56


    <div class="container-fluid">   
      <div class="row">
         <div class="col-xs-2">左边列</div>   
         <div class="col-xs-10">右边列</div> 
      </div>
    </div>

    左侧背景为灰色且高度充满,我使用的是在<div class="col-xs-2">左边列</div>中追加一个自己取的类left-nav,得到<div class="col-xs-2 left-nav">左边列</div>
    ,然后再写样式覆盖。

    .left-nav{
        height: 760px;
        background-color: #ddd;
        padding: 0;
       }

    高度给了一个固定值,不知道还有没有别的办法哦。

  • 小丶西瓜丿
    2016-10-27 15:37:20

    <style>
        .left{width:200px;height:100%;float:left;background:gray;}
        .right{width:200px;height:500px;float:left;}
    </style>
    <div class="left">左列</div>
    <div class="right>右列</div>