我有一个乱七八糟的网站，如下所示。
我的 _Layout.cshtml 代码是:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>@ViewBag.Title</title>
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
</head>
<body>
<div id="wrap">
@RenderBody()
<header>
<h1>Document Heading</h1>
<div id="nav">
<ul id="menu">
<li>@Html.ActionLink("Home", "Index", "Home")</li>
<li>@Html.ActionLink("About", "About", "Home")</li>
<li>@Html.ActionLink("Contact", "Contact", "Home")</li>
<li>@Html.ActionLink("Sermon", "Sermon", "Home")</li>
</ul>
</div>
</header>
<div id="main-content">
<h2>Column 1</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>
</div>
<div id="sidebar">
<h2>Column 2</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
</ul>
</div>
<footer>FOOTER</footer>
</div>
View 非常简单:
@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
和 CSS:
body
{
background-color: #FFCC99;
border-top: solid 10px #000;
color: #333;
font-size: .85em;
font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
margin: 0;
padding: 0;
}
#nav
{
float: left;
}
/* menu
----------------------------------------------------------*/
ul#menu
{
font-size: 1.3em;
font-weight: 600;
margin: 0 0 5px;
padding: 0;
text-align: right;
}
ul#menu li
{
display: inline;
list-style: none;
padding-left: 15px;
}
ul#menu li a
{
background: none;
color: #999;
text-decoration: none;
}
ul#menu li a:hover
{
color: #333;
text-decoration: none;
}
header
{
background-color: #7ac0da;
background-image: -ms-linear-gradient(left, #7ac0da 0%, #a4d4e6 100%);
background-image: -o-linear-gradient(left, #7ac0da 0%, #a4d4e6 100%);
background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #7ac0da), color-stop(1, #a4d4e6));
background-image: -webkit-linear-gradient(left, #7ac0da 0%, #a4d4e6 100%);
color: #3e5667;
padding: 20px 40px 30px 40px;
}
#main-content
{
float: left;
width: 75%;
}
#sidebar
{
float: right;
width: 25%;
}
我想修改 CSS 以解决问题。
- 第 1 列的宽度需要为 25%，第 2 列的宽度需要为 75%。它不适用于 CSS。
- 页脚不在真正的底部位置。
最佳答案
页脚未出现在底部的原因是没有清除 float 。添加 clear: both 到您的页脚将解决问题。
关于html - MVC4 Web 的布局 CSS，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17030610/