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

【问题标题】：Pseudo element to cover 100% of body not match parent element覆盖 100% 主体的伪元素与父元素不匹配
【发布时间】：2015-08-20 22:46:37
【问题描述】：

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

所以我有类似的东西：

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

您可以查看jsfiddle 了解我的意思的示例。

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

我正在做一个有角度的项目，所以这就是为什么我很少被标记所困扰，我需要将父项定位为绝对。

【问题讨论】：

标签： css pseudo-element pseudo-class

【解决方案1】：

使用以下 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。同时删除填充或容器。

【讨论】：

就是这样。非常感谢！

【解决方案2】：

简单的解决方法是将手风琴的高度设置为'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;
}

【讨论】：

【解决方案3】：

看小提琴这是你想要的吗？ 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;
    }

【讨论】：

【解决方案4】：

您可以使用height: 100vh 代替100%，（vh 代表视口高度，您可以阅读有关这些单位的更多信息here）（参见 sn-p 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>

【讨论】：