时间戳

首页 > 解决方案 > 使用 Bootstrap 4 时，如何定位（冲洗）我的大屏幕页脚？

css - 使用 Bootstrap 4 时，如何定位（冲洗）我的大屏幕页脚？

问题描述

我的页脚有问题。我正在使用带有 Razor 视图的 ASP.NET Core 2 MVC。现在我尝试了一切，包括评论： https ://css-tricks.com/couple-takes-sticky-footer/ & https://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-页外

请注意，我不想要固定页脚。我知道 SO 中有几个类似的主题，但我已经尝试了我找到的所有内容。我相信我错过了一些显而易见的事情。我已经在这一天工作了，它只是阻止了我。

每次我的页脚呈现在按钮下方Edit或Delete页面中间的某个位置时。我猜这可能与我的_Layout架构或Index文件中的某些东西有关。

我的_Layout.cshtml样子是这样的：

<div class="wrapper">
        <div class="header">
            <!--HEADER-->
        </div>
        <div class="content">
    <!--BODY-->
            @RenderBody()
        </div>
        <div class="footer">
    <!--FOOTER-->
            <footer>
                <div></div>
            </footer>
        </div>
    </div>

我的Index.cshtml样子（对于大多数情况，页脚呈现在Edit/Delete表单下方：

<div>
    @if (Context.User.Identity.IsAuthenticated)
    {
        <a asp-action="Create" class="btn btn-sm btn-primary adminBtn">Add new project</a>
    }
    <div>
        @foreach (var item in Model)
        {
            <div class="projectContainer col-lg-6">
                @if (Context.User.Identity.IsAuthenticated)
                {
                    <form asp-action="Delete" method="post">
                        <a asp-action="Edit" class="btn btn-sm btn-warning"
                           asp-route-projectID="@item.ProjectID">
                            Edit
                        </a>
                        <input type="hidden" name="ProjectID" value="@item.ProjectID" />

                        <button type="submit" class="btn btn-danger btn-sm">
                            Delete
                        </button>
                    </form>

                }
                <div class="innerContainer" style="background-color: @item.BackColor">
                    <div class="projectHeader col-xs-12">
                        @item.Name
                    </div>

                    <div class="hyperButton col-xs-12">
                        <a asp-action="Details" asp-route-projectID="@item.ProjectID">See more ></a>
                    </div>
                    <div class="projectPictures col-xs-12">
                        <a asp-action="Details" asp-route-projectID="@item.ProjectID"><img src="@item.PictureUrl" asp-append-version="true" /></a>
                    </div>
                </div>
            </div>
        }
    </div>
</div>

我site.css现在的样子是这样的：

html, body {
    height: 100%;
    overflow-x: hidden;
}
body {
    min-height: 100%;
    position: relative;
}

.footer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    background-image: url(/src/img/footBG.png);
    background-repeat: repeat;
    border-top: 3px solid #557DA8;
    height: 75px;
    text-align: center;
}
.footText {
    font-size: 20px;
    position: relative;
    top: 20px;
}

更新源代码：

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width">
    <link href="/src/lib/fontawesome/css/all.css" rel="stylesheet" />
    <link rel="stylesheet" href="/src/lib/bootstrap/css/bootstrap.min.css">
    <script src="/src/lib/bootstrap/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/dist/site.css" />
    <style>
        .input-validation-error {
            border-color: red;
            background-color: #fee;
        }
    </style>
    <title>
        Przemyslaw Bak - My projects
    </title>
</head>
<body>

    <div class="wrapper">
        <div class="header">
            <!--HEADER-->
            <div class="mainHeader">
                <div class="helloTextContainer col-12">
                    <div class="helloTxtWrapper">Hi! I am</div>
                </div>
                <div class="mainTextContainer col-sm-9 col-xs-12">
                    <div class="mainTxtWrapper">Przemyslaw Bak {developer}</div>
                </div>
                <div class="socialContainer col-sm-3 hidden-sm-down">
                    <!--VIEW COMPONENT-->

<a href="fb link" target="_blank" class="socialIcon"><i class="fab fa-facebook-square"></i></a>
<a href="li link" target="_blank" class="socialIcon"><i class="fab fa-linkedin"></i></a>
<a href="gh link" target="_blank" class="socialIcon"><i class="fab fa-github-square"></i></a>
                </div>
            </div>
            <div class="mainNavbar">
                <div><a class="mainButton projects" href="/">my projects</a></div>
                <div><a class="mainButton technologies" href="/MyTechnologies">technologies</a></div>
                <div><a class="mainButton about" href="/Literature">literature</a></div>
                <div><a class="mainButton contact" href="/ContactMe">about and contact</a></div>
            </div>
            <div class="stickyNavbar">
                <div><a class="mainButton projects" href="/">my projects</a></div>
                <div><a class="mainButton technologies" href="/MyTechnologies">technologies</a></div>
                <div><a class="mainButton about" href="/Literature">literature</a></div>
                <div><a class="mainButton contact" href="/ContactMe">about and contact</a></div>
            </div>
            <!--HERE TRIGGERS APP.JS-->
            <div class="emptySpace" id="app"></div>
        </div>

        <!--BODY-->
        <div class="content">

<!--button-->
<style>
    .projects {
        color: gray !important;
    }
</style>
<div>
    <div>
            <div class="projectContainer col-lg-6">
                <div class="innerContainer" style="background-color: #E8E8E8">
                    <div class="projectHeader col-xs-12">
                        Name of the project
                    </div>

                    <div class="hyperButton col-xs-12">
                        <a href="/MyProjects/Details?projectID=3">See more ></a>
                    </div>
                    <div class="projectPictures col-xs-12">
                        <a href="/MyProjects/Details?projectID=3"><img src="#" /></a>
                    </div>
                </div>
            </div>
            <div class="projectContainer col-lg-6">
                <div class="innerContainer" style="background-color: #fafafa">
                    <div class="projectHeader col-xs-12">
                        Name of the project
                    </div>

                    <div class="hyperButton col-xs-12">
                        <a href="/MyProjects/Details?projectID=2">See more ></a>
                    </div>
                    <div class="projectPictures col-xs-12">
                        <a href="/MyProjects/Details?projectID=2"><img src="/src/img/website1.png?v=pdiYJ15drelz9-8uTNfrtUab7HjRkk9REgc4EOUOLHU" /></a>
                    </div>
                </div>
            </div>
            <div class="projectContainer col-lg-6">
                <div class="innerContainer" style="background-color: #f9fbf8">
                    <div class="projectHeader col-xs-12">
                        Best project ever
                    </div>

                    <div class="hyperButton col-xs-12">
                        <a href="/MyProjects/Details?projectID=1">See more ></a>
                    </div>
                    <div class="projectPictures col-xs-12">
                        <a href="/MyProjects/Details?projectID=1"><img src="/src/img/website1.png?v=pdiYJ15drelz9-8uTNfrtUab7HjRkk9REgc4EOUOLHU" /></a>
                    </div>
                </div>
            </div>
    </div>
</div>

        </div>

        <!--FOOTER-->
        <div class="footer">
            <footer>
                <div class="footText">&copy 2018 - Przemyslaw Bak</div>
            </footer>
        </div>
    </div>


    <!--SCRIPTS-->
    <script src="/dist/bundle.js"></script>
    <script src="http://js.nicedit.com/nicEdit-latest.js" type="text/javascript"></script>
    <script type="text/javascript">bkLib.onDomLoaded(nicEditors.allTextAreas);</script>
</body>
</html>

目前，向下滚动我的页脚后看起来像这样（2018 - Przemyslaw Bak）： 在此处输入图像描述

UPDATE2：我正在使用 Bootstrap 4，也许它会改变一些东西

标签： cssasp.net-mvcrazorasp.net-core

解决方案

取出那个位置：absolute; 在页脚 CSS

.footer {
left: 0;
right: 0;
bottom: 0;
width: 100%;
background-image: url(/src/img/footBG.png);
background-repeat: repeat;
border-top: 3px solid #557DA8;
height: 75px;
text-align: center;

}

html, body {
    height: 100%;
    overflow-x: hidden;
}
body {
    min-height: 100%;
    position: relative;
}

.footer {
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    background-image: url(/src/img/footBG.png);
    background-repeat: repeat;
    border-top: 3px solid #557DA8;
    height: 75px;
    text-align: center;
}
.footText {
    font-size: 20px;
    position: relative;
    top: 20px;
}
<div class="wrapper">
        <div class="header">
            <!--HEADER-->
        </div>
        <div class="content">
    <!--BODY-->
            <p>@RenderBody()</p><p>@RenderBody()</p><p>@RenderBody()</p><p>@RenderBody()</p><p>@RenderBody()</p><p>@RenderBody()</p><p>@RenderBody()</p><p>@RenderBody()</p><p>@RenderBody()</p><p>@RenderBody()</p><p>@RenderBody()</p><p>@RenderBody()</p><p>@RenderBody()</p><p>@RenderBody()</p><p>@RenderBody()</p><p>@RenderBody()</p><p>@RenderBody()</p><p>@RenderBody()</p><p>@RenderBody()</p><p>@RenderBody()</p><p>@RenderBody()</p><p>@RenderBody()</p><p>@RenderBody()</p><p>@RenderBody()</p><p>@RenderBody()</p><p>@RenderBody()</p><p>@RenderBody()</p><p>@RenderBody()</p><p>@RenderBody()</p><p>@RenderBody()</p><p>@RenderBody()</p><p>@RenderBody()</p><p>@RenderBody()</p><p>@RenderBody()</p><p>@RenderBody()</p><p>@RenderBody()</p><p>@RenderBody()</p><p>@RenderBody()</p><p>@RenderBody()</p><p>@RenderBody()</p><p>@RenderBody()</p><p>@RenderBody()</p><p>@RenderBody()</p><p>@RenderBody()</p><p>@RenderBody()</p><p>@RenderBody()</p><p>@RenderBody()</p><p>@RenderBody()</p><p>@RenderBody()</p><p>@RenderBody()</p><p>@RenderBody()</p><p>@RenderBody()</p><p>@RenderBody()</p><p>@RenderBody()</p><p>@RenderBody()</p><p>@RenderBody()</p>
        </div>
        <div class="footer">
    <!--FOOTER-->
            <footer>
                <div>Div inside footer</div>
            </footer>
        </div>
    </div>

推荐阅读