If you resize the browser there is a gap between the bottom of the .services-items
and the parent div ( .services
). Here's the code:
#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>
Add height:100%
to service-items
and also add
*{box-sizing:border-box;}
to your css file
This is require because border-box
Include padding and border in the element's total width and height:
*{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>
One more solution for your code
.services a {
display: flex;
align-self: stretch;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.