Question

我无法获得包装块的实际高度值。这里是HTML示例：

.one, .two {
    height: 100px;
    background-color: black;
}
    
.three, .four {
    margin-bottom: 10px;
    background-color: green;
}

<div class="wrapper">
    <div class="one"></div>
    <div class="two"></div>
    <div class="three" ></div>
    <div class="four" ></div>
</div>

.height(), .outerHeight(), .innerHeight()返回相同的值 - 200.但如果我添加border-bottom:1px solid transparent，则高度值将为211.

那么如何在不添加1px边框的情况下获得高度值？

Answer 1

在浏览器（此处为Chrome）中检查HTML时，包装器div的高度为200，div的三个和四个高度为零，尽管它们的边距显示在包装器下方div。只要div具有内容，它们的高度就会与0不同，并且会增加包装器的高度。

HTML试验：

    <!doctype html>
    <html>
    <head>
      <style>
        .one, .two {
          height: 100px;
          background-color: red;
        }
    
        .three, .four {
          margin-bottom: 10px;
          background-color: yellow;
        }
      </style>
    </head>
    <body>
    <div class="wrapper">
      <div class="one"></div>
      <div class="two"></div>
      <div class="three" ></div>
      <div class="four" ></div>
    </div>
    </body>
    </html>

以下HTML的高度为210px：

    <!doctype html>
    <html>
    <head>
      <style>
        .one, .two {
          height: 100px;
          background-color: red;
        }
    
        .three, .four {
          height: 0px;
          margin-bottom: 10px;
          background-color: yellow;
        }
      </style>
    </head>
    <body>
    <div class="wrapper" id="wrapper">
      <div class="one"></div>
      <div class="two"></div>
      <div class="three">&nbsp;</div>
      <div class="four">&nbsp;</div>
    </div>
    <script>
      console.log(document.getElementById("wrapper").clientHeight);
    </script>
    </body>
    </html>

将 作为内容添加到div s
将height: 0px;添加到CSS

如何使用带有边距的零高度块来获得块高度

1 个答案: