如何扩展伪元素绝对放置直到页面内容达到最佳？

问题描述 投票：0回答：2

我写了这样一个代码。我编写这段代码，以便.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和body中，高度包括所有页面内容，但绝对排列的元素无法获得高度。高度：100％仅能达到100vh。

我该如何扩展边界？

css css-position
2个回答
0
投票

你为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>
0
投票

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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.