allowed/recommended 在响应式网站中使用高度吗？

Question

我在某处看到不建议使用 height 而是使用 padding，为什么？高度和填充产生相同的结果 - 至少在我的试验中 - ...我有理由只使用填充而不是高度吗？

Answer 1

开始吧，如果您使用填充，那么页面将自行拉伸以适应屏幕，留下给定的边框（填充）量。如果您使用指定的高度（以像素为单位），则无论屏幕的分辨率如何，页面都将始终保持相同的高度。如果您将高度用作百分比或一些类似的值，那么除了 space（填充）的数量会因屏幕而异外，这无关紧要。

Answer 2

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

填充也可以，例如，如果您有一个包含垂直居中文本的元素，您也可以使用填充来控制高度。这完全取决于站点设计以及您要完成的目标。

Answer 3

这是一个代码示例，您可以查看 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>

Answer 4

回答你的问题 - 当然你可以在响应式网站中使用高度没有问题。

我想您可能已经读到关于使用填充代替高度的地方是为了保持元素的纵横比相同，因为基于百分比的填充是相对于元素的宽度而基于百分比的高度是相对于它的容器。

一个常见的用例是在响应式网站中嵌入 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%;
}

Fiddle 这里：http://jsfiddle.net/84wm08k7/

如您所见，video-container 的高度设置为 0，padding-bottom 的高度设置为 56.25%。这将此元素限制为视频的 16:9 宽高比并且是响应式的。

allowed/recommended 在响应式网站中使用高度吗？

Is it allowed/recommended to use height in responsive websites?

html

css

responsive-design