Question

我正在尝试获取一个伪元素来覆盖100％的正文/页面，而不是从它所基于的父级获取高度。

所以我有类似的东西：

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

您可以看到这个jsfiddle的例子。

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

我正在开展一个有角度的项目，这就是为什么我对标记感到困惑，我需要将父项置于绝对位置。

Answer 1

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

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

如果您不希望页面滚动，请使用此height: calc(100vh - 89px); 它将取出标题的高度。

请参阅小提琴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将阴影覆盖所有页面。

＆＃13;

	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;
	}

＆＃13;

我对您的代码所做的更改是删除位置：手风琴绝对。还要删除填充或容器。

Answer 4

您可以使用height: 100vh代替100%，（ vh 代表视口高度，您可以阅读有关这些单元的更多信息here）（请参阅代码段1 ）

SNIPPET 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％身体的伪元素与父元素

4 个答案: