問題点

現在サイト作成をしています。
疑似要素afterで指定した縦線『#vertical_catch p:after』（の縦線）を
サイト最下部までに延ばしたいのですが…

height: 350px;
で疑似要素を伸ばしていますが、px指定では無くサイト最下部まで伸ばす指定を
探しています。

適切な指定方法が知りたいです(px指定だとなんとなくカッコ悪い気がしました)
よろしくお願いします。

html
1<body>
2
3<div id="hero">
4</div>
5
6<div id="vertical_catch">
7<p>HELLO,WORLD TEXT</p>
8</div>
9
10<div id="box">
11<section class="minibox">
12 <h1>サンプル</h1>
13<section class="kana">
14 <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト<
15</section>
16</div>
17 
18  
19
20
21  
22  
23    <div id="box">
24<section class="minibox">
25 <h1>サンプル</h1>
26<section class="kana">
27 <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト<
28</section>
29</div>
30
31</body>

CSS
1main {
2  display: block;
3}
4
5#hero{
6  height: 100vh;
7  position: relative;
8  margin: 0 auto;
9  overflow: hidden;
10  background: #000;
11}
12#hero #catch{
13  position: absolute;
14}
15#vertical_catch{
16    position: absolute;
17    top: 58%;
18    left: 4%;  
19}
20#vertical_catch p{
21    text-align: center;
22    font-size: 1.8vw;
23    color: #ffffff;
24    letter-spacing: 0.05em;
25    -webkit-writing-mode: vertical-rl;
26    -ms-writing-mode: tb-rl;
27    writing-mode: vertical-rl;
28}
29#vertical_catch p:after{
30    z-index: 600;
31    margin: 1em 0;
32    content: '';
33    position: absolute;
34    left: 50%;
35    display: inline-block;
36    width: 1.7px;
37    height: 350px;
38    -webkit-transform: translateX(-50%);
39    transform: translateX(-50%);
40    background-color: #fff;
41}
42
43
44
45#box{
46  width:100%;
47}
48.minibox{
49  height: 100vh;
50  padding:150px;
51  background-color: #333;
52}
53.minibox h1{
54  font-family: 'Noto Serif JP', serif;
55  font-size: 53.3px;
56  margin: 40px 0px;
57  color: #fff;
58  text-align: center;
59}
60section .kana{
61  margin: 0 auto;
62  width: 50%;
63  color: #fff;
64  font-size: 15px;
65  line-height: 1.8;
66  letter-spacing: 2.0px;
67}

m.ts10806

2019/04/22 12:20 編集

最下部とは、ブラウザ伸縮させたさいには可変でしょうか

退会済みユーザー

2019/04/22 12:28

追記ありがとうございます。 >最下部とは、ブラウザ伸縮させたさいには可変でしょうかいいえ、可変させるのではなく、『サイトの一番下まで始めから疑似要素の縦線を伸ばしたい（height:px;指定では無く）』です。

行動規範の内容に同意します

回答1件

ベストアンサー

vh単位を使えば親要素基準ではなく、viewport基準で高さを指定できますので、
vhを使う前提で調整するとできるのではないかと思います。
ただし、以前似たようなことをやった際、html要素とbody要素が高さ100%になってないと
途中で切れてしまったので、html,body{height:100%}は指定したほうがいいと思います。

あと、疑似要素のtop位置が0なら単純に100vhとすれば良いですが、
途中から始まって残りのサイト最下部まで、といったことをやりたい場合は
CSSだけでは指定できない可能性があります。

開始位置が固定pxの場合、例えば上から200pxとかなら、calc(100vh - 200px)とすれば良いですが、
開始位置が固定できない場合はJSで動的にサイズを調整してやらないと厳しいかなと思います。

詳細にテストとかしたわけではないですが、参考までに。

投稿2019/04/22 14:18