我有一个网页，其中包含在共享布局页面上定义的 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>© @DateTime.Now.Year: Southpaw Web Solutions™ - 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>
最佳答案
您可以使用position: fixed;。这会将元素固定到页面上，以便在用户滚动页面时它不会移动。您还可以添加顶部、左侧、右侧和底部值。
header {
position: fixed;
top: 0;
}
footer {
position: fixed;
bottom: 0;
}
关于html - 保持页眉和页脚就位 - 仅滚动正文，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24063387/