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

Question

默认情况下body 元素当然会占用100% 宽度，因此当浏览器窗口调整大小时，此宽度（以像素为单位）会明显减小。对于每个像素，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>

当浏览器窗口调整大小并且body宽度减小我希望header、width和height上的填充值按比例增加 .

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

PS：我正在尝试不使用 Jquery。

---

编辑：我刚刚意识到这一点，但值得指出的是，默认的填充行为是随着包含元素宽度的减小而减小值。由于顶部 & 底部和左侧 & 右侧 padding 都是由容器 width 计算的，这可以在我的 sn-p 调整大小时看到.

Answer 1

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

这有效，但仅适用于有限范围的视口尺寸（500 像素 - 1000 像素）。

仅在 CSS 中进行计算的问题在于，必须有一个已定义的上限和下限，因为理论上视口可能有数千像素宽，并且在某些情况下它会耗尽可用的填充量点。

我的代码通过使用500px的值设置上限来工作，所以当应用于左右时总共1000px，然后下限是50vw的值的一半，或者其他的话 50%。如果您使用这些值，您有望调整上限和下限以满足您的需求。

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