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
Html css javascript
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>

Previous: How to solve the problem of finding a bug, of docker?

Next: The event parameter in ontouchmove = function (event) does not have attributes such as clientX: 1218

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu