0

現在、asp.net Web フォームを使用して 2 列のレイアウトを作成しているという問題があります。以下のコードで、マスター ページに問題なく 2 列のレイアウトを作成できます。

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site1.master.cs"     Inherits="WebApplication5.Site1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
    <link href="/css/bootstrap.min.css" rel="stylesheet" />
    <link href="/css/custom.css" rel="stylesheet" />
</head>
<body>
<div class="container-fluid">
    <form id="form1" runat="server">

            <div id="sidebar">
                <asp:Menu ID="Menu1" runat="server">
                    <Items>
                        <asp:MenuItem Enabled="true" Text="Main Menu"></asp:MenuItem>
                        <asp:MenuItem Enabled="true" Text="Sub Page"></asp:MenuItem>
                    </Items>
                </asp:Menu>
            </div>
            <div id="content">

                   <div>
                       <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
                       </asp:ContentPlaceHolder>
                   </div>
            </div>
    </form>
</div>
</body>

ただし、このマスターページを継承する別のマスターページを追加し、子ページをセカンダリマスターに追加するとすぐに、CSS の本体の高さはページの要素に基づいて変更されません。上記のマスターに接続されている子ページと同じピクセルのままです。

これが私が使用しているCSSです。2 つの列は最初のページの下部まで伸びていますが、列内の要素が最初のページよりも大きい別のページに移動するとすぐに、本文は同じ長さのままです

#sidebar, #content {
    position: absolute;
    top:0;
    bottom:0;
}

#sidebar {
    left: 0;
    width: 15em;
    background-color: bisque;
}

#content {
    left: 18em;
    right:0;
    background-color:bisque;
}

これは私が説明するのが難しい問題ですが、少なくとも正しい方向に向けるための手がかりは非常に高く評価されます.

ありがとう

4

1 に答える 1