Question

我写了这样的代码。我编写这段代码是为了使.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>

但是，高度：100％只能达到100vh，并且不能将边框扩展到内容的底部。

根据开发人员工具验证，在html和正文中，高度包括所有页面内容，但绝对排列的元素无法获得高度。高度：100％只能达到100vh。

如何扩展边界？

Answer 1

您正在为100%元素设置::after高度；它将占据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>

Answer 2

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: calc(100% - 388px);
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>

如何扩展绝对放置的伪元素，直到页面内容获得最佳效果？

2 个答案: