所以我必须重新制作此页面的 html/css 布局:
我试图复制 atm 的是 html 页面上的灰色边框。我能够通过添加此代码来获取边框:
html {
background-color: #D4D2DB;
}
body {
margin-left: 10%;
margin-right: 10%;
background-color: white;
}
但是现在，当我转到一个几乎没有文本的页面时，我会在页面底部看到一个巨大的灰色区域。有没有办法让我始终将正文加载到页面底部，或者在我自己的 css 文件或 Bootstrap css 文件中键入其他内容对我来说更好？
例子:
我的 _ViewStart html 代码如下所示:
<!DOCTYPE html>
<html>
<head>
<div class="headerclass">
<img class="logotest" src="~/Content/Fotos/logo.png" />
</div>
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
<link href="~/Content/CSS/StyleSheetLayout.css" rel="stylesheet" />
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - My ASP.NET Application</title>
</head>
<body>
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<ul>
<li class="@(ViewContext.RouteData.Values["Action"].ToString() == "Index" ? "active" : "")">@Html.ActionLink("Home", "Index", "Home")</li>
<li class="@(ViewContext.RouteData.Values["Action"].ToString() == "About" ? "active" : "")">@Html.ActionLink("About", "About", "Home")</li>
<li class="@(ViewContext.RouteData.Values["Action"].ToString() == "Contact" ? "active" : "")">@Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>
</div></div></div>
<div class="container body-content">
@RenderBody()
<hr/>
<footer>
<p>© @DateTime.Now.Year - My ASP.NET Application</p>
</footer>
</div>
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)
</body>
</html>
我的 CSS 代码如下所示:
.headerclass {
max-width: 1280px;
min-width: 768px;
background-color: #ffffff;
}
.logotest {
margin-top: -2%;
width: 85px;
height: 40px;
margin-left: 17%;
margin-bottom: 1.5%;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #ffffff;
border-bottom: solid 1px;
border-top: solid 1px;
}
li {
float: left;
}
li a {
display: block;
color: rgb(110,110,120);
text-align: center;
padding: 13px 50px;
text-decoration: none;
border-right: solid 1px;
}
li a:hover {
text-decoration: none;
color: #0099cc;
}
.active {
background: #0099CC;
color: #ffffff;
}
.active a{
color: #ffffff;
}
.active a:hover {
color: #ffffff;
}
html {
background-color: #D4D2DB;
}
body {
margin-left: 10%;
margin-right: 10%;
background-color: white;
}
最佳答案
您需要将body 的高度设置为窗口的全高
将此添加到您的 CSS
html,
body {
min-height: 100%;
}
关于html - 如何更改我的侧边距的颜色而不是底部或顶部的颜色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46295576/