Html 保持页眉和页脚在适当位置-仅滚动体_Html_Css

Html 保持页眉和页脚在适当位置-仅滚动体

html css

Html 保持页眉和页脚在适当位置-仅滚动体,html,css,Html,Css,我有一个包含3个部分的网页，这些部分是在共享布局页面上定义的。我有页眉、正文和页脚。页眉和页脚完全不变。正文包含的信息根据您所处的页面而变化。我想知道是否有可能设置它，这样就不会影响整个页面的滚动。页眉和页脚能否始终保持在窗口的顶部和底部，并且仅在页面的主体部分具有滚动效果以下是共享布局的当前cshtml文件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8

我有一个包含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>


Atlas网页
@style.Render（“~/Content/css”）
@Scripts.Render（“~/bundles/modernizer”）
*左撇子打保龄球的方法*

@ActionLink（“主页”、“索引”、“主页”）
@ActionLink（“团队”、“关于”、“关于”）
@ActionLink（“当前队列”、“当前列表”、“当前”）
@ActionLink（“退役设备”、“退役列表”、“退役”）
@ActionLink（“保龄球视频”、“视频”、“视频”）
@Html.ActionLink（“赞助商”、“赞助商”、“赞助商”）

@渲染部分（“特色”，必填项：false）
@RenderBody（）
&抄袭@DateTime.Now.Year:Southpaw Web解决方案和交易&trade；-电邮：jmilam90@gmail.com
神的程式化绘画，阿特拉斯，由shutterstock提供
@Scripts.Render（“~/bundles/jquery”）
@RenderSection（“脚本”，必需：false）

您可以使用

位置：固定。这将把元素固定到页面上，这样当用户滚动页面时它就不会移动。还可以添加顶部、左侧、右侧和底部值
header {
    position: fixed;
    top: 0;
}

footer {
    position: fixed;
    bottom: 0;
}

位置：固定这两个元素都是答案，当我这样做时，它们会严重地提升格式，并将页面左侧的所有内容都阻塞在一起。它与位置有关：固定因为如果我注释掉那行，它就会恢复正常。好的，我计算出了位置和宽度。尽管如此，窗口底部的页脚仍然被切断。我似乎无法让它垂直向上移动，也不明白为什么位置：固定和底部：0正在将部分页脚推离窗口底部。无需担心！我知道问题出在哪里了。我仍然在使用我在确定位置之前给出的页脚高度。我必须调整一下。