我的母版页是这样设计的:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Title</title>
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<form id="form1" runat="server">
<div id="header">
<h1 class="Title">Title</h1>
<span class="TagLine">tagline</span> </div>
<div id="navigation">
<table>
<tr>
<td><asp:Menu ID="m" runat="server" Orientation="Horizontal">
<Items>
<asp:MenuItem Text="Home" NavigateUrl="~/Default.aspx"></asp:MenuItem>
</Items>
</asp:Menu></td>
</tr>
</table>
</div>
<div id="body">
<asp:ContentPlaceHolder ID="MainContent" runat="server">
</asp:ContentPlaceHolder>
</div>
<div id="Footer">
<p>footer</p>
</div>
</form>
</div>
</body>
</html>
这是我的CSS:
body {
margin: 20px 20px 20px 20px;
padding: 0;
font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
color: darkslategrey;
width: 960px;
background-color: #F8F8FF;
margin: 0;
height: 100%;
position: relative;
}
#container {
min-height: 100%;
position: relative;
height: 100%;
}
#header {
height: 120px;
overflow: hidden;
}
#Content {
margin: 5px;
background-color: #F8F8FF;
overflow: hidden;
}
#Footer {
position: absolute;
background: #F8F8FF;
text-align: center;
}
#header .Title {
color: #2E2E2E;
}
#header h1 {
padding-top: 1em;
background-color: #F8F8FF;
overflow: hidden;
font-size: 170%;
}
h1 {
padding-top: 1em;
background-color: #F8F8FF;
overflow: hidden;
font-size: 100%;
}
#header .TagLine {
color: #2E2E2E;
}
.Menu li {
display: inline;
margin: 0px;
}
.Menu a {
text-decoration: none;
background-color: #BDBDBD;
padding: 5px;
color: White;
border-right: .5px solid White;
margin: 0px;
}
.Menu a:hover {
background-color: #BDBDBD;
padding: 5px;
margin: 0px;
}
.Menu {
text-align: justify;
font-size: 25px;
}
.menuhover {
color: #fff;
}
以下是我无法解决的问题:
- 我想把页脚放在底部，但是这样 如果页面有很多内容应该仍然有效。
- 居中对齐整个页面和母版页
最佳答案
更新:试试这个
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Title</title>
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<form id="form1" runat="server">
<div id="header">
<h1 class="Title">Title</h1>
<span class="TagLine">tagline</span>
</div>
<div id="navigation">
<table cellpadding="0" cellspacing="0" width="1000" align="center">
<tr>
<td>
<asp:Menu ID="Menu1" runat="server" Orientation="Horizontal" CssClass="Menu" Font-Names="Verdana" ForeColor="Black" Width="800px">
<staticmenuitemstyle height="40px" />
<dynamicmenuitemstyle cssclass="Menu" height="40px" horizontalpadding="25px" />
<dynamichoverstyle cssclass="menuhover" />
<statichoverstyle cssclass="menuhover" />
<items>
<asp:menuitem text="Home" navigateurl="~/Default.aspx"></asp:menuitem>
</items>
</asp:Menu>
</td>
</tr>
</table>
</div>
<div id="body">
<asp:ContentPlaceHolder ID="MainContent" runat="server">
<!-- Page-specific content will go here... -->
</asp:ContentPlaceHolder>
</div>
<div id="Footer">
<p>footer</p>
</div>
</form>
</div>
</body>
</html>
CSS:
<style type="text/css">
body {
margin: 20px 20px 20px 20px;
padding: 0;
font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
color: darkslategrey;
width: 960px;
background-color: #F8F8FF;
margin: auto;
padding:auto;
height: 100%;
position: relative;
}
#container {
min-height: 100%;
position: relative;
height: 100%;
}
#body {
padding: 10px;
}
#header {
margin: 10px 10px 0px 10px;
height: 120px;
overflow: hidden;
}
#Content {
padding-top: 1em;
margin: 5px;
background-color: #F8F8FF;
overflow: hidden;
}
#Footer {
position: fixed;
background: #F8F8FF;
text-align: center;
bottom:0px;
}
#header .Title {
color: #2E2E2E;
}
#header h1 {
margin:0px;
padding:0px;
background-color: #F8F8FF;
overflow: hidden;
font-size: 170%;
}
h1 {
padding:0px;
margin:0px;
background-color: #F8F8FF;
overflow: hidden;
font-size: 100%;
}
#header .TagLine {
color: #2E2E2E;
}
.Menu li {
display: inline;
margin: 0px;
}
.Menu a {
text-decoration: none;
background-color: #BDBDBD;
padding: 5px;
color: White;
border-right: .5px solid White;
margin: 0px;
}
.Menu a:hover {
background-color: #BDBDBD;
padding: 5px;
margin: 0px;
}
.Menu {
text-align: justify;
font-size: 25px;
}
.menuhover {
color: #fff;
}
</style>
关于c# - ASP CSS 页脚问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38495354/