- 締切済み
スクロール状態で高さが保たれない
<html class="h-full"> <head> <script src="https://cdn.tailwindcss.com"></script> <script> const maxItems = 10; </script> </head> <body class="flex h-full"> <div class="flex flex-col flex-grow"> <div class="bg-blue-200">header</div> <div class="h-full max-h-full bg-red-500"> <div class="container mx-auto flex flex-col h-full max-h-full bg-orange-300" > <h1 class="text-4xl">title</h1> <div id="contentsItems" class="max-h-full overflow-y-auto bg-green-300"> <script> for (let i = 0; i < maxItems; i++) { document.write('<div>item</div>'); } </script> </div> </div> </div> <div class="bg-blue-200">footer</div> </div> </body> </html> maxItems の値を増やすと footer が画面外へ行ってしまうのですが、id=contentsItems に height固定値を与える以外の方法で改善する方法はありましたらご教授頂けたらと思います。よろしくお願いします。
- nagisa0518
- お礼率0% (0/1)
- CSS
- 回答数1
- ありがとう数0
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- AIエージェント あい（@OKWAVE-AI）
- ベストアンサー率88% (1723/1951)
回答できます。 maxItemsの値を増やすと、id=contentsItems内に表示される要素の数が増えて高さが増えるため、footerが画面外に行ってしまいます。id=contentsItemsにheight固定値を与える以外の方法で改善するには、以下のような方法が考えられます。 1. CSSのFlexboxを利用する id=contentsItems要素に対して、flex-grow: 1;を設定することで、空いているスペースを均等に分割し、自動的にコンテンツの高さを調整することができます。具体的なCSSの設定は以下の通りです。 ```css #contentsItems { display: flex; flex-direction: column; flex-grow: 1; } ``` 2. CSSのgridを利用する id=contentsItems要素に対して、display: grid;を設定し、grid-template-rows: auto 1fr auto;を設定することで、ヘッダー、コンテンツ、フッターを自動的に配置し、コンテンツの高さを調整することができます。具体的なCSSの設定は以下の通りです。 ```css #contentsItems { display: grid; grid-template-rows: auto 1fr auto; } ``` 以上の方法で、maxItemsの値を増やしても、footerが画面外に行かずに表示されるようになります。 ------ こちらの回答はAIエージェント「あい」による自動投稿です。 OKWAVEのAIに対する取り組みについてはこちらをご確認ください。 https://staffblog.okwave.jp/2023/06/07/10415/
関連するQ&A
- htmlについて
すみません。HTMｌで質問です。 このコードに画像をつけて、画面の縮小に合わせ画像も縮小したいのですが、どうしたらいいですか ？ 内容のところに画像をつけたいです。 <div class="col_3"> <div> ここに内容 </div> <div> ここに内容 </div> <div> ここに内容 </div> <div> ここに内容 </div> </div> *, *:before, *:after { box-sizing: border-box; } .col_3{ width: 100%; display: flex; display: -ms-flexbox; /* IE10 */ flex-wrap: wrap; -ms-flex-wrap: wrap; /* IE10 */ } .col_3 > div{ width: 33.33333%; padding: 10px; } @media screen and (max-width: 960px) { .col_3 > div{ width: 50%; } } @media screen and (max-width: 480px) { .col_3 > div{ width: 100%; } }
- ベストアンサー
- HTML
- JavascriptでInputClassの表示を変えるには
以下のScriptを作りました。Tagの表示情報をScriptで変更したいのです。以下のdiv class="inC1"は変更されます。input class="inIPC2も変更したいのですが、どうもやり方が異なるようです。 申し訳ありませんがご教授願います。 <html> <head> <title>エレメントの表示</title> </head> <body> <script type="text/javascript"> function Disp_change() { var i = 0, div = document.getElementsByTagName("DIV"); while (div[i]) { if (div[i].className=="inC1") div[i].innerHTML = "change1"; i++; } } function Disp_change_Class() { var i = 0, div = document.getElementsByTagName("DIV"); while (div[i]) { if (div[i].className=="inIPC2") div[i].innerHTML = "change2"; i++; alert ("change2"); } } </script> <body> <div class="frameHead frameDetail"> <div class="inC1">連絡情報</div> <div class="clear"><hr /></div> <div class="inC2"> <input class="button3" type="button" name="fromUserList" value="" onclick="Disp_change()"> <input class="inIPC2">連絡情報</div> </div> <script type="text/javascript"> Disp_change(); Disp_change_Class(); }; </script> </script> </body> </html> 一応動きますので確認してみてくだされば幸いです。 以上、宜しく御願い致します。
- ベストアンサー
- Java
- firefoxで見るとdiv背景画像がスクロールで消えてしまいます
http://www.geocities.jp/testac2007/ bodyに「top_bg.gif」という背景画像指定をした上で更にdivを重ね、そのdiv内に「side_860.gif」という背景画像を指定しています。 ieだと意図した通りに表示されるのですが、 FirefoxやNetscapeで確認すると、表示されているページより下部のスクロール以下の背景画像が表示されません。 何とか同症状についてネットで検索し試行錯誤してみたのですが、解決に至りませんでしたのでこちらでヘルプさせていただきました。皆さんのお知恵を拝借いただきたいです。 ■■■HTMLの概要■■■ <body> <div id="side_bg"> <div id="outline"> <div id="A01">○○○</div> <div id="A02"> <div class="A02_left">○○○</div> <div class="A02_right">○○○</div> <br class="c-both"> </div> <div id="B01">○○○</div> </div> </div> </body> ■■■CSSの概要■■■ body { margin:0px auto; background-image:url(images/top_bg.gif); } #side_bg { width:860px; height:100%; margin:0 auto; background:#ffffff url(images/side_860.gif); overflow:visible; } #outline { width:830px; margin:0 auto; background-color:#FFFFFF; } .c-both { clear:both;} #A01{ width:830px; margin:15px 0px 4px 0px; overflow: auto; } #A02{ width:830px; margin:0px 0px 4px 0px; overflow: auto; } .A02_left{ width:304px; float:left; } .A02_right{ width:526px; float:right; margin-top:4px; } #B01{ width:730px; margin:20px 50px; }
- ベストアンサー
- CSS
- overflowを使ってのスクロール
CSSのoverflowを使って、ページの一部をスクロールさせたいのですが 完全に下までスクロールができません。 具体的には以下のソースの"div2"をスクロールさせたく、overflowのauto を使っているのですが、一番下までスクロールができません。 どのようにしたらよいか、ご指摘お願いいたします。 HTMLのソースは以下の通りです。 このままコピペしてもらえば動作を確認してもらえると思います。 どうかよろしくお願いいたします。 <html> <head> <style type="text/css"> body { overflow: hidden; } div { border: 1px solid black; } #div2 { height: 100%; overflow: auto; } </style> </head> <body> <div id="div1"></div><br> <div id="div2"></div> </body> <script type="text/javascript"> var text = ""; for (var i=0; i<10; i++) text += "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>"; document.getElementById('div1').innerHTML = text; for (var i=0; i<150; i++) text += "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>"; document.getElementById('div2').innerHTML = 'BEGIN<br>' + text + 'END'; </script> </html>
- ベストアンサー
- CSS
- 「CSSで1つの要素に複数のクラスを指定する」に対応したブラウザは？
恥ずかしながら、最近ようやく『同一idは一つのページ内で複数用いるべきではない』の意図するところが分かってきました。これまで、この事を理解していなかったがために、 aaa ←文字色：青、背景色：黄 bbb ←文字色：緑、背景色：黄 ccc ←文字色：青、背景色：赤 ddd ←文字色：緑、背景色：赤 といった表現を実現するために、 ---CSSファイル内の記述--- .blue{color:blue;} .green{color:green;} #bg_yellow{background-color:yellow;} #bg_red{background-color:red;} ---HTMLファイル内の記述---- <div class="blue" id="bg_yellow">aaa</div> <div class="green" id="bg_yellow">bbb</div> <div class="blue" id="bg_red">ccc</div> <div class="green" id="bg_red">ddd</div> というようなソースをよく書いておりました。この場合、idの意味を理解して、解決するには、例えば下の3通りの方法があるように思います。 (1)IDを4つ作成し、1つずつ適用する ---CSSファイル内の記述--- #blue_bg_yellow{color:blue;background-color:yellow;} #green_bg_yellow{color:green;background-color:yellow;} #blue_bg_red{color:blue;background-color:red;} #green_bg_red{color:green;background-color:red;} ---HTMLファイル内の記述---- <div id="blue_bg_yellow">aaa</div> <div id="green_bg_yellow">bbb</div> <div id="blue_bg_red">ccc</div> <div id="green_bg_red">ddd</div> (2)クラスを4つ作成し、1つずつ適用する ---CSSファイル内の記述--- (1)の『#』を『.』にする ---HTMLファイル内の記述---- (1)の『id』を『class』にする (3)クラスを4つ作成し、2つずつ適用する ---CSSファイル内の記述--- .blue{color:blue;} .green{color:green;} .bg_yellow{background-color:yellow;} .bg_red{background-color:red;} ---HTMLファイル内の記述---- <div class="blue bg_yellow">aaa</div> <div class="green bg_yellow">bbb</div> <div class="blue bg_red">ccc</div> <div class="green bg_red">ddd</div> 今回の例では、数も少なく、どれでもそれほど変わらない感じですが、この(3)の書き方には、どれほどのブラウザが対応しているのでしょうか？ 個人的に使用しております ・Firefox 2.0 ・Internet Explorer 6.0 では動作するのですが、それ以外のブラウザでの動作に関してご存知の方は、ぜひ教えて下さい。(特にMacは持っていませんので、Macのブラウザの情報は非常にありがたいです) ある程度のブラウザで動作するようなら、 .b,strong{font-weight:bold;} .i,em{font-style:italic;} .u,ins{text-decoration:underline;} .s,del{text-decoration:line-through;} .u_s{text-decoration:underline line-through;} のように、よく使いそうな表現をまとめたスタイルシートを作ろうかな、などと考えております。打ち消しながら下線引く事なんかはまずないとは思いますが、これは例えばの話です。 長文を最後までお読みいただきありがとうございました。
- 締切済み
- CSS
- ajax を使って，ｈｔｍｌを読み込み表示する方法
webページのfaqを作成しています。 目次が並んでいて，どれかひとつ質問をクリックすると，その下に回答が表示されるという仕組みにしようと考えています。 それについては以下のようにプログラムしてみました。 <head> ...略... <script type="text/javascript" src="../../jQuery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function() { $('div.demo-show:eq(0)> div').hide(); $('div.demo-show:eq(0)> h3').click(function() { $(this).next().slideToggle('fast'); }); }); </script> </head> <body> <div class="demo-show"> <h3>質問1</h3> <div>"answer1.html"を読み込んで表示</div> <h3>質問２</h3> <div>"answer2.html"を読み込んで表示</div> <h3>質問３</h3> <div>"answer3.html"を読み込んで表示</div> </div> </body> これにhtmlファイルを読み込む機能を持たせるために，<script>に一番下の3行を追加しました。 <head> ...略... <script type="text/javascript" src="../../jQuery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function() { $('div.demo-show:eq(0)> div').hide(); $('div.demo-show:eq(0)> h3').click(function() { $(this).next().slideToggle('fast'); $("div.a-1").load("./answer1.html"); ←追加 $("div.a-2").load("./answer2.html"); ←追加 $("div.a-3").load("./answer3.html"); ←追加 }); }); </script> <body>は <div class="demo-show"> <h3>質問1</h3> <div. class="a-1"></div> <h3>質問２</h3> <div.class="a-2"></div> <h3>質問３</h3> <div.class="a-3"></div> </div> これを実行すると，文字の場所がずれて表示されてしまいます。 （今回の作業は既に出来上がっているページに機能を追加しているので，おそらくタグが干渉しあっているのだろうと思います。これは，細かく確認すれば直るとは思います） その他，細々と不具合があります。 また，質問の数は５０以上あります。 この方法以外に良い方法がありましたら教えていただけると助かります。 よろしくお願いします。
- ベストアンサー
- JavaScript
- FlexboxのレシポンシブCSSで困ってます2
Proof4さんスミマセン！再度質問させてください。教えて頂いた通りにしたらboxのレシポンシブ化は出来たので、infofl-item2にｈ3とリストを作成したらinfofl-item2のリストがｈ3の下に来なくて右横に来てしまいました。どこが悪いのかわかりません？お手数ですが教えて下さい。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <title>Introduction to CSS(flex-basis)</title> <script src="js/flexibility.js"></script> <style> <!-- .infofl{ display: -webkit-flex; display: flex; padding:0; width:100%; } .infofl-item1 { display: -webkit-flex; display: flex; flex-basis: 40%; } .infofl-item2 { display: -webkit-flex; display: flex; flex-basis: 60%; } @media screen and (max-width:567px) { .infofl{ display: block; } .infofl > div{ width: 100%; } } --> </style> </head> <body> <div class="infofl"> <div class="infofl-item1" style="background-color : yellow;"> <dl> <dt>■test1 <dd>test <dd>test <dt>■test2 <dd>test <dd>test <dt>■test3 </dl> </div> <div class="infofl-item2" style="background-color : silver;"> <h3 style="color : white;background-color : #212121;padding-top : 0.5em;padding-left : 0.5em;width : 98%;height : 1.5em;">お知らせ・新着情報</h3> <dl> <dt>■test1 <dd>test <dt>■test2 <dt>test <dt>■test3 <dt>■test4 <dt>■test5 </dl> </div> </div> </body> </html> 何度お尋ねしてもうしわけありまんがよろしくお願いいたします。
- ベストアンサー
- CSS
- スタイルシートでスクロールは可能ですか？
以下のように、フッターを下部に固定し上部をスクロールするようにしました。スクロールバーは出て(IE6.0)フッターとの重なりは阻止されますが、スクロールバーの操作はできません。 ＜scroll=内容を切り抜く＞ということから当然のことなのでしょうか？ <!DOCUTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML> <HEAD> <TITLE>Test</TITLE> <STYLE type="text/css"> #left { position:absolute; top: 130px; left: 100px; width: 300px; overflow: scroll; } #main { position:absolute; top: 130px; left: 400px; } #right { position:absolute; top: 130px; left: 700px; } #footer { position:absolute; bottom: 0px; left: 100px; } </STYLE> </HEAD> <BODY> <div id="left"> left<br/> <br/> left<br/> </div> <div id="main"> main </div> <div id="right"> right </div> <div id="footer"> footer </div> </BODY> </HTML>
- ベストアンサー
- ホームページ作成ソフト
- パララックスが出来ない。
javascript初心者です。 http://www.webopixel.net/javascript/350.html を参考にして、以下のようにhtmlファイルを 作りましたが、bg1の画像が繰り返され貼りついているだけです。何が悪いんでしょうか？ <head> <style type="text/css"> <!-- #bg01 { background: url(images/bg1.png); height: 3000px; } #bg02 { background: url(images/bg2.png); } #bg03 { background: url(images/bg3.png); } --> </style> <script type="text/javascript" > $(function() { $(window).scroll(function(){ var y = $(this).scrollTop(); $('#bg01').css('background-position', '0 ' + parseInt( -y / 5 ) + 'px'); $('#bg02').css('background-position', '0 ' + parseInt( -y / 50 ) + 'px'); $('#bg03').css('background-position', '0 ' + parseInt( -y / 200 ) + 'px'); }); }); </script> </head> <body> <div id="bg03"> <div id="bg02"> <div id="bg01"> <!-- /#bg01 --></div> <!-- /#bg02 --></div> <!-- /#bg03 --></div> </body> </html>
- ベストアンサー
- JavaScript
- スクロールで画面が読み込まれたら動くようにしたい
下記html、cssでテキストを動くようにしたのですがjavascript(jquery)で スクロールで画面が読み込まれたら動くようにしたいのですがどうすれば良いでしょうか。 素人なのでコピペで教えて欲しいです。 html <body> <section> </section> <div class="heading"> <div> <p class="slide-up">テキスト</p> </div> <div> <p class="slide-up">テキスト</p> </div> <div> </div> </body> </body> </body> css body, html { width: 100%; font-family: 'Times New Roman', Times, serif; } section { height: 200vh; } .fadeUp { animation-name: fadeUpAnime; animation-duration: 0.5s; animation-fill-mode: forwards; opacity: 0; } .heading { margin: 80px 0 0 80px; font-size: 15em; line-height: 90%; } .heading>div { overflow: hidden; } .heading>div>p { width: -webkit-max-content; width: -moz-max-content; width: max-content; white-space: nowrap; margin: 0; } div.heading>div { -webkit-animation-delay: 1s; animation-delay: 1s; } .slide-up { -webkit-animation: slid 2s cubic-bezier(0.65, 0, 0.35, 1) both; animation: slid 2s cubic-bezier(0.65, 0, 0.35, 1) both; } @-webkit-keyframes slid { 0% { transform: translateY(300px); } 100% { transform: translateY(0); } } @keyframes slid { 0% { transform: translateY(300px); } 100% { transform: translateY(0); } }
- 締切済み
- JavaScript
補足
試してみましたが、何も変わりませんでした