teratail
回答率
85.31%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問CSSのみで高さを自動調整する方法について【説明図 追加】

編集履歴

質問編集履歴

4

回答が得られなかったため、説明と図を全て変更。

2016/06/04 02:58

投稿

swallowtail
swallowtail

スコア60

test CHANGED
@@ -1 +1 @@
1
- CSSのみで高さを自動調整する方法について
1
+ CSSのみで高さを自動調整する方法について【説明図 追加】
test CHANGED
@@ -1,14 +1,24 @@
1
- ウィンドウ幅に対応した高さ調節についてなのですが、下記のような組み方をした時にleftBoxとrightBoxの高さをスマホやタブレットなどブラウザのサイズが変わっても常に揃えたいのですが、今まではJavaScriptで高さを計算して出力していましたが、これをなんとかCSSのみで完結できないものでしょうか？
1
+ 説明が悪すぎたのか回答が得られなかった為、再度説明を書き直して図も入れました。ご回答頂けたら嬉しいです。
2
2
 
3
- (HTML/CSS 共に必要な部分以外は一部割愛しております。)
3
+ bootstrap 3 + sassを用いて全体の構成が図-1になるような組み方をしています。
4
+
5
+
6
+
7
+ ![イメージ説明](756b576b127ddc7d2714b4eddff0a91d.jpeg)
8
+
9
+ 問題は赤枠の中なのですが、rightBoxのoverflowを有効かつブラウザ幅によってheightの値が可変する仕様であるleftBoxの高さに揃えるため下記のような組み方をした場合、図-2・図-3で説明しているように、ブラウザサイズを狭めるとrightBoxは高さが固定されているためleftBoxの高さを超えて表示されてしまいます。これをブラウザ幅を変更した場合でもrightBoxの高さをleftBoxの高さにリアルタイムに揃える事はCSSのみで可能でしょうか？
10
+
11
+
12
+
13
+ ![イメージ説明](738ce69a8e0950590514ac2202d422f7.jpeg)
14
+
15
+ ![イメージ説明](ed3fc5d99639731601fa6d019b145c1f.jpeg)
4
16
 
5
17
  ```html
6
18
 
7
- <div class="BOX">
19
+ <div class="row BOX">
8
20
 
9
- <div class="leftBox">
21
+ <div class="col-sm-6 leftBox">
10
-
11
- <h3>H3_txt</h3>
12
22
 
13
23
  <div class="list">
14
24
 
@@ -40,9 +50,7 @@
40
50
 
41
51
  </div>
42
52
 
43
- <div class="rightBox">
53
+ <div class="col-sm-6 rightBox">
44
-
45
- <h3>H3_txt</h3>
46
54
 
47
55
  <div class="inner">
48
56
 
@@ -62,7 +70,7 @@
62
70
 
63
71
  </div>
64
72
 
65
- <div class="wrap">
73
+ <div class="clearfix wrap">
66
74
 
67
75
  <div class="left">
68
76
 
@@ -78,11 +86,11 @@
78
86
 
79
87
  </div>
80
88
 
81
- ・
89
+ ・
82
90
 
83
- ・
91
+ ・
84
92
 
85
- ・
93
+ ・
86
94
 
87
95
  </div>
88
96
 
@@ -98,56 +106,70 @@
98
106
 
99
107
  width: 100%;
100
108
 
101
- }
102
109
 
103
- .leftBox {
104
110
 
105
- width: 50%;
111
+ .leftBox,
106
112
 
107
- }
113
+ .rightBox {
108
114
 
109
- .rightBox {
115
+ width: 50%;
110
116
 
111
- width: 50%;
117
+ }
112
118
 
113
- }
114
119
 
115
- .BOX .list {
116
120
 
117
- height: 100px;
121
+ .leftBox {
118
122
 
119
- overflow: auto;
123
+ .list {
120
124
 
121
- }
125
+ height: 100px;
122
126
 
123
- .BOX .leftBox .imageBox img {
127
+ overflow: auto;
124
128
 
125
- width: 100%;
129
+ }
126
130
 
127
- /* 元の 幅/高さ を 500px/100px と仮定しています */
128
131
 
129
- }
130
132
 
131
- .rightBox .inner {
133
+ img {
132
134
 
133
- height: 400px;
135
+ width: 100%;
134
136
 
135
- overflow: auto;
137
+ /* 元の 幅/高さ を 500px/100px と仮定しています */
136
138
 
137
- }
139
+ }
138
140
 
139
- .rightBox .inner .wrap {
141
+ }
140
142
 
143
+
144
+
145
+ .rightBox {
146
+
147
+ .inner {
148
+
149
+ widrh: 100%;
150
+
151
+ height: 400px;
152
+
153
+ overflow: auto;
154
+
155
+
156
+
157
+ .wrap {
158
+
141
- height: 100px;
159
+ height: 100px;
160
+
161
+ }
162
+
163
+
164
+
165
+ }
166
+
167
+
168
+
169
+ }
170
+
171
+
142
172
 
143
173
  }
144
174
 
145
175
  ```
146
-
147
-
148
-
149
-
150
-
151
- 説明がわかりにくかったのでイメージを追加しました。
152
-
153
- ![イメージ説明](308a3c28dab60c072e78492fd0b03aa6.jpeg)

3

回答が無いので再度更新

2016/06/04 02:58

投稿

swallowtail
swallowtail

スコア60

test CHANGED
File without changes
test CHANGED
File without changes

2

\.innerのheightが抜けていたので修正

2016/06/03 14:25

投稿

swallowtail
swallowtail

スコア60

test CHANGED
File without changes
test CHANGED
@@ -130,6 +130,8 @@
130
130
 
131
131
  .rightBox .inner {
132
132
 
133
+ height: 400px;
134
+
133
135
  overflow: auto;
134
136
 
135
137
  }

1

イメージを追加しました。

2016/05/31 15:06

投稿

swallowtail
swallowtail

スコア60

test CHANGED
File without changes
test CHANGED
@@ -140,6 +140,12 @@
140
140
 
141
141
  }
142
142
 
143
- コード
143
+ ```
144
144
 
145
+
146
+
147
+
148
+
145
- ```
149
+ 説明がわかりにくかったのでイメージを追加しました。
150
+
151
+ ![イメージ説明](308a3c28dab60c072e78492fd0b03aa6.jpeg)