javascript - 当 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 计算，如我所见片段被调整大小。

Answer 1

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

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

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

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

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