html - ウィンドウのサイズが変更されると、スクロール バーが表示される代わりに、すべてがクランチされます。

Question

そのため、私は MVC アプリを開発していますが、この機能の経験はあまりありません。また、私を悩ませている問題に遭遇しました。

デスクトップの解像度は 1920x1080 です。アプリが全画面表示になっている場合は、正常に表示されます。しかし、ウィンドウのサイズが変更されると (例: ブラウザーの右上の境界線にあるボタンをクリックする)、すべてが途中でクランチされます。

または、少なくともブラウザ/アプリの全幅が常に維持され、スクロールバーがページに表示されることを望みます。これは、「サイズ変更」アプリまたはスクリプトに取り組む時間/リソースがないためです。 、それさえあれば。

誰でも私を助けることができますか？情報を追加したり、必要に応じて詳細を尋ねたりすることを躊躇しないでください。新しいことを学ぶのが大好きです。

編集

少し前に撮影した画像をいくつか紹介します。通常のビュー:

ウィンドウのサイズが変更されると、次のようになります。

別のアプリからの別の画像:

サイズを変更したときの同じ画像：

私が言ったように、これらの 2 つのケースでは、すべてをそのままにしておきたいので、ユーザーは水平にスクロールする必要があります。すべてを再計算/サイズ変更するよりも、そのように開発する方が「苦痛」が少ないと思います...

編集2

MVC テンプレートに詳しい方のために、私のアプリの 1 つに追加したコーディングをいくつか示します。何が起こっているのかを理解するのに役立つかもしれません。

最初の_Layoutビュー:

<div id="body">
    <div>
        <div id="leftSide">
            @{
                Html.RenderAction("ShowCardSetLinks", "Home");
            }
        </div>
        <div id="inner">
            <section class="content-wrapper main-content clear-fix">
                @RenderBody()
            </section>  
        </div>
        <div id="rightSide">
            @{
                Html.RenderAction("GetCardOfTheDay", "Home");
            }
        </div>
    </div>
    <div id="dialog-modal" title="See Card Detail"></div>
</div>

次に、追加した CSS:

#body {
    width: 1920px;
    display: table-cell;
    table-layout: fixed;
}

#leftSide {
    width: 20%;
    display: table-cell;
    position: relative;
}

#rightSide {
    width: 20%;
    display: table-cell;
    position: relative;
}

#inner {
    width: 70%;
    display: table-cell;
    position: relative;
}

メインレイアウトはここまで、他に何かあれば投稿します。