Question

当浏览器缩小时，下面HTML中出现的两个DIV元素会因CSS而失去100％的宽度？

有人可以解释如何解决这个问题吗？

谢谢，

HTML

<div class="featured">    
    <h1>Name <span class="desc">This is a sample</span></h1>
</div>

<div class="aquabar">
    <div class="aquacont">
        Sample Description
        <h2>Some more information that is applicable</h2>
    </div>
</div>

CSS

.featured {
    width: 100%
    height: 400px;
    background-image: url("../img/featured-image.jpg");
    text-transform: uppercase;
    padding: 40 0 0 0;
}
.aquabar {
    width: 100%
    height: 100px;
    background-image: url("../img/featured-bg.jpg"); 
    background-color: #49aca9;
    margin: -30px 0 30px 0;
}

Answer 1

只需使用box-sizing:border-box即可获得100％的div。因此，它将理解100％包括你的填充/边距。

 .featured {
width: 100%
height: 400px;
background-image: url("../img/featured-image.jpg");
text-transform: uppercase;
padding: 40 0 0 0;
box-sizing:border-box;
}
.aquabar {
width: 100%
height: 100px;
background-image: url("../img/featured-bg.jpg"); 
background-color: #49aca9;
margin: -30px 0 30px 0;
box-sizing:border-box;
}

100％宽度水平折叠？

1 个答案: