実現したいこと

HTML,CSS,JSでMarkdown記法からHTMLを生成できるシステムを作ろうと思っています。
textareaに入力→プレビュー画面に表示、みたいな感じです。

調べたところjsでそういう事ができる物もあるそうなのですが、学習のために使わないつもりです。

発生した問題

入力画面とプレビュー画面を左右に分割しているのですが、この時floatを使ったせいかtextareaの高さがおかしく高さをオーバーした判定が画面より下になっています。

要約「スクロールバーが出てくる行が画面より下になっている」

一応stackoverflowなどを見てみましたが、解決策を見つけれませんでした。

HTML

html
1<input type="text" id="title" placeholder="タイトル">
2<div class="input">
3  <h1><i class="fas fa-pen-alt"></i>入力</h1>
4  <textarea name="" id="" cols="30" rows="10"></textarea>
5</div>
6<div class="preview">
7  <h1><i class="far fa-eye"></i>プレビュー</h1>
8  <div id="viewarea"></div>
9</div>

CSS

css
1/* 関係すると思われるコード */
2/* ここから */
3.input {
4  width: 50%;
5  height: 50%;
6  float: left;
7  border: solid 1px #ccc;
8  position: fixed;
9  border-right: none;
10}
11.preview {
12  width: 50%;
13  height: 50%;
14  float: right;
15  position: fixed;
16  left: 50%;
17  box-sizing: border-box;
18  border: solid 1px #ccc;
19  border-right: none;
20}
21textarea {
22  width: 100%;
23  height: 100%;
24  box-sizing: border-box;
25  border: none;
26  font-size: 16px;
27  padding: 10px;
28  font-family: initial;
29  clear: both;
30  border-bottom: solid 1px #ccc;
31  resize: none;
32}
33/* ここまで */
34#viewarea {
35  overflow-x: hidden;
36  overflow-y: scroll;
37}
38#title {
39  width: 100%;
40  box-sizing: border-box;
41  height: 50px;
42  border: solid 1px #ccc;
43  font-size: 30px;
44  padding: 10px;
45  border-radius: 5px;
46  margin: 20px 0px;
47  transition: 0.3s;
48}
49#title:focus {
50  outline: none;
51  border: solid 1px #0792b5;
52  transition: 0.3s;
53  box-shadow: 0px 0px 5px #0db1db;
54}
55h1 {
56  font-weight: normal;
57  text-align: center;
58  height: 20%;
59  border-bottom: solid 1px #ccc;
60}
61.input textarea:focus {
62  outline: none;
63}

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

回答2件

ベストアンサー

textarea の上位置がずれるのは、h1 のデフォルトの下マージンがはみ出て、その分textareaが下がってます。
なぜ、はみ出るかというと、マージンの相殺が原因です。

マージンの相殺 - CSS: カスケーディングスタイルシート | MDN

h1 のマージンを0に設定するとずれはなくなります。

また、textarea の高さが親エリアからはみ出るのは、Heightを100%に設定しているからです。
100%にすると親要素(div.input)の高さと同じになりますので。
100%から h1 の高さを引く必要があります。calcを使うといいでしょう。

あと、横並びに floatを使うのはもう時代遅れです。Flexbox を使いましょう。

もう迷わない！CSS Flexboxの使い方を徹底解説 | Web Design Trends

上記の点を考慮したサンプルが下記です。
HTMLは現状のままでCSSのみ修正しました。

css
1/* 関係すると思われるコード */
2/* ここから */
3body {
4  display: flex;
5  flex-wrap: wrap;
6  align-items:stretch;
7}
8
9.input {
10  box-sizing: border-box;
11  width: 50%;
12  height: Calc(100vh - 150px);
13  border: solid 1px #ccc;
14  border-right: none;
15}
16.preview {
17  width: 50%;
18  box-sizing: border-box;
19  border: solid 1px #ccc;
20}
21textarea {
22  width: 100%;
23  height: Calc(100% - 70px);
24  box-sizing: border-box;
25  border: none;
26  font-size: 16px;
27  padding: 10px;
28  font-family: initial;
29  border-bottom: solid 1px #ccc;
30  resize: none;
31}
32/* ここまで */
33#viewarea {
34  overflow-x: hidden;
35  overflow-y: scroll;
36  width: 100%;
37  height: Calc(100% - 70px);
38  box-sizing: border-box;
39}
40#title {
41  width: 100%;
42  box-sizing: border-box;
43  height: 50px;
44  border: solid 1px #ccc;
45  font-size: 30px;
46  padding: 10px;
47  border-radius: 5px;
48  margin: 20px 0px;
49  transition: 0.3s;
50}
51#title:focus {
52  outline: none;
53  border: solid 1px #0792b5;
54  transition: 0.3s;
55  box-shadow: 0px 0px 5px #0db1db;
56}
57h1 {
58  font-weight: normal;
59  text-align: center;
60  height: 70px;
61  line-height: 70px;
62  margin: 0;
63  border-bottom: solid 1px #ccc;
64}
65.input textarea:focus {
66  outline: none;
67}

Codepenサンプル

投稿2020/08/31 13:30

hatena19

総合スコア34075

2020/09/01 11:06 編集

確かにfloatは下の要素が重なってしまうので不便だと思っていたんですけどdisplayで上手く並べれなかったので仕方なく使っていました。 calcに関しては初めて知りました。笑ご丁寧にcodepenまでありがとうございます！教えていただいたサイトを見る限り並べ方って色々あるんですね。情報感謝します

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

とりあえずこんな感じでしょうか?
H1から下の部分の高さを決め打ちにしてみました.
高さの基準を作るためにdivとclassを追加してます.

height:100%ってのは厄介ですね.要素の種類によっては最大まで広がったり0pxになったりします.

レイアウトを検討する際は,開発者ツールを活用して,「このHeightってどこからの高さか?」を確認したほうが良さそうです.

html
1<input type="text" id="title" placeholder="タイトル">
2<div class="input">
3  <div class="header">
4    <h1><i class="fas fa-pen-alt"></i>入力
5</h1>
6  </div>
7  <div class="content">
8  <textarea name="" id="" cols="30" rows="10"></textarea>  
9  </div>
10  
11</div>
12<div class="preview">
13  <div class="header">
14  <h1><i class="far fa-eye"></i>プレビュー</h1>  
15  </div>
16  <div class="content">
17  <div id="viewarea"></div>  
18  </div>
19  
20</div>

css
1
2/* 関係すると思われるコード */
3/* ここから */
4.input {
5  width: 50%;
6/*   height: 50%; */
7  float: left;
8  border: solid 1px #ccc;
9  position: fixed;
10  border-right: none;
11}
12.preview {
13  width: 50%;
14/*   height: 50%; */
15  float: right;
16  position: fixed;
17  left: 50%;
18  box-sizing: border-box;
19  border: solid 1px #ccc;
20  border-right: none;
21}
22textarea {
23  width: 100%;
24  height: 100%;
25  box-sizing: border-box;
26  border: none;
27  font-size: 16px;
28  padding: 10px;
29  font-family: initial;
30  clear: both;
31  border-bottom: solid 1px #ccc;
32  resize: none;
33}
34/* ここまで */
35#viewarea {
36  height:100%;
37  overflow-x: hidden;
38  overflow-y: scroll;
39}
40#title {
41  width: 100%;
42  box-sizing: border-box;
43  height: 50px;
44  border: solid 1px #ccc;
45  font-size: 30px;
46  padding: 10px;
47  border-radius: 5px;
48  margin: 20px 0px;
49  transition: 0.3s;
50}
51.header{height:70px;  border-bottom: solid 1px #ccc;
52}
53.content{height:700px;
54/* background-color:salmon; */
55}
56#title:focus {
57  outline: none;
58  border: solid 1px #0792b5;
59  transition: 0.3s;
60  box-shadow: 0px 0px 5px #0db1db;
61}
62h1 {
63  font-weight: normal;
64  text-align: center;
65}
66.input textarea:focus {
67  outline: none;
68}
69
70