覆盖 100% 主体的伪元素与父元素不匹配

Question

我试图让一个伪元素覆盖 100% body/page 而不是从它所基于的父级获取高度。

所以我有类似的东西：

   <body>
       <accordion></accordion>
       <div> Lots of content that extends a bit </div>
   </body>

你可以看到这个 jsfiddle 作为我的意思的例子。

基本上，我希望该阴影延伸到页面底部，而不是仅仅抓住父项的高度。

我正在做一个 angular 项目，所以这就是为什么我不太喜欢标记，我需要绝对定位的父项。

Answer 1

看看fiddle这是你想要的吗？ https://jsfiddle.net/DIRTY_SMITH/cvrhxm7p/8/

将 height: 100%; 更改为 height: 100vh;

如果您不希望页面滚动，请使用此 height: calc(100vh - 89px); 它会去掉你的 header.

的高度

参见 fiddle https://jsfiddle.net/DIRTY_SMITH/cvrhxm7p/9/

.accordion:after {
        content: '';
        position: absolute;
        background: rgba(0,0,0,.6);
        height: calc(100vh - 89px);
        width: 100%;
        left: 0;
        top: 89px;
        visibility: visible;
        z-index: 10;
    }

Answer 2

简单的解决方法就是将 accordion-after 的高度设置为 'px' 度量而不是 '%'，就像这样

https://jsfiddle.net/cvrhxm7p/7/

html {
    font-size: 100%;
}
* {
    margin: 0;
    padding: 0;
}
body {
    background-color: #F9F9F9;
    position: relative;
}
.container {
    padding: 10px;
    height: 100%;
}
.accordion {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 89px;
    background:red;
}
.accordion:after {
    content: '';
    position: absolute;
    background: rgba(0,0,0,.6);
    height: 200px;
    width: 100%;
    left: 0;
    top: 89px;
    visibility: visible;
    z-index: 10;
}

Answer 3

使用下面的CSS阴影来覆盖整个页面。

 html {
  font-size: 100%;
 }
 * {
  margin: 0;
  padding: 0;
 }
 body {
  background-color: #F9F9F9;
  height: 100%;
  position: relative;
 }
 .container {
  
 }
 .accordion {
  left: 0;
  top: 0;
  width: 100%;
  height: 88px;
  background:red;
 }
 .accordion:after {
  content: '';
  position: absolute;
  background: rgba(0,0,0,.6);
  height: 100%;
  width: 100%;
  left: 0;
  top: 89px;
  visibility: visible;
  z-index: 10;
        overflow:visible;
 }

我对您的代码所做的更改是删除手风琴中的 position:absolute。同时删除填充或容器。

Answer 4

您可以使用 height: 100vh 而不是 100%，（vh 代表视口高度，您可以阅读有关这些单位的更多信息 here )（参见片段 1）

片段 1

 html {
   font-size: 100%;
 }
 * {
   margin: 0;
   padding: 0;
 }
 body {
   background-color: #F9F9F9;
   height: 100%;
   position: relative;
 }
 .container {
   padding: 10px;
 }
 .accordion {
   position: absolute;
   left: 0;
   top: 0;
   width: 100%;
   height: 88px;
   background: red;
 }
 .accordion:after {
   content: '';
   position: absolute;
   background: rgba(0, 0, 0, .6);
   width: 100%;
   height: 100vh;
   left: 0;
   top: 89px;
   visibility: visible;
   z-index: 10;
 }

<body>
  <div class="container">
    <div class="accordion"></div>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius ipsam voluptas neque assumenda, saepe totam quis similique, nemo minima sequi, illum, officia veritatis provident soluta laborum esse alias dignissimos officiis.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius ipsam voluptas neque assumenda, saepe totam quis similique, nemo minima sequi, illum, officia veritatis provident soluta laborum esse alias dignissimos officiis.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius ipsam voluptas neque assumenda, saepe totam quis similique, nemo minima sequi, illum, officia veritatis provident soluta laborum esse alias dignissimos officiis.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius ipsam voluptas neque assumenda, saepe totam quis similique, nemo minima sequi, illum, officia veritatis provident soluta laborum esse alias dignissimos officiis.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius ipsam voluptas neque assumenda, saepe totam quis similique, nemo minima sequi, illum, officia veritatis provident soluta laborum esse alias dignissimos officiis.</p>
  </div>
</body>

覆盖 100% 主体的伪元素与父元素不匹配

Pseudo element to cover 100% of body not match parent element

css

pseudo-element

pseudo-class