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上的填充值为<强烈>增加成比例。

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

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

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

Answer 1

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

这样可行，但仅适用于有限范围的视口尺寸（500px - 1000px）。

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

我的代码的工作原理是设置上限值为500px，因此当向左和向右应用时总计为1000px，然后下限是50vw值的一半，或换句话说50％。如果您使用这些值，您可以根据需要调整上限和下限。

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

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

1 个答案: