border实现等高布局实例页面

展示

代码

• HTML：

  <div class="box">
    <nav>
      <h3 class="nav">导航1</h3>
    </nav>
    <section>
      <div class="module">模块1</div>
    </section>
  </div>
  
  <input type="button" id="navMore" value="更多导航">
  <input type="button" id="moduleMore" value="更多模块">

• CSS：

  /* 导航背景区border创建 */
  .box { 
    border-left: 150px solid #333;
    background-color: #f0f3f9;
  }
  /* 清除浮动影响，不能使用overflow:hidden */
  .box:after {
    content: "";
    display: block;
    clear: both;
  }
  /* 布局主结构 */
  .box > nav {
    width: 150px;
    margin-left: -150px;
    float: left;
  }
  .box > section {
      overflow: hidden;
  }
  /* 导航列表和模块列表 */
  .nav {
      line-height: 40px;
      color: #fff;
  }
  .module {
      line-height: 40px;
  }

• JS：

  var navMore = document.getElementById('navMore'),
      moduleMore = document.getElementById('moduleMore');
  
  if (navMore && moduleMore) {
      var nav = document.querySelector('nav'), 
          section = document.querySelector('section');
      var navIndex = 1, sectionIndex = 1;
      var rand = function() {
          return 'f' + (Math.random() + '') .slice(-1);
      };
      navMore.onclick = function() {
          navIndex++;
          nav.insertAdjacentHTML('beforeEnd', 
            '<h3 class="nav">导航'+ navIndex +'</h3>');
      };
      moduleMore.onclick = function() {
          sectionIndex++;
          section.insertAdjacentHTML('beforeEnd', 
            '<div class="module" style="background:#'+ [rand(), rand(), rand()].join('') +'">模块'+ sectionIndex +'</div>');
      };  
  }