.NET Core Blazor プラットフォームを使用した最初のプロジェクトは、思ったよりも困難でした。
すぐに使えるように、プロジェクトによって MainLayout.razor ファイルが作成されました。 「main」を変更しようとしています。クラス、だから
ページ全体を埋め尽くしますが、成功しません。私が今持っているものは次のとおりです。
<div class="main mh-100 p-0" style="background-color:#1100ff">
<nav class="navbar">
<label class="navbar-brand">My Project</label>
</nav>
<div class="container p-0 align-self-center" style="background-color:#ff99ff">
<div class="content">
@Body
</div>
</div>
</div>
mh-100 は最大高さを 100% に強制するものだと思っていました。ご協力をいただければ幸いです。同様の質問がすでに他にある場合は、あらかじめお詫び申し上げます。
これはコンテナの 100% です。体の高さも 100% である必要があります。
– 火星のアグア
2020 年 9 月 3 日 12:06
------------------------
つまり、これは blazor の問題ではなく、blazor の動作とは何の関係もありませんが、正しい CSS スタイルが適用されていれば問題は解決します。あなたがしなければならないことは、画面の高さを適用することです。 CSS ユニットとは何か、そして何があなたに最適かを見てみましょう: https://www.w3schools.com/cssref/css_units.asp
あなたの場合、ビューポートの高さが必要です。
div {
height: 100vh;
}
例: https://codepen.io/umair_me/pen/oNxovxX
ブートストラップでは、ブートストラップ 4.2 以降のバージョンには min-vh-100 または vh-100 を使用できます。詳細はこちら
2
これで問題が解決したようです。使用できる Bootstrap と同等のクラスがあるかどうか知っていますか?
– ジョニー・ウー
2020 年 9 月 3 日 14:31
1
はい、ブートストラップ クラスを使用して回答を更新しました。
– ウマイル
2020 年 9 月 3 日 15:13
------------------------
これは実際には Blazor タイプの問題ではなく、HTML/CSS の問題だと思います。ブートストラップに加えて、 width:100%; を追加すると、 style タグに追加すると、問題は解決するはずです。
最大高さを 100% に設定していることも問題である可能性があります。むしろ (通常の) 高さを確認する必要があります。
