Question

我在某个地方看到不建议使用高度而是使用填充，为什么呢？高度和填充产生相同的结果 - 至少在我的试验中......我是否有理由仅使用填充而不是高度？

Answer 1

要回答您的问题 - 当然您可以在响应式网站中使用高度而不会出现问题。

我认为你可能已经阅读过使用填充代替高度的地方是保持元素的纵横比相同，因为基于百分比的填充是相对于元素的宽度而基于百分比的高度是相对于它的＃39 ; s容器。

一个常见的用例是在响应式wesbite中嵌入YouTube视频。

HTML

<div class="video-container">
   <iframe src="//www.youtube.com/embed/k_d5jWvBirU?wmode=opaque&amp;rel=0&amp;showinfo=0&amp;modestbranding=1&amp;controls=2&amp;autohide=1" frameborder="0" allowfullscreen=""></iframe>
</div>

CSS

.video-container {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
  background: #000;
}
.video-container iframe {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

在这里小提琴：http://jsfiddle.net/84wm08k7/

正如您所看到的，video-container的高度设置为0，padding-bottom的高度设置为56.25%。这会将此元素限制为视频的16：9宽高比，并且具有响应性。

Answer 2

如果你使用填充，那么开始然后页面会伸展自己以适应屏幕，留下给定数量的边框（填充）。如果使用指定的高度（以每个像素为单位），无论屏幕分辨率如何，页面总是相同的高度。如果您使用高度作为百分比或某些类似值，除此之外无关紧要，空间量（填充）将根据屏幕而变化。

Answer 3

这取决于你正在做什么。对于我的很多工作，我将设置一个最小高度或最大高度，以便元素根据内容的增长或缩小。

填充也可以工作，例如，如果你有一个文本垂直居中的元素，你也可以使用填充来控制高度。这完全取决于网站设计，以及您正在努力实现的目标。

Answer 4

这是一个代码示例，您可以查看w3schools.com以获取更多信息，我选择了您可以操作dom的示例

function myFunction() {
    document.getElementById("myBtn").style.height = "50px";
}

<!DOCTYPE html>
<html>
<body>

<button type="button" id="myBtn" onclick="myFunction()">Change the height of this button</button>



</body>
</html>

是否允许/建议在响应式网站中使用高度？

4 个答案: