鍍金池/ 問答/HTML/ div height 100%導致頁面出滾動條

div height 100%導致頁面出滾動條

請問下我想讓div高度撐滿屏幕該如何處理呢？
現(xiàn)在我是給每一級都加了height 100%
父級div設(shè)置了100%倒是剛好撐滿一屏
然后我想子div高度也自動填滿，這時候就導致父div超長導致有滾動條啦，該咋整呢麻煩各位大大支個招謝啦

圖片描述

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<style>
  * {
    margin: 0;
    padding: 0;
    border: 0;
  }

  body,
  html {
    height: 100%;
  }


  .content {
    height: 100%;
    display: flex;
  }

  .div1 {
    background-color: aqua;
    width: 400px;
    height: 100%;
    display: inline-block;
  }

  .l-t {
    height: 140px;
    background-color: brown;
  }

  .l-b {
    clear: both;
    overflow: hidden;
    height: 100%;
    float: left;
  }

  .left {
    width: 60px;
    float: left;
    background-color: darkcyan;
    height: 100%;
  }

  .right {
    width: 340px;
    float: left;
    background-color: chartreuse;
    height: 100%;
  }

  .div2 {
    background-color: blanchedalmond;
    display: inline-block;
    flex: 1;
  }

  .div3 {
    background-color: blueviolet;
    width: 400px;
    height: 100%;
    display: inline-block;
  }
</style>

<body>
  <div class="content">


    <div class="div1">
      <div class="l-t">
      </div>
      <div class="l-b">
        <div class="left">
        </div>
        <div class="right">
        </div>
      </div>
    </div>
    <div class="div2">2</div>
    <div class="div3">3</div>
  </div>
</body>

</html>
回答
編輯回答
憶當年

height: 100vh

2017年4月20日 10:51
編輯回答
醉淸風

你在div1這個類里面加overflow: hidden;就好，少用浮動。。脫離文檔流很容易發(fā)生意料之外的事情。。浮動能做得，彈性布局display:flex也和容易能做到。。
----------補充----------
你錯誤的原因，主謀不是左右兩個盒子，是l-b這個盒子，
你沒給它設(shè)計寬度并他給設(shè)計了浮動，所以沒添加兩個子盒子的時候，它的寬度為0不顯示在頁面，然后加了兩個子盒子后，他的寬度撐開，高度繼承了父元素的100%,所以他撐開頁面，出現(xiàn)了進度條。左右兩個盒子只能算是從犯了。

2017年12月1日 12:12