Html 如何更改侧边距的颜色而不是底部边距或顶部边距的颜色_Html_Css_Bootstrap 4

Html 如何更改侧边距的颜色而不是底部边距或顶部边距的颜色

html css bootstrap-4

Html 如何更改侧边距的颜色而不是底部边距或顶部边距的颜色,html,css,bootstrap-4,Html,Css,Bootstrap 4,因此，我必须重新制作此页面的html/css布局：我试图复制的是html页面上的灰色边框。通过添加以下代码，我可以获得边界： html { background-color: #D4D2DB; } body { margin-left: 10%; margin-right: 10%; background-color: white; } 但是现在当我进入一个几乎没有文本的页面时，我会在页面底部看到一个巨大的灰色区域。是否有一种方法可以让我始终将正文加载到页面

因此，我必须重新制作此页面的html/css布局：

我试图复制的是html页面上的灰色边框。通过添加以下代码，我可以获得边界：

html {
    background-color: #D4D2DB;
}
body {
    margin-left: 10%;
    margin-right: 10%;
    background-color: white;
}

但是现在当我进入一个几乎没有文本的页面时，我会在页面底部看到一个巨大的灰色区域。是否有一种方法可以让我始终将正文加载到页面底部，或者在自己的css文件或引导css文件中键入其他内容更好

例如：

My _ViewStartHTML代码如下所示：

<!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>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
    </footer>
</div>

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)
</body>
</html>

.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%;
}

您需要将

body

的高度设置为窗口的全高

将此添加到CSS中

html,
body {
  min-height: 100%;
}

这起作用了。一旦你的asnwer出现，我们将立即接受。谢谢你，这很有效。一旦你的asnwer出现，我们将立即接受。非常感谢。