調整瀏覽器大小時，為什么div之間有時會有間隙？

Question

如果您調整瀏覽器的大小，則.services-items的底部和父div（ .services ）之間會有一個間隙。 這是代碼：

 #one { background-color: #fff; height: 50%; width: 100%; } #two { background-color: #fff; height: 50%; width: 100%; } body, html { height: 100%; background-color: #000; } * { margin: 0; } .services { background: green; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; padding: 0 50px; color: #fff; } .services-items { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; background-color: rgba(0, 0, 0, 0.5); padding: 50px; height: auto; text-align: center; position: relative; } .services-items h2 { margin: 20px 0; } .services-items p { line-height: 150%; } 

 <div id="one"></div> <div class="services"> <a> <div class="services-items"> <h2>Service 1</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique amet atque recusandae, consequatur facere nesciunt. Placeat nostrum, aliquam suscipit. Tempore obcaecati sed eligendi cumque! Quo et, quod veniam nulla maxime quos voluptas harum odio ipsam libero repellat dicta hic. Eos!</p> </div> </a> <a> <div class="services-items"> <h2>Service 2</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis pariatur vitae illum, alias suscipit ipsa soluta optio eos officia ducimus incidunt maiores molestias velit, delectus libero, ad eaque repellendus. Rerum, rem doloribus, cupiditate quos ex hic porro distinctio beatae. Vero, harum, autem. Quo itaque assumenda, mollitia et repellendus vel porro.</p> </div> </a> <a> <div class="services-items"> <h2>Service 3</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium error et animi, porro omnis facilis voluptatum vel voluptatem pariatur quasi debitis in ratione voluptas eos ex maiores adipisci, nesciunt aliquid alias maxime accusamus veritatis? Dignissimos, perspiciatis deserunt numquam animi rerum aliquid mollitia, blanditiis dolore architecto.</p> <h3>Jos haluat tämän palvelun/tuotteen, ota yhteyttä ja kerro viestissä.</h3> </div> </a> </div> <div id="two"></div> 

Answer 1

增加height:100%添加到service-items ，還添加

*{box-sizing:border-box;}到您的CSS文件

這是必需的，因為邊框

在元素的總寬度和高度中包括填充和邊框：

 *{box-sizing:border-box;} #one { background-color: #fff; height: 50%; width: 100%; } #two { background-color: #fff; height: 50%; width: 100%; } body, html { height: 100%; background-color: #000; } * { margin: 0; } .services { background: green; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; padding: 0 50px; color: #fff; } .services-items { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; background-color: rgba(0, 0, 0, 0.5); padding: 50px; height: 100%; text-align: center; position: relative; } .services-items h2 { margin: 20px 0; } .services-items p { line-height: 150%; } 

 <div id="one"></div> <div class="services"> <a> <div class="services-items"> <h2>Service 1</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique amet atque recusandae, consequatur facere nesciunt. Placeat nostrum, aliquam suscipit. Tempore obcaecati sed eligendi cumque! Quo et, quod veniam nulla maxime quos voluptas harum odio ipsam libero repellat dicta hic. Eos!</p> </div> </a> <a> <div class="services-items"> <h2>Service 2</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis pariatur vitae illum, alias suscipit ipsa soluta optio eos officia ducimus incidunt maiores molestias velit, delectus libero, ad eaque repellendus. Rerum, rem doloribus, cupiditate quos ex hic porro distinctio beatae. Vero, harum, autem. Quo itaque assumenda, mollitia et repellendus vel porro.</p> </div> </a> <a> <div class="services-items"> <h2>Service 3</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium error et animi, porro omnis facilis voluptatum vel voluptatem pariatur quasi debitis in ratione voluptas eos ex maiores adipisci, nesciunt aliquid alias maxime accusamus veritatis? Dignissimos, perspiciatis deserunt numquam animi rerum aliquid mollitia, blanditiis dolore architecto.</p> <h3>Jos haluat tämän palvelun/tuotteen, ota yhteyttä ja kerro viestissä.</h3> </div> </a> </div> <div id="two"></div> 

Answer 2

您的代碼的另一種解決方案

.services a {
   display: flex;
   align-self: stretch; 
}