在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML/ div height 100%導(dǎo)致頁面出滾動(dòng)條

div height 100%導(dǎo)致頁面出滾動(dòng)條

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

圖片描述

<!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>
回答
編輯回答
憶當(dāng)年

height: 100vh

2017年4月20日 10:51
編輯回答
醉淸風(fēng)

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

2017年12月1日 12:12