html - CSS - 仅当另一个 div 可见时才添加填充

Question

我有以下 html..

.wrapper {
  background:wheat;
}

.woocommerce-store-notice, p.demo_store {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: 0;
    width: 100%;
    font-size: 1em;
    padding: 1em 0;
    text-align: center;
    background-color: #a46497;
    color: #fff;
    z-index: 99998;
    box-shadow: 0 1px 1em rgba(0,0,0,.2);
}

<div class="wrapper">
This is my content
</div>
<p class="woocommerce-store-notice demo_store" style="display: block;">DEMO NOTICE CLICK HERE <a href="#" class="woocommerce-store-notice__dismiss-link">Dismiss</a></p>

通知覆盖了我的内容，我知道我可以添加一些填充来解决这个问题，但我如何添加它以便仅在 .woocommerce-store-notice 可见时才应用填充？

Answer 1

您可以使用 1 行 jQuery 来解决它。

在代码中，$(".woocommerce-store-notice").outerHeight() 获取通知的高度并将该值应用于 margin-top .wrapper

的

$(".wrapper").css({"margin-top":$(".woocommerce-store-notice").outerHeight()})

.wrapper {
    background:wheat;
}

.woocommerce-store-notice, p.demo_store {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: 0;
    width: 100%;
    font-size: 1em;
    padding: 1em 0;
    text-align: center;
    background-color: #a46497;
    color: #fff;
    z-index: 99998;
    box-shadow: 0 1px 1em rgba(0,0,0,.2);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="woocommerce-store-notice demo_store" style="display: block;">DEMO NOTICE CLICK HERE <a href="#" class="woocommerce-store-notice__dismiss-link">Dismiss</a></p>
<div class="wrapper">
This is my content
</div>