Как расширить псевдоэлемент, размещенный абсолютно до тех пор, пока содержание страницы не станет лучшим? - PullRequest
Новая
       33

Как расширить псевдоэлемент, размещенный абсолютно до тех пор, пока содержание страницы не станет лучшим?

0 голосов
/ 22 апреля 2019

Я написал такой код. Я пишу этот код так, чтобы .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.

Как мне продлить границу?

Ответы [ 2 ]

0 голосов
/ 06 мая 2019 

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>
0 голосов
/ 22 апреля 2019

Вы устанавливаете 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>
...