Question

在下面的网站上，我有一个子div完全位于其父div的底部 - 英雄形象。

http://helpthemgrow.staging.wpengine.com/

向子div添加填充会导致它突破父div

这是我的代码：

<div class="home-hero">
    <div class="home-hero-img">
        <div class="wrap">
            <div class="home-image widget-area">
                <section id="media_image-2" class="widget widget_media_image">
                <div class="widget-wrap">
                    <img width="200" height="300" src="http://helpthemgrow.staging.wpengine.com/wp-content/uploads/2018/01/help-tehm-grow-book-cover-200x300.jpg" class="image wp-image-43  attachment-medium size-medium" alt="" style="max-width: 100%; height: auto;" srcset="http://helpthemgrow.staging.wpengine.com/wp-content/uploads/2018/01/help-tehm-grow-book-cover-200x300.jpg 200w, http://helpthemgrow.staging.wpengine.com/wp-content/uploads/2018/01/help-tehm-grow-book-cover.jpg 250w" sizes="(max-width: 200px) 100vw, 200px">
                </div>
                </section>
            </div>
        </div><!-- end wrap -->
    </div><!-- end home-hero-img -->
    <div class="home-hero-cta">
        <div class="wrap">
            <div class="three-fourths first">
                <div class="home-hero-cta-text">Careers are developed one conversation at a time – over time.</div>
            </div>
            <div class="one-fourth">
                <a class="button" href="/book/">Learn more</a>
            </div>
        </div><!-- end wrap -->
    </div><!-- end home-hero-cta -->
</div><!-- end home-hero -->

这是我的CSS：

.home-hero {
    background-image: url('/wp-content/uploads/2018/02/htg-hero-slide-one.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    padding: 100px 0 150px 0;
    color: #fff;
    margin: 0;
    position:relative;
}
.home-hero-cta {
    height: 50px;
    width: 100%;
    background: rgba(0,0,0,0.5);
    position: absolute;
    bottom: 0;
}

.home-hero-cta .wrap {
    padding: 20px 0;
}   

.home-hero-cta-text {
    font-size: 25px;
}

我做错了什么？

Answer 1

删除home-hero-cta的设置高度，这样可以解决您的问题。

将填充添加到父级扩展父级之外的绝对定位的div中

1 个答案: