1
這是我的佈局，沒有身體如何在底部沒有內容時將頁腳保持在底部。頁腳應響應
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title>Shop | E-Shopper</title>
<link href="~/Content/bootstrap.min.css" rel="stylesheet">
<link href="~/Content/font-awesome.min.css" rel="stylesheet">
<link href="~/Content/prettyPhoto.css" rel="stylesheet">
<link href="~/Content/price-range.css" rel="stylesheet">
<link href="~/Content/animate.css" rel="stylesheet">
<link href="~/Content/main.css" rel="stylesheet">
<link href="~/Content/responsive.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
<link rel="shortcut icon" href="~/Content/images/ico/favicon.ico">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="~/Content/images/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="~/Content/images/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="~/Content/images/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="~/Content/images/ico/apple-touch-icon-57-precomposed.png">
</head>
<body>
<header id="header">
<!--header-->
<div class="header-middle">
<!--header-middle-->
<div class="container">
<div class="row">
<div class="col-sm-4">
<div class="logo pull-left">
<a href="@Url.Action("Index", "Home")">
<img src="~/Content/images/home/logo.png" alt="" />
</a>
</div>
</div>
<div class="col-sm-8">
<div class="shop-menu pull-right">
<ul class="nav navbar-nav">
@if (Session["Name"] != null)
{
<li style="margin-top:10px">
<p>
Welcome
@Session["UserName"].ToString()
</p>
</li>
<li><a href="@Url.Action("EditProfile", "Home",new {id=Session["UserID"] })"><i class="fa fa-user"></i> Account</a></li>
<li>
<a href="@Url.Action("Logout", "Account")">
Logout
</a>
</li>
}
else
{
<li>
<a href="@Url.Action("Login", "Account")">
Login
</a>
</li>
}
</ul>
</div>
</div>
</div>
</div>
</div><!--/header-middle-->
<div class="header-bottom">
<!--header-bottom-->
<div class="container">
<div class="row">
<div class="col-sm-9">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="mainmenu pull-left">
<ul class="nav navbar-nav collapse navbar-collapse">
<li>
<a href="@Url.Action("ListOfProductCategory", "ProductCategory")" class="elements">
<span>Manage Product categories</span>
</a>
</li>
<li>
<a href="@Url.Action("ListOfProducts", "Product")" class="elements">
<span>Manage Products</span>
</a>
</li>
<li>
<a href="@Url.Action("ShowUsers", "Home")" class="elements">
<span>Manage Customers</span>
</a>
</li>
<li>
<a href="@Url.Action("ViewOrders", "Home")" class="elements">
<span>View Orders</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</header>
<section>
<div class="container">
<div class="row">
@RenderBody()
</div>
</div>
<footer id="footer">
<!--Footer-->
<div class="footer-bottom">
<div class="container">
<div class="row">
<p class="pull-left">Copyright © 2016 Shopping cart. All rights reserved.</p>
<p class="pull-right">Designed by <span><a target="_blank" href="http://www.atdrive.com">AtDrive</a></span></p>
</div>
</div>
</div>
</footer><!--/Footer-->
@RenderSection("scripts", required: false)
</section>
<script src="~/Scripts/jquery.js"></script>
<script src="~/Scripts/price-range.js"></script>
<script src="~/Scripts/jquery.scrollUp.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<script src="~/Scripts/jquery.prettyPhoto.js"></script>
<script src="~/Scripts/main.js"></script>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
</body>
</html>
這是用於頁腳我有main.css的ID頁腳。
#footer {
background: #F0F0E9;
}
我不知道如何保持這個頁腳在底部。當沒有正文內容時，它正處於中間位置。
我想在頁腳底部時，沒有身體的存在。正文內容爲空。此外，頁腳必須具有響應性，並且應該處於任何分辨率的底部。 –