我在 asp.net 中使用母版页，我是 CSS 的菜鸟，因此尝试了很多 在搜索 google 和 stackoverflow 帖子后的属性，但我不能 弄清楚如何克服这个问题，除了左边，一切都很好 侧面菜单，它应该动态地占用页面的所有高度，最后我有 包括产品页面 (buy.aspx) 产品 T2 和所有其他的屏幕截图 它下面的产品都与类别对齐，而它们应该有 在页面上的第一个产品下对齐，请帮助
母版页
<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="E_Auction.Site" %>
<html>
<head runat="server">
<style type="text/css">
body
{
margin-top: 0px;
margin-left: 5%;
margin-right: 5%;
background-color: Teal;
}
#header {
padding: 1px;
margin-left:5%;
margin-right:5%;
background-color: White;
margin-bottom: 0px;
}
#left {
float:left;
margin-left: 5%;
background-color:White;
}
#center
{
margin-top: 0px;
background-color: White;
margin-left: 5%;
margin-right: 5%;
overflow:scroll;
}
.style1
{
text-align: center;
}
.internal
{
text-decoration: none;
}
a:link, a:hover, a:visited, a:active {color: blue;}
</style>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<div id="header" style="background-image:url(Images/banner.gif);background-repeat:no-repeat;">
<table style="height:27%;width:88%">
<tr colspan="2">
<td style="text-align: right">
<asp:LinkButton ID="lnkMyAccount" runat="server" PostBackUrl="~/account.aspx" ForeColor="White" Font-Bold="true" Font-Underline="false">My Account</asp:LinkButton>  
<asp:LinkButton ID="lnkBuy" runat="server" PostBackUrl="~/buy.aspx" ForeColor="White" Font-Bold="true" Font-Underline="false">Buy</asp:LinkButton>  
<asp:LinkButton ID="lnkSell" runat="server" PostBackUrl="~/sell.aspx" ForeColor="White" Font-Bold="true" Font-Underline="false">Sell</asp:LinkButton>  
<asp:LinkButton ID="lnkAboutUs" runat="server" PostBackUrl="~/about.aspx" ForeColor="White" Font-Bold="true" Font-Underline="false">About Us</asp:LinkButton>  
<asp:LinkButton ID="lnkContactus" runat="server" PostBackUrl="~/contact.aspx" ForeColor="White" Font-Bold="true" Font-Underline="false">Contact Us</asp:LinkButton>
</td>
</tr>
<tr>
<td style="text-align: right">
<br /><span class="style1"><strong>Search</strong></span> <asp:TextBox ID="txtSearch" runat="server" Width="170px"></asp:TextBox> <asp:Button ID="btnGo" runat="server" Text="Go" Width="39px" Height="23px" />
</td>
</tr>
<tr>
<td valign="bottom"><asp:SiteMapPath ID="smPath" runat="server" ForeColor="White"></asp:SiteMapPath></td>
</tr>
</table>
</div>
<div id="left">
<table>
<tr>
<td valign="top" style="background-color:Silver;color:White;font-weight:bold;text-align:center;">
Category
</td>
</tr>
<tr>
<td valign="top" class="style1">
<asp:DataList ID="DataList1" runat="server" DataSourceID="dsCats">
<ItemTemplate>
<a href="buy.aspx?catid=<%# Eval("catid") %>" class="internal"><asp:Label ID="catitleLabel" runat="server" Text='<%# Eval("catitle") %>' />
</ItemTemplate>
</asp:DataList>
<asp:SqlDataSource ID="dsCats" runat="server"
ConnectionString="<%$ ConnectionStrings:EAuctionConnectionString %>"
SelectCommand="SELECT [catid], [catitle] FROM [Category]"></asp:SqlDataSource>
</td>
</tr>
</table>
</div>
<div id="center">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>
以下是内容页
<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="buy.aspx.cs" Inherits="E_Auction.buy" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<title>E-Auction::Buy Products</title>
<style type="text/css">
.topbanners
{
border: none;
}
</style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<asp:ListView ID="ListView1" runat="server" DataKeyNames="prodid"
DataSourceID="SqlDataSource1">
<EmptyDataTemplate>
<span>No data to show.</span>
</EmptyDataTemplate>
<ItemTemplate>
<table width="50%">
<tr>
<td colspan="2"><strong>
<asp:Label ID="prodnameLabel" runat="server" Text='<%# Eval("prodname") %>' />
</strong></td>
</tr>
<tr>
<td rowspan="8"><img src='/Pimages/<%# Eval("prodimagename") %>' height="150px" width="150px" /></td>
</tr>
<tr>
<td align="right">
<b></strong><asp:Label ID="capcategory" runat="server" Text="Category" /></b>
<asp:Label ID="Label2" runat="server" Text='<%# Eval("cat_title") %>' /></td>
</tr>
<tr>
<td align="right">
<asp:Label ID="capbidstartprice" runat="server" Text="Bid Start Price: " visible='<%# (Convert.ToInt32(Eval("pricetype")) == 1) ? true : false %>' />
<asp:Label ID="bidstartpriceLabel" runat="server" Text='<%# Eval("bidstartprice") %>' visible='<%# (Convert.ToInt32(Eval("pricetype")) == 1) ? true : false %>' /></td>
</tr>
<tr>
<td align="right">
<asp:Label ID="captotalbids" runat="server" Text="Total Bids: " visible='<%# (Convert.ToInt32(Eval("pricetype")) == 1) ? true : false %>' />
<asp:Label ID="totalbids" runat="server" Text='<%# Eval("TotalBids") %>' visible='<%# (Convert.ToInt32(Eval("pricetype")) == 1) ? true : false %>'/>
</tr>
<tr>
<td align="right">
<asp:Label ID="capbidenddate" runat="server" Text="Bid Ends At: " visible='<%# (Convert.ToInt32(Eval("pricetype")) == 1) ? true : false %>' />
<asp:Label ID="bidenddate" runat="server" Text='<%# Eval("bidenddate") %>' visible='<%# (Convert.ToInt32(Eval("pricetype")) == 1) ? true : false %>'/>
</tr>
<tr>
<td align="right">
<asp:Label ID="capbuyprice" runat="server" Text="Buy Price: " visible='<%# (Convert.ToInt32(Eval("pricetype")) == 0) ? true : false %>' />
<asp:Label ID="buyprice" runat="server" Text='<%# Eval("buyprice") %>' visible='<%# (Convert.ToInt32(Eval("pricetype")) == 0) ? true : false %>'/>
</tr>
<tr>
<td align="right">
<asp:Label ID="captax" runat="server" Text="Tax: " visible='<%# (Convert.ToInt32(Eval("pricetype")) == 0) ? true : false %>' />
<asp:Label ID="tax" runat="server" Text='<%# Eval("tax") %>' visible='<%# (Convert.ToInt32(Eval("pricetype")) == 0) ? true : false %>'/>
</tr>
<tr>
<td align="right">
<asp:Label ID="captotalbuyprice" runat="server" Text="Total: " visible='<%# (Convert.ToInt32(Eval("pricetype")) == 0) ? true : false %>' />
<asp:Label ID="totalbuyprice" runat="server" Text='<%# Eval("TotalBuyPrice") %>' visible='<%# (Convert.ToInt32(Eval("pricetype")) == 0) ? true : false %>'/>
</tr>
<tr>
<td align="right">
<a href='buyform.aspx?id=<%# Eval("prodid") %>' class="internal">
<asp:Image ID="Image1" ImageUrl='/Images/buy.png' runat="server" Visible='<%#(Convert.ToInt32(Eval("pricetype")) == 0) ? true : false%>' CssClass="topbanners"/>
</a>
<a href='bidform.aspx?id=<%# Eval("prodid") %>' class="internal">
<asp:Image ID="Image2" ImageUrl='/Images/bid.png' runat="server" Visible='<%#(Convert.ToInt32(Eval("pricetype")) == 1) ? true : false%>' CssClass="topbanners"/>
</a>
</td>
</tr>
<tr colspan="2">
<td><b>Description</b><br /><asp:Label ID="Label5" runat="server" Text='<%# Eval("description") %>' />
</tr>
</table>
<br />
</ItemTemplate>
<LayoutTemplate>
<div ID="itemPlaceholderContainer" runat="server" style="">
<span runat="server" id="itemPlaceholder" />
</div>
<div style="">
<p align="center">
<asp:DataPager ID="DataPager1" runat="server">
<Fields>
<asp:NextPreviousPagerField ButtonType="Button" ShowFirstPageButton="True"
ShowNextPageButton="False" ShowPreviousPageButton="False" />
<asp:NumericPagerField />
<asp:NextPreviousPagerField ButtonType="Button" ShowLastPageButton="True"
ShowNextPageButton="False" ShowPreviousPageButton="False" />
</Fields>
</asp:DataPager>
</p>
</div>
</LayoutTemplate>
</asp:ListView>
<br />
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%$ ConnectionStrings:EAuctionConnectionString %>"
SelectCommand="SELECT [prodid], (Select catitle from Category where catid=p.catid) as cat_title,[prodname],[description],[pricetype],[buyprice],[tax],[bidstartprice],[bidenddate],[prodimagename],[isforsale],[addedon], [btnname], (Select count(prod) from Bid where prod=p.prodid) as TotalBids, (tax+buyprice) as TotalBuyPrice FROM Product p where isforsale=1 Order by addedon Desc">
</asp:SqlDataSource>
<table runat="server" id="tblAll" width="70%" align="center">
</table>
</asp:Content>
产品页面图片:
最佳答案
您需要将左侧菜单的高度属性设置为 100%。但不仅如此，您还需要在 html、正文和任何其他容器元素上设置高度。如果您将这些都设置为 100%，那应该就可以了。
height:100%;
关于css - 如何使左侧菜单高度动态，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16313773/