当 Y 元素的宽度减小时增加 X 元素的填充

Question

默认情况下 body 元素当然占用 100% 宽度，因此当浏览器 window 调整大小时，此宽度（以像素为单位）将明显减小。对于 body 宽度减小的每个像素，我想将一组元素（ header、main 和 footer ）的填充增加 1 个像素。不知道从哪里开始。这是一个基本设置：

function start() {
  //code here..
}

start();

@import url( 'https://necolas.github.io/normalize.css/latest/normalize.css' );
* {
  box-sizing: border-box;
}
html, body {
  height: 100%;
}
body, header, main, footer {
  padding: 1%;
}
header, main, footer {
  height: 33.333%;
}
div {
  height: 100%;
  background-color: #444;
  color: #ddd;
}
p {
  margin: 0;
  padding: 0;
  position: relative;
  top: 50%;
  transform: translateY( -50% );
  text-align: center;
}

<header>
  <div>
    <p>When this snippet is made <b>Full page</b>.</p>
  </div>
</header>

<main>
  <div>
    <p>And the browser window width is <i>decreased</i>.</p>
  </div>
</main>

<footer>
  <div>
    <p>The padding on these rectangles should <i>increase</i>.</p>
  </div>
</footer>

当浏览器 window 调整大小并且 body 宽度减小我想要 header、width 上的填充值，并且 height 到 按比例增加 。

我最初尝试在 JavaScript 使用 CSS viewport 单位的情况下完成此操作。效果不是很好。

PS：我尽量不使用 Jquery。

编辑： 我刚刚意识到这一点，但可能值得指出的是，默认的填充行为是减少值作为包含元素的宽度减小。由于顶部 & 底部和左侧 & 右侧 padding 由容器 width 计算正如我调整代码片段大小时所见。

Answer 1

padding: 0 calc( 500px - 50vw );

这有效，但仅适用于有限范围的视口大小 (500px - 1000px)。

仅在 CSS 中进行计算的问题是必须定义上限和下限，因为视口在理论上可能有数千像素宽，并且会耗尽填充在某些时候可用。

我的代码通过将上限值设置为500px来工作，因此当应用于左右时总共为1000px，然后下限值是[=12]的一半=]，即 50%。如果您使用这些值，您有望对齐上限和下限以满足您的需要。

http://codepen.io/zepha/pen/QpMRYQ

当 Y 元素的宽度减小时增加 X 元素的填充

Increase padding on X elements when Y element's width decreases

html

javascript

css

padding

width