我写了这么一段代码。我写这段代码，让.vertical_catch p:after从元素绝对放置的位置到页面内容存在的底部
body {
margin: 0;
}
.hero {
height: 100vh;
position: relative;
margin: 0 auto;
overflow: hidden;
background: #000;
}
.vertical_catch {
position: absolute;
top: 58%;
left: 4%;
height: 100%;
}
.vertical_catch p {
font-size: 1.8vw;
color: #ffffff;
writing-mode: vertical-rl;
height: 100%;
}
.vertical_catch p:after {
z-index: 50;
margin: 1em 0;
content: "";
position: absolute;
left: 50%;
height: 100%; /* I want to get 100% height of page content */
display: inline-block;
width: 1.7px;
transform: translateX(-50%);
background-color: #fff;
}
.box {
width: 100%;
}
.minibox {
height: 100vh;
padding: 150px;
background-color: #333;
}
h1 {
margin: 40px 0px;
color: #fff;
text-align: center;
}
.content {
margin: 0 auto;
width: 50%;
color: #fff;
overflow-wrap: break-word;
}<body>
<div class="hero"></div>
<div class="vertical_catch">
<p>TEXTTEXTTEXTTEXT</p>
</div>
<div class="box">
<section class="minibox">
<h1>heading1</h1>
<section class="content">
<p>texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext
</p>
</section>
</section>
</div>
<div class="box">
<section class="minibox">
<h1>heading2</h1>
<section class="content">
<p>texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext
</p>
</section>
</section>
</div>
</body>但是 height: 100% 只能达到 100vh，并且无法将边框延伸到内容的底部。
根据开发者工具验证，在html和body中，高度包含了所有页面内容，但是绝对排列的元素获取不到高度。高度:100% 仅适用于 100vh。
如何扩展边界？
最佳答案
您正在为 ::after 元素设置 100% 高度；它将占据其主要元素 p 的整个高度。考虑如下编辑:
body {
margin: 0;
height: auto;
position: relative;
}
.hero {
height: 100vh;
position: relative;
margin: 0 auto;
overflow: hidden;
background: #000;
}
.vertical_catch {
position: absolute;
top: 10%;
left: 4%;
height: 90%;
}
.vertical_catch p {
font-size: 1.8vw;
color: #ffffff;
writing-mode: vertical-rl;
height: 100%;
}
.vertical_catch p:after {
z-index: 50;
margin: 1em 0;
content: "";
position: absolute;
left: 50%;
height: 80%;
display: inline-block;
width: 1.7px;
transform: translateX(-50%);
background-color: #fff;
}
.box {
width: 100%;
}
.minibox {
height: 100vh;
box-sizing: border-box;
padding: 150px;
background-color: #333;
}
h1 {
margin: 40px 0px;
color: #fff;
text-align: center;
}
.content {
margin: 0 auto;
width: 50%;
color: #fff;
overflow-wrap: break-word;
}<body>
<div class="hero"></div>
<div class="vertical_catch">
<p>TEXTTEXTTEXTTEXT</p>
</div>
<div class="box">
<section class="minibox">
<h1>heading1</h1>
<section class="content">
<p>texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext
</p>
</section>
</section>
</div>
<div class="box">
<section class="minibox">
<h1>heading2</h1>
<section class="content">
<p>texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext
</p>
</section>
</section>
</div>
</body>关于css - 如何扩展绝对放置的伪元素，直到页面内容得到最佳？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55796859/