There is a spacing problem with html layout.

html

   

and .tool-container if there is no width:100%;, the default is not full, why?
I hope I can simply build a html to paste my code into it and help me find the problem. Thank you

Feb.27,2021

1. If the HTML tag is not initialized, it will bring some margin/padding, so there is a gap

.
 *{
   margin: 0;
   padding: 0;
   }

2, position:fixed; causes DIV to break away from [document stream], and cannot be full without width:100%;.

it is recommended to add the most basic knowledge to the data: block-level elements, inline elements, inline replacement elements, line height, document stream, CSS priority, and so on.


in my example overflow: auto has completed the work of clearing the float, but not in your case. This < div class= "header-right fr" > < / div > has fallen, it is too much

.

my example

<!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>
    -sharpdev-tool {
      width: 100%;
      height: 200px;
      background-color: -sharpdedede
    }

    -sharpdev-tool * {
      box-sizing: border-box
    }

    -sharpdev-tool .tool-header {
      width: 100%;
      height: 20px;
      background-color: -sharpa5a5a5
    }

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

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

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

    -sharpdev-tool .tool-header .header-tab:hover {
      background-color: -sharpccc
    }

    -sharpdev-tool .tool-header .header-tab-active {
      background-color: -sharpccc
    }

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

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

    -sharpdev-tool .log-line {
      padding: 5px
    }

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

    -sharpdev-tool .log-line .log-obj {
      background-color: -sharpe4cfcf
    }

    -sharpdev-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>
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b2c07b-2badc.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b2c07b-2badc.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?