2013-08-28 53 views
0

我現在有一個問題,我正在使用asp.net web窗體創建一個雙列布局。我可以在下面的代碼的母版頁中創建一個沒有問題的2列布局。asp.net webforms嵌套母版頁和css

<%@ 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; 
} 

大這是一個硬問題來形容,但任何線索至少讓我指出正確的方向將非常感激。

謝謝

+0

您的子主頁如何顯示,並且示例頁面也不錯。 – NiKiZe

+0

是否將CSS文件加載到子頁面上? –

+0

是的,他們是。我正在使用根相對路徑。 –

回答

1

爲您的CSS鏈接使用根相對路徑。如果您的子頁面位於主頁面的不同目錄中,則指向您的css文件的鏈接將中斷。改爲使用以下內容:

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

這個示例代碼只是一個簡單的模擬,我試着解釋我在做什麼。在完整版本中,主文件和子頁面全部位於相同的文件夾中,並且使用根相對路徑。 –