- 締切済み
スクロール状態で高さが保たれない
<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）
- ベストアンサー率89% (2715/3019)
回答できます。 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/
補足
試してみましたが、何も変わりませんでした