Question

我有一个MasterPage，它是两列布局，左列菜单，右列内容。整个页面是XHTML / Divs / CSS布局。因此，列是div，其中CSS应用于它们的大小。

对于一个页面，一个网格页面，我只想要一个列（内容列）为最大查看区域的100％宽度。

如何在这个关闭异常页面上使用相同的母版页和相同的主题？

为这一页创建一个全新的母版页并为主题添加一个新的CSS属性似乎有些过分。有没有办法在这个页面上覆盖content div的CSS width属性？我不是CSS的专家，但我认为有办法做到这一点。

我确实有一些保留让客户方尽管压倒一切;出于兼容性原因。我更喜欢服务器端覆盖。

有什么建议吗？

Answer 1

在代码中为每个页面提供一个独特的CSS类，并在CSS中定位该类。这是完成它的一种愚蠢的简单方法：

创建自己的MasterPage类：

class MyMasterPage : MasterPage
{
    public string BodyClass {get;set;}
}

在您的母版页中：

<%@ Master Inherits="MyNamespace.MyMasterPage" %>
...
<body class="<% =this.BodyClass %>">
    <asp:ContentPlaceHolder ... />
</body>
...

在您网页的代码隐藏中：

void Page_Load(object sender, EventArgs e)
{
    ((MyMasterPage)Master).BodyClass = "specialpage";
}

在你的CSS课程中：

.specialpage .mainColumn {width:100%;}
.specialpage .otherColumn {display:none;}

Answer 2

你可以使用类似的东西：

#content {
    /* Some styles */
    width: 100% !important;
}

Answer 3

像魅力一样工作。对此的解决方案是使用分配了100％宽度CSS的新div将另一个区域添加到母版页。还要在CSS文件中创建一个新的样式条目。在内容页面上，将您想要的内容放在100％宽度的区域中，该区域的样式为100％，而不是与两列布局对应的内容。

之后，只需将内容页面设置为使用内容页面内容的母版页内容即可。

母版：

<!-- start page -->
<div id="page">
    <!-- start content -->
     <div id="contentOneColumn" >
      <asp:ContentPlaceHolder ID="ContentPlaceHolderContentOneColumn" runat="server">
      <!-- content that needs 100% width, one column -->
     </asp:ContentPlaceHolder>
     </div>     
    <div id="content" >
        <asp:ContentPlaceHolder ID="ContentPlaceHolderContent" runat="server">
        <!-- content that works with two column -->
        </asp:ContentPlaceHolder>

CSS：

/* Content */

content {
    float: right;
    width: 600px;
}

/* ContentOneColumn */
contentOneColumn {
    float:none;
    width: 850px;
}

Answer 4

使用OnPreRenderComplete事件，如下所示：

protected override void OnPreRenderComplete(EventArgs e)
    {
        base.OnPreRenderComplete(e);
        rfv_login.CssClass = "ValidatorReset";
        rfv_pwd.CssClass = "ValidatorReset";
    }

暂时覆盖ASP.NET中的主题CSS

4 个答案: