Q&A
ご回答ありがとうございました。
position : absolute;を削除して再度実行したところ、ボタンが画面上部にすっ飛びました（笑）
前提・実現したいこと
現在、ホームページを作成しておりますが、htmlで表示させた場合に一行だけですと画面内に収まりますが、行数が増えていくとその下にあるボタンにかぶさってしまいます。
表示する行数が増えた場合に自動的に下に伸ばす方法はございますでしょうか？
発生している問題・エラーメッセージ
エラーメッセージはございません。 下記、コードに記載の結果、キャンセル、戻りのボタンが表にかぶってしまいます。
該当のソースコード
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4<meta charset="UTF-8"> 5<meta name="justsystems:HPB-Input-Mode" content="mode/flm; pagewidth=940; pageheight=1200"> 6<meta name="GENERATOR" content="JustSystems Homepage Builder Version 20.0.6.0 for Windows"> 7<title>タイトル</title> 8<link rel='stylesheet' href='/stylesheets/style.css' /> 9</head> 10<body bgcolor="#a9a9a9"> 11 <table border="1" height="252" width="818"> 12 <tr bgcolor="gray" style="color:white" height="50"> 13 <th height="42" size=10><b>注文日</b></th> 14 <th height="42" width="212">注文名/オプション<br>注文先・個数</th> 15 <th height="42" size=10>合計金額/合計個数</th> 16 <th height="42" size=20><b>注文者/入力者</b></th> 17 </tr> 18ーーーここでテーブルから複数行取得 19 <% for(var i in content) { %> 20 <tr bgcolor="lightyellow"> 21 <% var obj = content[i]; %> 22 <td align="center" height="47" size="10"> 23 <input type="text" name=注文日 size="10" style="background:white; color:#000000;" align="middle" value="注文日"> 24 </td> 25 <td align="center" height="47" width="10" style="white-space:nowrap;" > 26 <input type="text" name=注文名 size=4 style="background:white; color:#000000;" align="middle" value="注文名"> 27 <input type="text" name=オプション size=1 style="background:white; color:#000000;" align="middle" value="無"> 28 <input type="text" name=注文先 size=4 style="background:white; color:#000000;" align="middle" value="注文先"> 29 <input type="text" name=単価 size=1 style="background:white; color:#000000;" align="middle" value="単価"> 30 <input type="text" name=個数 size=1 style="background:white; color:#000000;" align="middle" value="個数"> 31 </td> 32 <td align="center" height="47" size=10> 33 <input type="text" name=合計金額 size=10 style="background:white; color:#000000;" align="middle" value="合計金額"> 34 <input type="text" name=合計数 size=10 style="background:white; color:#000000;" align="middle" value="合計数"> 35 </td> 36 <td align="center" height="47" size=20> 37 <input type="text" name=注文者 size=20 style="background:white; color:#000000;" align="middle" value="注文者"> 38 <input type="text" name=入力者 size=20 style="background:white; color:#000000;" align="middle" value="入力者"> 39 </td> 40 </tr> 41 <% } %> 42</table> 43 44<div style="width : 468px;height : 16px;top : 486px;left : 441px;position : absolute; z-index : 2; " id="Layer7" align="right"> 45 <input type="submit" value=" 結果 "> 46<input type="button" value=" キャンセル "> 47<input type="button" value=" 戻 り "> 48 </div> 49 </form> 50</div> 51</body> 52</html>
試したこと
ボタン表示の上部にある<div>の中身を整理。
補足情報（FW/ツールのバージョンなど）
ブラウザはIE11を使用しております。
回答4件
0
position : absolute;を設定して top : 486px; と固定位置を指定しているので当然そうなりますね。
テーブルの下に配置したいのなら、position : absolute;は外しましょう。
テーブルとの間に余白をとりたいなら margin-top で調整しましょう。
html
1<div style="width:818px;height:16px;margin-top:20px;" id="Layer7" align="right"> 2 <input type="submit" value=" 結果 "> 3 <input type="button" value=" キャンセル "> 4 <input type="button" value=" 戻 り "> 5</div>
投稿2020/09/15 07:03
総合スコア34075
0
自己解決
position : absolute;はそのままにしてテーブルにスクロールバーを取り付けることで自己解決しました。
投稿2020/09/18 02:58
総合スコア23
0
html
1<div style="width:468px; height:16px; top:486px; left:441px; position:absolute; z-index:2;" id="Layer7" align="right">
ここのposition:absolute;で表示位置が固定されているからです。
positionを解除しmarginやpaddingで位置調整してください。
投稿2020/09/15 06:54
総合スコア159
0
position : absolute;で要素の絶対位置を指定していることが原因です。
position : absolute;を削除してください。
投稿2020/09/15 06:46
総合スコア4524
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/09/15 07:29
2020/09/15 08:19