我无法获得包装 block 的真实高度值。这里是示例 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 边框的情况下获取高度值呢？
最佳答案
在浏览器(此处为 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"> </div>
<div class="four"> </div>
</div>
<script>
console.log(document.getElementById("wrapper").clientHeight);
</script>
</body>
</html>- 添加
div的内容 - 添加
height: 0px;到 CSS
关于jquery - 如何使用内部有边距的零高度 block 获取 block 高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30736357/