百分比高度元素 Bug 与 CSS Reset 解决方法

百分比高度元素 Bug 与 CSS Reset 解决方法

在开发网页的过程中，我们经常会遇到元素高度设置为百分比时出现的 Bug。

例如：

HTML：

<div class="wrapper">
  <div class="content"></div>
</div>

CSS：

.wrapper {
  height: 100%;
}

.content {
  height: 50%;
  background-color: #eee;
}

我们期望的效果是 .content 元素的高度为 .wrapper 元素高度的一半，然而实际效果却不尽如人意。

这是因为，当我们设置一个元素的高度为百分比时，其实是相对于其父元素的高度进行计算的。但是，在大多数情况下，父元素的高度并没有被设置，那么百分比计算得到的高度就是 0，因此出现了上述 Bug。

解决方法一：用 JavaScript 动态计算元素高度

我们可以通过 JavaScript 动态计算元素高度，从而达到百分比高度元素的效果。例如：

HTML：

<div class="wrapper" id="wrapper">
  <div class="content"></div>
</div>

JavaScript：

var wrapper = document.getElementById('wrapper');
var content = document.querySelector('.content');
content.style.height = (wrapper.offsetHeight / 2) + 'px';

这种方法的优点是它可以应对不同屏幕尺寸和浏览器窗口大小的变化，但缺点是需要依赖 JavaScript，会增加页面加载时间和代码复杂度。

解决方法二：使用 CSS Reset

CSS Reset 是指通过设置一些默认样式，将不同浏览器的默认样式统一，从而减少兼容性问题，达到更好的浏览器兼容性。

那么，使用 CSS Reset 可以解决我们上述遇到的百分比高度元素 Bug 吗？

答案是可以。在 CSS Reset 的基础上，我们可以按照网页设计的需求，再针对不同的元素进行统一的样式设置，从而达到我们预期的效果。

常用的 CSS Reset 有 Normalize.css、Eric Meyer 的 Reset CSS 和 Yahoo 的 YUI Reset CSS 等。

示例代码（以 Normalize.css 为例）：

HTML：

<div class="wrapper">
  <div class="content"></div>
</div>

CSS：

// javascriptcn.com 代码示例
html {
  box-sizing: border-box;
}

*,
::before,
::after {
  box-sizing: inherit;
}

body {
  margin: 0;
}

.wrapper {
  height: 100%;
  padding: 0;
  margin: 0;
}

.content {
  height: 50%;
  background-color: #eee;
}

在这里，我们设置了 html 的 box-sizing 为 border-box，这样可以使得元素的宽度和高度计算包含 padding 和 border。

接着，我们对所有元素设置了 box-sizing 为 inherit，这样所有元素都继承了 html 的 box-sizing 属性，从而保证了所有元素的宽度和高度的计算一致。

最后，我们对 .wrapper 和 .content 进行了样式设置，包括高度、padding 和 margin，从而达到了我们预期的效果。

总结

针对百分比高度元素 Bug，我们可以通过 JavaScript 动态计算元素高度或使用 CSS Reset 解决。

JavaScript 动态计算元素高度的方法可以应对不同屏幕尺寸和浏览器窗口大小的变化，但是需要依赖 JavaScript。

CSS Reset 可以统一不同浏览器的默认样式，减少兼容性问题，需要在其基础上针对不同的元素进行样式设置。

在使用 CSS Reset 时，我们需要注意保证页面样式的一致性和可维护性，同时避免使用过于宽泛的选择器和通配符，以减小样式冲突的可能性。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/654b5fe57d4982a6eb53d23b