- ベストアンサー
htmlで行数が増えた場合に自動的に範囲を広げる方法
- ホームページを作成している際に、htmlで表示させた場合に一行だけでは画面内に収まりますが、行数が増えていくとボタンとかぶってしまいます。行数が増えた場合に自動的に下に伸ばす方法はありますか？
- 「htmlで行数が増えた場合に自動的に範囲を広げる方法」について質問があります。ホームページを作成しているのですが、htmlで表示させた場合、表示する行数が増えた際に下に伸ばす方法を教えてください。
- htmlで行数が増えた場合に自動的に範囲を広げる方法が知りたいです。ホームページを作成しているのですが、一行だけでは画面内に収まりますが、行数が増えていくとその下にあるボタンにかぶさってしまいます。行数が増えた場合に自動的に下に伸ばす方法を教えてください。
- みんなの回答 （6）
- 専門家の回答
質問者が選んだベストアンサー
＞確認いたしましたところ、ボタンが表にかぶってしまいました。(検索結果が7行の場合) こちらでDBアクセスは実験できませんので、HTMLソースを手動でループ部分を7ブロックまで増やしてみましたが、ローカルでの表示テストはこのようになります。 (ボタンが枠にかぶってるのはちょっとカッコ悪いですが) ＞ちなみに2列目は縦2×横2に表示する必要があるため、修正させていただきます。 そういう変更があったなら、途中で何か影響のある変え方をしてしまったのかもしれません。 改めてソース全体を見てみる必要がありそうですね。 まあ、私の方法では基本的な考えは変わりませんけど…。 ・div での表示位置指定(ピクセル単位)を無くす。 ・ボタンもtable要素の1セル内に置くので、自動的に最終行となって追従する。
その他の回答 (5)
- ngwaver
- ベストアンサー率26% (324/1203)
><div style="text-align:center;" id="Layer7">の部分が変わったと思われますが、ここだけでしょうか？ </table>も追加しています。
- asciiz
- ベストアンサー率70% (6849/9743)
こんなのはどうですか ループ終わりの「<% } %>」以下部分をこのようにしてみます <% } %> <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> まあつまりテーブルの最終行にもう一行増やして右寄せでボタンを置くと。
お礼
ご回答ありがとうございました。 ボタンが画面右上にすっとんでしまいました。(笑)
補足
確認いたしましたところ、ボタンが表にかぶってしまいました。(検索結果が7行の場合)
- AsarKingChang
- ベストアンサー率46% (3467/7474)
<div style="width : 468px;height : 16px;top : 486px;left : 441px;position : absolute; z-index : 2; " id="Layer7" align="right"> absolute＝絶対位置指定で x=441 y=486 に固定されてるので、むしろそれをやめる方が早いのでは？
お礼
ご回答ありがとうございました。 absoluteを削除したところボタンが見えなくなってしまいました。
- ngwaver
- ベストアンサー率26% (324/1203)
<!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>
お礼
ご回答ありがとうございました。 <div style="text-align:center;" id="Layer7">の部分が変わったと思われますが、ここだけでしょうか？
お礼
ご回答いただきありがとうございました。 確認してみます。