Question

当我将宽度作为百分比应用于页面的任何内部元素时，它会将百分比应用于其父容器的宽度。

如何指定任何内部元素的宽度作为Body宽度的百分比，而不是默认值（父容器宽度的百分比）？

附加信息：根据设备的不同，身体的宽度也会发生变化。对于1440px以上的器件，宽度为1440px，否则如果器件宽度较小，则体宽为100％。

Answer 1

您可以使用视口单元。

<div class="parent"> /** Width:900px;  **/
      <div class="inner"> /** 100% of BODY, not of parent div **/

      </div>
   </div>

<style>
.parent {
background:red;
width:20px;
padding: 10px;
}


.inner {
background:green;
width: 100vw;
}
</style>

或

您可以使用javascript获取正文的宽度，并将其宽度百分比设置为其他元素

获取正文宽度：

document.body.clientHeight;

在html元素中设置宽度：

document.getElementById('div_register').setAttribute("style","width:500px");

Answer 2

如果您始终希望宽度为正文的宽度，则可以使用视口单位。

1 vw始终是视口初始包含块宽度的1％，通常是正文。

因此，如果您希望某些物体占身体的20％，则将其宽度设置为width: 20vw。

无论你在DOM中嵌入多远，它都可以正常工作，并且它与页面呈现时的屏幕大小相关。

有关视口单元的更多信息https://css-tricks.com/fun-viewport-units/

Answer 3

您不应该对<body>。

进行样式化

而是添加一个包含视图端口单元和最大宽度组合的包装器。

.container {
  width: 100vw;
  max-width: 1440px;
  height: 100vh;
  margin: 0 auto;
  background-color: green;
}

<div class="container"></div>

如何指定任何内部元素的宽度作为Body宽度的百分比？

3 个答案: