asp.net webforms 嵌套母版页和 css答案

【问题标题】：asp.net webforms nested master pages and cssasp.net webforms 嵌套母版页和 css
【发布时间】：2013-08-28 23:49:58
【问题描述】：

我现在有一个问题，我正在使用 asp.net 网络表单来创建两列布局。我可以使用下面的代码在母版页中毫无问题地创建 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;
}

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

谢谢

【问题讨论】：

您的子母版页看起来如何以及示例页面会很好。
子页面是否正在加载 CSS 文件？
是的。我正在使用根相对路径。
您的示例代码未使用根相对路径，如果使用它们，它们将以 / 开头。
看看能否隔离问题。您是否尝试过仅将基本（外部）母版页与您的子页一起使用？如果这可行，那么内页上有一些导致问题的标记。我曾经遇到过这样的事情，其中嵌套的母版页有一个流氓关闭 div 标记。还可以使用 firebug 或类似工具来进一步检查应用到它们的元素和样式。

标签： css webforms master-pages

【解决方案1】：

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

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

【讨论】：

这个示例代码只是一个简单的模型，我拼凑在一起试图解释我在做什么。在完整版中，主页面和子页面都在同一个文件夹中，我使用的是根相对路径。