html布局有間隔問題

html

<div id="dev-tool">
        <div class="tool-header">

            <div class="header-left fl">
                
            </div>
            <div class="header-mid">
                <div class="header-tab" data="console">
                </div>
                <div class="header-tab" data="network">
                </div>
            </div>
            <div class="header-right fr">
                
            </div>
        </div>
        <div class="tool-body">
            <div class="tool-container" data="console" id="log-board">
                <div class="log-line">
                    <div class="log-str fz-12">
                        asdfasdf
                    </div>
                </div>
                <div class="log-line">
                    <div class="log-obj fz-12">
                        <div class="log-obj-header">
                            [1,2,3,4]
                        </div>
                        <div class="obj-body">
                            <div class="obj-line">
                                1
                            </div>
                            <div class="obj-line">
                                2
                            </div>
                            <div class="obj-line">
                                3
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="tool-container" data="network" style="display: none;">
                
            </div>
        </div>
    </div>

css

#dev-tool{width:100%;height:200px;position:fixed;bottom:0;left:0;background-color:#dedede}#dev-tool *{box-sizing:border-box}#dev-tool .tool-header{width:100%;height:20px;background-color:#a5a5a5}#dev-tool .tool-header .header-left,#dev-tool .tool-header .header-right{height:20px;width:60px}#dev-tool .tool-header .header-mid{padding:0 60px;height:20px}#dev-tool .tool-header .header-tab{display:inline-block;padding:0 4px;font-size:14px;line-height:20px;vertical-align:top;cursor:pointer}#dev-tool .tool-header .header-tab:hover{background-color:#ccc}#dev-tool .tool-header .header-tab-active{background-color:#ccc}#dev-tool .tool-body{width:100%;height:calc(100% - 20px)}#dev-tool .tool-body .tool-container{width:100%;height:100%;overflow:auto}#dev-tool .log-line{padding:5px}#dev-tool .log-line .log-str,#dev-tool .log-line .log-obj{word-break:break-all}#dev-tool .log-line .log-obj{background-color:#e4cfcf}#dev-tool .log-line .log-obj .obj-line{padding-left:4px}.fl{float:left}.fr{float:right}.fz-12{font-size:12px}.fz-14{font-size:14px}.error{color:red}

并且.tool-container如果沒有width:100%;默認沒有撐滿，why？
希望可以簡單建個html來把我的代碼粘貼進去，幫我尋找一下問題謝謝

回答

編輯回答

笨小蛋

1、HTML標(biāo)簽沒初始化，就會自帶一些margin/padding 所以有間隙

 *{
   margin: 0;
   padding: 0;
   }

2、position:fixed；導(dǎo)致DIV脫離【文檔流】，沒width:100%;就不能撐滿。

建議把最基礎(chǔ)的知識看資料補上：塊級元素、行內(nèi)元素、行內(nèi)置換元素、行高、文檔流、CSS優(yōu)先級等等。。。。

2018年5月18日 13:54

編輯回答

慢半拍

在我的例子中 overflow: auto完成了清浮動的工作，在你的例子中沒有完成清浮動的工作，這個<div class="header-right fr"></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>
  <style>
    #dev-tool {
      width: 100%;
      height: 200px;
      background-color: #dedede
    }

    #dev-tool * {
      box-sizing: border-box
    }

    #dev-tool .tool-header {
      width: 100%;
      height: 20px;
      background-color: #a5a5a5
    }

    #dev-tool .tool-header .header-left,
    #dev-tool .tool-header .header-right {
      height: 20px;
      width: 60px
    }

    #dev-tool .tool-header .header-mid {
      padding: 0 60px;
      height: 20px
    }

    #dev-tool .tool-header .header-tab {
      display: inline-block;
      padding: 0 4px;
      font-size: 14px;
      line-height: 20px;
      vertical-align: top;
      cursor: pointer
    }

    #dev-tool .tool-header .header-tab:hover {
      background-color: #ccc
    }

    #dev-tool .tool-header .header-tab-active {
      background-color: #ccc
    }

    #dev-tool .tool-body {
      width: 100%;
      background-color: green;
    }

    #dev-tool .tool-body .tool-container {
      width: 100%;
      height: 100%;
      overflow: auto
    }

    #dev-tool .log-line {
      padding: 5px
    }

    #dev-tool .log-line .log-str,
    #dev-tool .log-line .log-obj {
      word-break: break-all
    }

    #dev-tool .log-line .log-obj {
      background-color: #e4cfcf
    }

    #dev-tool .log-line .log-obj .obj-line {
      padding-left: 4px
    }

    .fl {
      float: left
    }

    .fr {
      float: right
    }

    .fz-12 {
      font-size: 12px
    }

    .fz-14 {
      font-size: 14px
    }

    .error {
      color: red
    }
  </style>
</head>

<body>
  <div id="dev-tool">
    <div class="tool-header">

      <div class="header-left fl">

      </div>
      <div class="header-mid">
        <div class="header-tab" data="console">
        </div>
        <div class="header-tab" data="network">
        </div>
      </div>
      <div class="header-right fr">

      </div>
    </div>
    <div class="tool-body">
      <div class="tool-container" data="console" id="log-board">


      </div>
    </div>

  </div>
  </div>
</body>

</html>

2018年3月17日 10:34