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

Question

我有一个MasterPage，它是两列布局，左列菜单，右列内容。 整个页面是XHTML / Divs / CSS布局。 因此，这些列是采用CSS来调整其大小的div。

对于一页（即网格页），我只希望一列（内容列）的宽度为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

使用OnPreRenderComplete事件，如下所示：

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

Answer 3

您可以使用类似于：

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

Answer 4

像魅力一样工作。 解决方案是将另一个区域添加到具有分配了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;
}