JavaScript+CSS heightの指定

前提・実現したいこと

１のコードだと高さを変更押すとその文字に合わせて青い部分の高さが変わります

２のコードにすると青い部分からはみ出た形になります

１と同じように２を表示させるにはどうしたらいいでしょうか？

１

<style>
body,html{
  height:100%;
}

</style>

<div style="height:30%">
<div style="height:25%;background:red;"></div>
<div id="d" style="height:30%;background:blue"></div>
<div style="height:25%;background:red"></div>
</div>

<input type="button" value="高さ変更" onclick="change()">

<script>
function change(){
d.innerHTML="aaa<br>aaa<br>aaa<br>aaa<br>aaa<br>aaa<br>aaa<br>aaa<br>aaa<br>aaa<br>";
d.style.height="auto";
}
</script>

該当のソースコード

２

<style>
body,html{
  height:100%;
}

</style>

<div style="height:30%">
<div style="height:25%;background:red;"></div>
<div id="d" style="height:30%;background:blue"></div>
<div style="height:25%;background:red"></div>
</div>

<div style="height:30%">
<div style="height:25%;background:red;"></div>
<div style="height:30%;background:blue"></div>
<div style="height:25%;background:red"></div>
</div>

<input type="button" value="高さ変更" onclick="change()">

<script>
function change(){
d.innerHTML="aaa<br>aaa<br>aaa<br>aaa<br>aaa<br>aaa<br>aaa<br>aaa<br>aaa<br>aaa<br>";
d.style.height="auto";
}
</script>

yambejp

2021/10/21 00:13

2の場合、下の段落(?)を下げたいのでしょうか？

yukinmitu

2021/10/21 00:18 編集

aaaaaaaの部分が青から赤い部分にはみ出ない、青の部分にheight:autoがかかった状態にしたいです

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

回答2件

この部分が下がって見える形で表示したいのですがどうしたらいいんでしょうか？

親要素の高さも auto にすれば中身の高さに合わせて拡大します。
ただし、子要素の高さを%で指定すると高さが0になってしまいますので、
vh単位で高さを指定すればどうでしょう。

html
1<div id="wrapper" style="height:auto;margin-bottom:6vh;">
2<div style="height:7.5vh;background:red;"></div>
3<div id="d" style="height:9vh;background:blue"></div>
4<div style="height:7.5vh;background:red;"></div>
5</div>

css
1body,html{
2  height:100vh;
3}

投稿2021/10/21 00:47

hatena19

総合スコア34075

ベストアンサー

aaaaaaaの部分が青から赤い部分にはみ出ない

同じ色をつかっているからわかりにくいですがはみでてませんよ。
relativeをしていしてあげるとわかりやすいかもしれません

sciript
1<style>
2body,html{
3  height:100%;
4}
5</style>
6<div style="height:30%;position:relative">
7<div style="height:25%;background:red;"></div>
8<div id="d" style="height:30%;background:blue"></div>
9<div style="height:25%;background:red"></div>
10</div>
11<div style="height:30%;">
12<div style="height:25%;background:yellow;"></div>
13<div style="height:30%;background:lime"></div>
14<div style="height:25%;background:aqua"></div>
15</div>
16<input type="button" value="高さ変更" onclick="change()">
17<script>
18function change(){
19d.innerHTML="aaa<br>aaa<br>aaa<br>aaa<br>aaa<br>aaa<br>aaa<br>aaa<br>aaa<br>aaa<br>";
20d.style.height="auto";
21}
22</script>

あとは、どうしたいのか次第です
下段落を下にずらすならこんな感じ？

HTML
1<script>
2window.addEventListener('DOMContentLoaded', ()=>{
3  document.querySelectorAll('div').forEach(x=>{
4    x.style.height=x.offsetHeight+"px";
5  });
6});
7</script>
8<style>
9body,html{
10  height:100%;
11}
12</style>
13<div style="height:30%;">
14<div style="height:25%;background:red;"></div>
15<div id="d" style="height:30%;background:blue"></div>
16<div style="height:25%;background:red"></div>
17</div>
18<div style="height:30%;">
19<div style="height:25%;background:yellow;"></div>
20<div style="height:30%;background:lime"></div>
21<div style="height:25%;background:aqua"></div>
22</div>
23<input type="button" value="高さ変更" onclick="change()">
24<script>
25function change(){
26d.innerHTML="aaa<br>aaa<br>aaa<br>aaa<br>aaa<br>aaa<br>aaa<br>aaa<br>aaa<br>aaa<br>";
27d.style.height="auto";
28d.parentNode.style.height="auto";
29}
30</script>

投稿2021/10/21 00:22

編集2021/10/21 00:59

yambejp

総合スコア116724

yukinmitu

2021/10/21 00:27

relativeにしたところはみでないのが確認できました上記のソースで高さ変更押したら <div style="height:30%;"> <div style="height:25%;background:yellow;"></div> <div style="height:30%;background:lime"></div> <div style="height:25%;background:aqua"></div> </div> この部分が下がって見える形で表示したいのですがどうしたらいいんでしょうか？（最初からこの形が実現したかった形です）