こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

htmlで行数が増えた場合に自動的に範囲を広げる

現在、ホームページを作成しておりますが、htmlで表示させた場合に一行だけですと画面内に収まりますが、行数が増えていくとその下にあるボタンにかぶさってしまいます。
表示する行数が増えた場合に自動的に下に伸ばす方法はございますでしょうか?

HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="justsystems:HPB-Input-Mode" content="mode/flm; pagewidth=940; pageheight=1200">
<meta name="GENERATOR" content="JustSystems Homepage Builder Version 20.0.6.0 for Windows">
<title>タイトル</title>
<link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<body bgcolor="#a9a9a9">
<table border="1" height="252" width="818">
<tr bgcolor="gray" style="color:white" height="50">
<th height="42" size=10><b>注文日</b></th>
<th height="42" width="212">注文名/オプション<br>注文先・個数</th>
<th height="42" size=10>合計金額/合計個数</th>
<th height="42" size=20><b>注文者/入力者</b></th>
</tr>
ーーーここでテーブルから複数行取得
<% for(var i in content) { %>
<tr bgcolor="lightyellow">
<% var obj = content[i]; %>
<td align="center" height="47" size="10">
<input type="text" name=注文日 size="10" style="background:white; color:#000000;" align="middle" value="注文日">
</td>
<td align="center" height="47" width="10" style="white-space:nowrap;" >
<input type="text" name=注文名 size=4 style="background:white; color:#000000;" align="middle" value="注文名">
<input type="text" name=オプション size=1 style="background:white; color:#000000;" align="middle" value="無">
<input type="text" name=注文先 size=4 style="background:white; color:#000000;" align="middle" value="注文先">
<input type="text" name=単価 size=1 style="background:white; color:#000000;" align="middle" value="単価">
  <input type="text" name=個数 size=1 style="background:white; color:#000000;" align="middle" value="個数">
</td>
<td align="center" height="47" size=10>
<input type="text" name=合計金額 size=10 style="background:white; color:#000000;" align="middle" value="合計金額">
<input type="text" name=合計数 size=10 style="background:white; color:#000000;" align="middle" value="合計数">
</td>
<td align="center" height="47" size=20>
<input type="text" name=注文者 size=20 style="background:white; color:#000000;" align="middle" value="注文者">
<input type="text" name=入力者 size=20 style="background:white; color:#000000;" align="middle" value="入力者">
</td>
</tr>
<% } %>

<div style="width : 468px;height : 16px;top : 486px;left : 441px;position : absolute; z-index : 2; " id="Layer7" align="right">
<input type="submit" value=" 結果 ">
<input type="button" value=" キャンセル ">
<input type="button" value=" 戻  り ">
</div>
</form>
</div>
</body>
</html>

投稿日時 - 2020-09-11 15:41:11

QNo.9797743

困ってます

質問者が選んだベストアンサー

>確認いたしましたところ、ボタンが表にかぶってしまいました。(検索結果が7行の場合)

こちらでDBアクセスは実験できませんので、HTMLソースを手動でループ部分を7ブロックまで増やしてみましたが、ローカルでの表示テストはこのようになります。
(ボタンが枠にかぶってるのはちょっとカッコ悪いですが)

>ちなみに2列目は縦2×横2に表示する必要があるため、修正させていただきます。

そういう変更があったなら、途中で何か影響のある変え方をしてしまったのかもしれません。
改めてソース全体を見てみる必要がありそうですね。

まあ、私の方法では基本的な考えは変わりませんけど…。
・div での表示位置指定(ピクセル単位)を無くす。
・ボタンもtable要素の1セル内に置くので、自動的に最終行となって追従する。

大変申し訳ございませんが、この投稿に添付された画像や動画などは、「BIGLOBEなんでも相談室」ではご覧いただくことができません。 OKWAVEよりご覧ください。

マルチメディア機能とは?

投稿日時 - 2020-09-14 12:25:26

ANo.6

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(6)

ANo.5

><div style="text-align:center;" id="Layer7">の部分が変わったと思われますが、ここだけでしょうか?

</table>も追加しています。

投稿日時 - 2020-09-12 13:55:00

お礼

ご回答いただきありがとうございました。
確認してみます。

投稿日時 - 2020-09-14 09:17:44

ANo.4

>ボタンが画面右上にすっとんでしまいました。(笑)

ちゃんとコピペしてます?
<div> 内の座標指定はすべてなくしてますよ。

こちらではこのようになっていますが。

大変申し訳ございませんが、この投稿に添付された画像や動画などは、「BIGLOBEなんでも相談室」ではご覧いただくことができません。 OKWAVEよりご覧ください。

マルチメディア機能とは?

投稿日時 - 2020-09-11 19:05:44

補足

ちなみに2列目は縦2×横2に表示する必要があるため、修正させていただきます。

投稿日時 - 2020-09-14 09:22:27

お礼

ご回答ありがとうございました。
再度確認させていただきます。

投稿日時 - 2020-09-14 09:19:42

ANo.3

こんなのはどうですか
ループ終わりの「<% } %>」以下部分をこのようにしてみます

<% } %>

<tr><td height="24" colspan="4">
<div style="height:16px;" id="Layer7" align="right">
<input type="submit" value=" 結果 ">
<input type="button" value=" キャンセル ">
<input type="button" value=" 戻  り ">
</div>
</td></tr>

</form>
</div>
</table>
</body>
</html>

まあつまりテーブルの最終行にもう一行増やして右寄せでボタンを置くと。

投稿日時 - 2020-09-11 17:21:19

補足

確認いたしましたところ、ボタンが表にかぶってしまいました。(検索結果が7行の場合)

投稿日時 - 2020-09-14 09:31:38

お礼

ご回答ありがとうございました。
ボタンが画面右上にすっとんでしまいました。(笑)

投稿日時 - 2020-09-11 17:53:14

<div style="width : 468px;height : 16px;top : 486px;left : 441px;position : absolute; z-index : 2; " id="Layer7" align="right">

absolute=絶対位置指定で
x=441 y=486
に固定されてるので、むしろそれをやめる方が早いのでは?

投稿日時 - 2020-09-11 17:08:15

お礼

ご回答ありがとうございました。
absoluteを削除したところボタンが見えなくなってしまいました。

投稿日時 - 2020-09-11 18:07:32

ANo.1

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="justsystems:HPB-Input-Mode" content="mode/flm; pagewidth=940; pageheight=1200">
<meta name="GENERATOR" content="JustSystems Homepage Builder Version 20.0.6.0 for Windows">
<title>タイトル</title>
<link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<body bgcolor="#a9a9a9">
<table border="1" height="252" width="818">
<tr bgcolor="gray" style="color:white" height="50">
<th height="42" size=10><b>注文日</b></th>
<th height="42" width="212">注文名/オプション<br>注文先・個数</th>
<th height="42" size=10>合計金額/合計個数</th>
<th height="42" size=20><b>注文者/入力者</b></th>
</tr>
ーーーここでテーブルから複数行取得
<% for(var i in content) { %>
<tr bgcolor="lightyellow">
<% var obj = content[i]; %>
<td align="center" height="47" size="10">
<input type="text" name=注文日 size="10" style="background:white; color:#000000;" align="middle" value="注文日">
</td>
<td align="center" height="47" width="10" style="white-space:nowrap;">
<input type="text" name=注文名 size=4 style="background:white; color:#000000;" align="middle" value="注文名">
<input type="text" name=オプション size=1 style="background:white; color:#000000;" align="middle" value="無">
<input type="text" name=注文先 size=4 style="background:white; color:#000000;" align="middle" value="注文先">
<input type="text" name=単価 size=1 style="background:white; color:#000000;" align="middle" value="単価">
  <input type="text" name=個数 size=1 style="background:white; color:#000000;" align="middle" value="個数">
</td>
<td align="center" height="47" size=10>
<input type="text" name=合計金額 size=10 style="background:white; color:#000000;" align="middle" value="合計金額">
<input type="text" name=合計数 size=10 style="background:white; color:#000000;" align="middle" value="合計数">
</td>
<td align="center" height="47" size=20>
<input type="text" name=注文者 size=20 style="background:white; color:#000000;" align="middle" value="注文者">
<input type="text" name=入力者 size=20 style="background:white; color:#000000;" align="middle" value="入力者">
</td>
</tr>
<% } %>
</table>

<div style="text-align:center;" id="Layer7">
<input type="submit" value=" 結果 ">
<input type="button" value=" キャンセル ">
<input type="button" value=" 戻  り ">
</div>
</form>
</div>
</body>
</html>

投稿日時 - 2020-09-11 16:06:10

お礼

ご回答ありがとうございました。
<div style="text-align:center;" id="Layer7">の部分が変わったと思われますが、ここだけでしょうか?

投稿日時 - 2020-09-11 16:23:23

あなたにオススメの質問