[分享]css中 宽度 百分百

CSS中的宽度可以使用多种单位表示，包括像素（px）、百分比（）、em 和 rem 等。其中，百分比单位可以很方便地实现宽度百分百的效果，让元素的宽度随着浏览器窗口大小的改变而自适应调整。 设置元素宽...

CSS中的宽度可以使用多种单位表示，包括像素（px）、百分比（%）、em 和 rem 等。其中，百分比单位可以很方便地实现宽度百分百的效果，让元素的宽度随着浏览器窗口大小的改变而自适应调整。
设置元素宽度为百分比时，在父容器中需要设置明确的宽度，否则无法生效。例如，如果要实现一个宽度百分百的div元素，可以在父容器中设置固定的宽度，再在子元素中设置100%的宽度即可。例如下面的代码：

<div class="container">
    <div class="box"></div>
</div>
<br>
<style>
.container {
    width: 1000px;
    margin: 0 auto;
}
.box {
    width: 100%; /* 子元素宽度百分比 */
    height: 200px;
    background-color: #ddd;
}
</style> 

在上述代码中，父容器 .container 的宽度为 1000 像素，子元素 .box 的宽度设置为 100%，即为父容器的宽度，因此 .box 元素的宽度是容器的百分百宽度，随着浏览器窗口的改变而实时调整。
需要注意的是，在某些情况下，元素为了完全填充父容器而出现了溢出，可以给body以及html增加如下样式，通过计算滚动条宽度占用的padding解决。
pre{ width: 640px; margin: 0 auto; background-color: #f5f5f5; padding: 20px; overflow: auto; box-sizing: border-box; } html,body { margin: 0; padding: 0; height: 100%; position: relative; -webkit-overflow-scrolling: touch; overflow-y:scroll; } body { padding-right: 1.3em; } ::-webkit-scrollbar { width: 0.8em; height: 8px; } ::-webkit-scrollbar-thumb { background-color: #333; border-radius: 5px; } ::-webkit-scrollbar-track { background-color: #eee; }