Question

我有一个网页，其中有3个部分在共享布局页面上定义。我有一个标题，正文和页脚。页眉和页脚根本不会改变。正文包含的信息会根据您所在的页面而变化。我想知道是否可以设置它，而不是影响整个页面的滚动。。。可以将页眉和页脚一致地保持在窗口的顶部和底部，并且只有滚动效果页面的主体部分。

以下是共享布局的当前cshtml文件。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Atlas Web Pages</title>
        @Styles.Render("~/Content/css")
        @Scripts.Render("~/bundles/modernizr")
        <script src="@Url.Content("~/Scripts/knockout-2.1.0.js")" type="text/javascript"></script>
        <script src="@Url.Content("~/Scripts/jquery-1.7.1.js")" type="text/javascript"></script>
    </head>
    <body>
        <header>
            <div class="web-header">
                <div class="logo-image">
                    <img src="~/Images/Atlas.png" style="float: left" height="125" width="150" alt="Atlas Logo" />
                    <img style="vertical-align:top" src="~/Images/WebPageLogo.png" height="85" width="820" alt="Atlas Logo" />
                    <div style="color:#FFF">*A southpaw's approach to bowling*</div>
                </div> 
                <div class="float-right">
                    <nav>
                        <ul id="menu">
                            <li>@Html.ActionLink("Home", "Index", "Home")</li>
                            <li>@Html.ActionLink("The Team", "About", "About")</li>
                            <li>@Html.ActionLink("Current Line-Up", "CurrentList", "Current")</li>
                            <li>@Html.ActionLink("Retired Equipment", "RetiredList", "Retired")</li>
                            <li>@Html.ActionLink("Bowling Videos", "Videos", "Video")</li>
                            <li>@Html.ActionLink("Sponsors", "Sponsors", "Sponsor")</li>
                        </ul>
                    </nav>
                </div>
            </div>
        </header>
        <div id="body">
            @RenderSection("featured", required: false)
            <section class="content-wrapper main-content clear-fix">

                @RenderBody()
            </section>
        </div>
        <footer>
            <div class="content-wrapper">
                <div class="float-left">
                    <p>&copy; @DateTime.Now.Year: Southpaw Web Solutions&trade; - Email: jmilam90@gmail.com</p>
                    <p>Stylized drawing of the god, Atlas, courtesy of shutterstock</p>

                </div>
                <div class="float-right" style="padding-top:13px">
                        <a href ="www.facebook.com/jmilam90"><img src="~/Images/FBIcon.png" alt="Follow on Facebook" height="40" width="40" /></a>
                        <a href ="www.twitter.com/jmilam900"><img src="~/Images/TwitIcon.png" alt="Follow on twitter" height="40" width="40" /></a>
                    </div>
            </div>
                <table id="logo-table">
                    <tr>
                        <td>
                            <img src="~/Images/MBW.png" width="99" height="60" alt="McCorveys Bowling World Logo" />
                        </td>
                        <td>
                            <img src="~/Images/EboniteLogo.png" width="93" height="60" alt="Ebonite Logo" />
                        </td>
                        <td>
                            <img src="~/Images/TrackLogo.png" width="152" height="60" alt="Track Bowling Logo" />
                        </td>
                        <td>
                            <img src="~/Images/HammerLogo.png" width="100" height="60" alt="Hammer Bowling Logo" />
                        </td>
                        <td>
                            <img src="~/Images/ColumbiaLogo.png" width="123" height="60" alt="Columbia 300 Logo" />
                        </td>
                    </tr>
                </table>
        </footer>
        @Scripts.Render("~/bundles/jquery")
        @RenderSection("scripts", required: false)
    </body>
</html>

Answer 1

您可以使用position: fixed;。这将把元素固定到页面，以便在用户滚动页面时它不会移动。您还可以添加顶部，左侧，右侧和底部值。

header {
    position: fixed;
    top: 0;
}

footer {
    position: fixed;
    bottom: 0;
}

保持页眉和页脚到位 - 仅滚动体

1 个答案: