个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
25
4
我有一个网页，其中包含在共享布局页面上定义的 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/
25
4
0
我想将页 footer 分放在文档的每一页上，除了第一页。 我通过扩展 TCPPDF 类并覆盖其页脚方法来创建我的自定义页脚。 然后根据文档并使用以下示例，我明白我应该使用 SetPrintHeade
我的页面分为 3 个部分。 页眉 主要 和页脚。 header 固定在顶部，大小为 109px，边框高 6px，因此 main 到顶部的边距为 109px。我希望 main 扩展到 heade
我正在构建一个网站，其中每个页面都有一个 , 和一个 . 据我了解，应用程序的入口点应包括这三个组件，并且应根据用户所在的路线呈现一个或多个附加组件。 我已经像这样构建了我的入口点: App.js
谁能告诉我为什么Footer出现在页面顶部，而我看不到Header或LayoutDiv9？ 这是我添加的第二个 CSS 表，第一个是自动添加的 Fluid Grid Layout CSS 表，我根本没
我的应用程序中有这个页面: http://actibities-uniongr.rhcloud.com/pages/view-demo 如果您将浏览器的窗口缩短到小于 1000 像素并水平滚动，您会看
这个问题已经有答案了: Python command line interaction library? (3 个回答) 已关闭10 年前。 如何创建一个包含静态页眉和页脚的 Python 脚本，如下
我正在努力为我们的 Mediboard 元素提供完整的 HTML 页眉/页脚打印功能。 从长远来看，我知道 CSS3 页面媒体模块将满足我的需求，但这至少需要两三年时间。 所以我试着让它与 CSS2
我可以在每页上打印页眉，但我不熟悉打印页边距。我认为 @page css 可以工作，但它似乎不会影响页边距。如果我在正文上设置边距，它在第一页上有效，但后续页面默认从上边距开始，将页眉放在文本顶部。
有什么办法，就像 WordPress 一样，创建 header.php、theme-file.php 和 footer.php，然后使用钩子(Hook)将它们组合起来？对我来说仍然复制皮肤文件似乎
我正在努力解决以下问题。我有一个 UICollectionView，它的布局的页眉和页脚引用大小设置为一个值(比如 40.0)。当我删除/插入单元格并且集合 View 位于页眉和页脚不在屏幕上的位置时
我是 javascript 新手。我想使用 ajax 加载我的网站主模板文件(页眉、页脚、侧边栏)。我的布局文件如下所示。 布局.php header(); $ret .= $app->side
这是我的代码。内容图像曾短暂地工作，但现在消失了。 试图让Header只出现在页面顶部，图片高度为1000px。页面底部的页脚，图像高度为 1000px。内容图像需要重复以适合内容。这是一个博客，所以
我正在尝试将以下图像添加为网站内容的背景: http://webbos.co/vibration/wp-content/themes/vibration-child-theme/images/back
如何更改样式表中的页眉/页脚文本颜色？ 我试过了，没有结果: footer: { parent: normal, alignment: TA_CENTER, textColor: red
我有以下 HTML，它有一个页眉、一个可滚动的内容和一个页脚，并且工作正常。 我想添加到此 HTML 的是一个包装所有三个 div 的表单，问题是一旦我用标签包装 div，布局就会中断。有什么建议吗？
我使用 jQuery 创建了具有不同状态的页眉和页脚导航。单击页脚导航时，我在更新页眉导航时遇到问题。例如，当用户单击页脚导航中的列表 1 时，我希望页眉导航也更新为相同的选择。我包含了一个 jsfi
我需要创建一个网页，其中包含正常页眉 + 粘性页脚 + 垂直拉伸(stretch)的流体内容。但是，这些位置不能是绝对的，因为我需要 780 像素的页面最小高度。 我设法使用表格完成了此操作，但我真的
我知道这可能是一件非常简单的事情，但除了很棒的 Stack Overflow 社区之外，我不知道有谁可以帮助我解决我的问题。我已经有一段时间没有在这种程度上使用 HTML/CSS 了。 我正在尝试为我
我前段时间做了一个wordpress网站。我今天刚刚看了一眼，由于某种原因，这个标志已经向东传播了。它已经厌倦了 clearfix 的 float 、文本对齐和边距:0 自动。谁能告诉我发生了什么，或
我需要帮助创建包含#header、#footer 和#main 的div 的代码。我只是不确定它在代码中的位置。我创建了一个带有 css 样式表的简单 html 页面。我并不是要任何人为我编写代码，因
我是一名优秀的程序员,十分优秀！