Question

我现在有一个问题，我正在使用asp.net Web表单来创建两列布局。我可以使用下面的代码在母版页中创建一个没有问题的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。两列延伸到第一页的底部，但是一旦我转到另一页，其中列内的元素大于第一页，则主体保持相同的长度

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

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

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

这对我来说是一个难以描述的问题，但至少让我指出正确方向的任何线索都会非常感激。

由于

Answer 1

为您的CSS链接使用根相对路径。如果您的子页面与母版页位于不同的目录中，则指向css文件的链接将中断。请改用以下内容：

<link href="/css/bootstrap.min.css" rel="stylesheet" />
<link href="/css/custom.css" rel="stylesheet" />

asp.net webforms嵌套母版页和css

1 个答案: