如何更改我的边缘颜色而不是底部边缘或顶部边缘的颜色

时间:2017-09-19 08:31:50

标签: html css bootstrap-4

所以我必须重新制作这个页面的html / css布局: enter image description here

我试图复制atm的是html页面上的灰色边框。我可以通过添加此代码来获取边框:

SELECT ID, A, B, C FROM your_table WHERE A = 'True'
UNION ALL
SELECT ID, A, B, C FROM your_table WHERE B = 'True' AND NOT EXISTS
   (
        SELECT 1 FROM your_table t2 WHERE t2.ID = ID AND A = 'True'
   )

但现在当我进入一个几乎没有文字的页面时,我会在页面底部看到一个巨大的灰色区域。有没有办法让我总是将正文加载到页面底部或者我在自己的css文件或bootstrap css文件中输入其他东西更好?

实施例: enter image description here

我的_ViewStart html代码如下所示:

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

我的css代码如下:

<!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>

1 个答案:

答案 0 :(得分:3)

您需要将body的高度设置为窗口的整个高度

将此添加到您的CSS

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