回答編集履歴

1

コード追加

2020/12/10 03:57

投稿

hatena19
hatena19

スコア34073

test CHANGED
@@ -91,3 +91,101 @@
91
91
 
92
92
 
93
93
  right が効かないので left にしてみたら効きました。理由はよく分かりません。
94
+
95
+
96
+
97
+ 追記
98
+
99
+ ---
100
+
101
+ 下記でご希望のレイアウトになりませんか。
102
+
103
+ ```html
104
+
105
+ <div class="container">
106
+
107
+ <div class="box-top">追尾1</div>
108
+
109
+ <div class="box-content">
110
+
111
+ test<br>test<br>test<br>test<br>test<br>
112
+
113
+ test<br>test<br>test<br>test<br>test<br>
114
+
115
+ test<br>test<br>test<br>test<br>test<br>
116
+
117
+ test<br>test<br>test<br>test<br>test<br>
118
+
119
+ test<br>test<br>test<br>test<br>test<br>
120
+
121
+ test<br>test<br>test<br>test<br>test<br>
122
+
123
+ test<br>test<br>test<br>test<br>test<br>
124
+
125
+ test<br>test
126
+
127
+ </div>
128
+
129
+ <div class="box-bottom">追尾2</div>
130
+
131
+ </div>
132
+
133
+ ```
134
+
135
+ ```css
136
+
137
+ body,html{
138
+
139
+ height:100%;
140
+
141
+ }
142
+
143
+ .container {
144
+
145
+ position:relative;
146
+
147
+ width:50%;
148
+
149
+ height:50%;
150
+
151
+ }
152
+
153
+ .box-content {
154
+
155
+ height:100%;
156
+
157
+ overflow-y:scroll;
158
+
159
+ -webkit-overflow-scrolling: touch;
160
+
161
+ }
162
+
163
+ .box-top {
164
+
165
+ width: 10%;
166
+
167
+ height: 5%;
168
+
169
+ position: absolute;
170
+
171
+ top: 10%;
172
+
173
+ right: 20%;
174
+
175
+ }
176
+
177
+ .box-bottom {
178
+
179
+ width: 10%;
180
+
181
+ height: 5%;
182
+
183
+ position: absolute;
184
+
185
+ bottom: 10%;
186
+
187
+ right: 20%;
188
+
189
+ }
190
+
191
+ ```