两个具有固定页眉和页脚的可滚动内容栏
是一种在网页或应用程序中常见的布局形式，通常用于展示大量内容的页面，以提供更好的用户体验和导航功能。以下是对这个布局的完善且全面的答案：
概念： 两个具有固定页眉和页脚的可滚动内容栏是指在网页或应用程序中，页面内容被分为两个部分，上方和下方各有一个固定的页眉和页脚，而中间的内容区域可以滚动展示更多内容。这种布局形式常用于需要在页面中展示大量内容，并希望保持页面的导航和结构的情况下，提供更好的用户体验。
分类： 两个具有固定页眉和页脚的可滚动内容栏可以分为两种类型：
- 基于传统Web技术的实现：使用HTML、CSS和JavaScript等前端技术，通过设置固定定位（fixed positioning）和滚动（scrolling）属性来实现固定页眉和页脚的效果。
- 基于前端框架或组件库的实现：许多前端框架或组件库提供了现成的解决方案，可以轻松实现固定页眉和页脚的效果，例如Bootstrap、Material-UI、Ant Design等。
优势： 使用两个具有固定页眉和页脚的可滚动内容栏布局有以下优势：
- 提供更好的导航和结构：通过固定页眉和页脚，用户可以轻松访问到网页或应用程序的重要导航链接、品牌标识和其他常见功能。
- 改善用户体验：对于长页面或大量内容的情况，通过让内容区域可滚动，可以避免页面过长导致的阅读困难，提升用户的浏览和查找体验。
- 增加信息展示区域：固定页眉和页脚占据固定的位置，中间的内容区域可以更大程度地展示重要信息，提高信息的展示效果和页面的整体美观度。
应用场景： 两个具有固定页眉和页脚的可滚动内容栏适用于许多场景，包括但不限于：
- 新闻网站或博客：用于展示大量文章或新闻内容，并提供导航链接和网站信息。
- 电子商务网站：用于展示商品列表或分类，并提供购物车、搜索框和用户登录等功能。
- 企业官方网站：用于展示公司介绍、产品信息、联系方式等，并提供导航链接和版权声明等。
推荐的腾讯云相关产品和产品介绍链接地址： 腾讯云提供了一系列的云计算产品和解决方案，以下是几个与页面布局相关的产品：
- 腾讯云CDN（内容分发网络）：可以通过加速静态资源的分发和缓存，提供更快的访问速度和较低的延迟。产品介绍链接：https://cloud.tencent.com/product/cdn
- 腾讯云Web应用防火墙（WAF）：提供对网站的安全防护，包括DDoS防护、Web漏洞扫描和防篡改等功能，确保网站的安全性和可用性。产品介绍链接：https://cloud.tencent.com/product/waf
- 腾讯云Serverless云函数（SCF）：通过使用无服务器计算模型，可以轻松部署和运行无需管理服务器的代码，从而实现灵活的可伸缩性和成本优化。产品介绍链接：https://cloud.tencent.com/product/scf
这些产品可以帮助开发者在构建具有固定页眉和页脚的可滚动内容栏时，提供更好的性能、安全和可扩展性。
相关·内容
1回答
我试图使修复页脚和页眉类似于本页中的页眉：
但我所做的一切成功的是页眉和页脚，这是修复，但当你滚动它消失，只有当你停止滚动它又回来了。
*当我说到英尺，我指的是肚脐。就像这样：
浏览 1提问于2012-02-14得票数 0
我有两个独立滚动的div，一个有页眉和页脚。
<body>
<div class="container col-1">
Many listings
</div>
<div class="container col-2">
<div class="header">Fixed Header</div>
<div class="content">Lots of content</div>
<d
浏览 1提问于2016-05-23得票数 0
回答已采纳
1回答
您好，我正在建立一个移动网页，我的内容只会滚动，我的页脚和页眉是位置:固定-我可以使内容，使它不滚动下的页眉或页脚，以便它只是在自己的div滚动。
我想这样做的原因是我的页眉和页脚会有一些不透明，如果内容被滚动到下面，它看起来就不好。
这是我制作的jsfiddle，只是为了向您展示卷轴的示例
浏览 0提问于2012-06-05得票数 3
回答已采纳
1回答
如何在我的index.html中提供滚动条，使页眉和页脚div保持固定在屏幕上，而位于页眉和页脚之间的内容部分可以在内容超出可用空间时滚动。
有谁知道吗？
提前谢谢。
浏览 2提问于2012-09-19得票数 0
2回答
jQuery移动css滚动并单击
、、、、
我正在为智能手机开发一个移动网站，并使用jquery mobile。第一个测试：
我已经向页面添加了内容，所以它应该是可滚动的，但当我滚动页眉和页脚时，滚动时间将被禁用。:(第二个测试：
jquery mobile文档()提供了data-position="fixed“应该禁止隐藏页眉和页脚的信息
我做错了什么？
浏览 2提问于2012-03-04得票数 1
回答已采纳
我见过几个类似的问题(并做了大量的研究)，但我不认为其中任何一个都不能解决这个特定的问题.
我在这里给出了一个简单的例子：
这不是我使用的实际代码(因为我使用的是WordPress)，但它说明了我的问题，具体而言：
我正在工作的网站，将有一个固定的页眉和页脚，与内容在两者之间。我已经这么做了，效果很好。但是，我不希望页眉和页脚接触到浏览器的顶部和底部(例如，它们将有20 on的边距，因此容器和浏览器之间不会有太多的空间)。
问题是，当您滚动页面时，内容在页眉/浏览器和页脚/浏览器之间的空间中是可见的。如图所示，您可以看到它在页眉和页脚下面滚动；我想避免这种情况。
是否有某种方式可以使内容容器的
浏览 1提问于2014-04-18得票数 1
回答已采纳
4回答
敬请访问以下网站：
尝试调整窗口大小，使其小到出现水平滚动条的程度。向右拖动水平滚动条，问题就出现了。页眉和页脚似乎没有相应地调整。在css中，页眉和页脚元素的宽度为100%。
有什么办法解决这个问题吗？谢谢!
浏览 0提问于2012-05-30得票数 2
回答已采纳
1回答
我一直在疯狂地试图在我正在工作的网站上解决响应问题，而我在这里或其他地方找不到任何解决方案。主要的问题是我的固定脚。在站点的登陆页面上，有一个页眉、主区域和页脚(当箭头单击时页面会展开，但这是不相关的)。
我已经使用固定定位将页脚附加到页面底部。当屏幕宽度>1024 is时，页眉、主页脚和页脚宽度为100%。在1024 as以下，页眉和页脚宽度变为静态(1024为静态宽度)。
问题是，有一个点，页脚应该溢出在屏幕的右侧(因为宽度变得固定)。我可以向右滚动，在页眉中看到菜单的其余部分，但是页脚不会向右滚动。相反，它只是切断了通常存在的一切。
我尝试用相关代码重新创建这个问题，这里是：，但是
浏览 3提问于2013-08-21得票数 0
回答已采纳
2回答
我有一个网页，我正在工作。它有一个固定的页眉和页脚，所以只有body元素才会滚动。当需要滚动条的页面被拉上来时，滚动条将页眉和页脚中的元素推到左侧。是否有办法使滚动条只出现在网页的“滚动”部分，而不是垂直到达页眉和页脚元素？
示例( "S“表示滚动条仅位于body元素中)：
+----------------------------------------------------------+
| This is the Header |
+-----------------------------------
浏览 1提问于2014-06-05得票数 0
回答已采纳
1回答
我正在尝试建立一个使用sencha touch的iphone的网站。我是sencha和ext的新手。
我想有一个页眉，页脚和内部内容布局。它可以理解为具有页眉和页脚的母版页，这将在每个页面上使用。
页眉和页脚应该是可滚动的(不是停靠的！)我希望在页面之间有一个动画。
通常，该网站将有一个页眉，菜单和页脚的主页。如果用户点击菜单中的某个按钮(即'ABOUT')页面应该滑到'ABOUT‘页面的右侧。这个页面将有一个标题，一些内容，后退按钮和页脚。页眉和页脚将看起来像在主页上。
我已经看到了很多使用停靠页眉和页脚的解决方案，但是我还没有找到一个能够以我想要的方式工作的方案(问
浏览 3提问于2011-04-20得票数 1
我需要组成一个页面，其中有一个页眉和页脚，以及一些文本之间的内容。
页面大小是固定的(一个iframe)，并且有一个固定高度的页脚，但是页眉的内容可以改变(它会被翻译，因此文本行数会变化)。页眉和页脚都不应该有滚动条。如果它们之间的内容很长，则应该向内容本身添加一个滚动条。无论我做什么，我都不能让它只在CSS上工作。我可以滚动到整个页面(或者顶部区域，包括页眉)，或者内容div的文本超出了它的边界。
这里有一个例子来说明我的问题： (我只想要一个绿色区域的卷轴)
哦没有了JavaScript..。:)
谢谢。
浏览 1提问于2013-07-15得票数 0
回答已采纳
我已经在我的iPhone应用程序中嵌入了一个UIWebView，我希望在页面上始终保持一个锁定的页眉和页脚DIV，以及一个可滚动的中心DIV。
我知道我可以使用UIView控件的页眉和页脚来做这件事，但我希望页眉和页脚是HTML，因为纯HTML/JS/CSS解决方案将更容易移植到Android/PalmPre/AdobeAir，它很快就会出现在我的待办事项列表中。
我可以使用这里提到的技术来做到这一点：
但这需要用户使用两个手指来滚动div，这对我来说并不满意……
对如何做到这一点有什么建议吗？
谢谢,
布拉德
浏览 5提问于2009-03-05得票数 3
回答已采纳
jQuery手机(v1.1)的固定页脚应该停留在屏幕底部，并浮动在文本的顶部，否则将始终可见。这在浏览器中效果很好，但当我将它与Phonegap (现在称为Cordova) (v1.6)捆绑到一个Android应用程序中时，页脚就会停留在它第一次出现的地方。这是与文本一起滚动的页脚。
真正奇怪的是，当你点击屏幕时，页眉和页脚被固定在页面的顶部和底部(这是jQuery手机内置的具有固定页眉和页脚的功能)，当你再次点击它时，页眉和页脚又回到了浮动状态。但是这一次，页脚停留在屏幕的底部，而不是像从一开始就应该的那样，与文本一起滚动。
你知道怎么固定页脚吗？
下面是我使用的代码：
<di
浏览 2提问于2012-04-20得票数 2
1回答
html代码：
<body>
<header style="background-color:green;">header</header>
<main>
<p>some content</p>
<div style="width:2000px">some wide content, makes overflow body</div>
<p>some content</p>
</mai
浏览 15提问于2017-07-12得票数 2
5回答
多年来，我一直在为此而苦苦挣扎。今年，可能会有一个解决方案。我需要一个标题，内容和页脚。我希望页脚在页面的底部，页眉在顶部，内容在之间。
我希望内容有一个滚动条。
问:这是不是要求太多了？
浏览 0提问于2010-06-03得票数 2
回答已采纳
2回答
我正试图在HTML/CSS中实现这一点：
+---------------------------------------------------------------------+
| HEADER DIV |
+------------+--------------------------------------------------------+
| |
浏览 6提问于2015-03-03得票数 2
回答已采纳
我的网页应用程序中的滚动条应该只滚动“内容”部分。但是，只要我滚动到内容的末尾或顶部，滚动条就会滚动页眉或页脚。另外，页面会被拖走，看起来很难看。
以下是一些图片：
页眉和页脚固定在位置上.
标题：
<div data-role="header" data-theme="b" data-position="fixed" data-tap-toggle="false">
页脚：
<div data-role="footer" data-position="fixed" data-t
浏览 10提问于2013-06-22得票数 2
2回答
我试图在我的模板上有一个粘性的页眉和页脚，这是可行的，但我有一个问题，因为id=“页面”并不总是滚动到页眉下！
这是网站，
我发现带有position=“相对”的元素有问题，比如标签和"Patricia signed...“框项目，作为一个例子。
.box ul.supports-list li.last {
width: 200px;
position: relative;
float: left;
}
如何修复id=“页面”，使其中的所有元素始终滚动到页眉和页脚下？
浏览 1提问于2012-06-02得票数 0
回答已采纳
2回答
已使用jQuery移动电话创建电话间隙应用程序。大多数情况下，一切都很好，接受持久的页眉和页脚栏。当单击或滚动时，它们会消失。他们的立场也经常搞砸。我很想弄清楚如何解决这个问题。如果有任何代码可以粘贴，请告诉我。
另外，有没有什么特别的CSS我需要做的？
我还尝试使用：$.fixedToolbars.setTouchToggleEnabled(false)；，但没有成功。有什么特别的地方应该放吗？
任何帮助都是非常感谢的。
浏览 0提问于2011-11-14得票数 1
回答已采纳
jQuery手机:我可以做页眉/页脚真正的css固定(比如css位置:固定)？
为了修复页眉和页脚，我尝试使用jquery-mobile的数据位置=“固定”
但在电话里它看起来很丑:当我滚动时，它会出现，消失，闪烁，嗯..。如果将头部样式设置为：style="position:fixed;z-index:1000"，那么这并不意味着在css中，它看起来要好得多-它只是修复了，仅此而已。
有什么办法可以做到这一点吗？
浏览 2提问于2012-01-02得票数 1
回答已采纳
2回答
我已经开发了一个网站，有固定的页脚和页眉。内容也是固定的(但这只是因为页脚和页眉可以隐藏，但我不会在我的示例中显示这一点)。我遇到的问题是iPhones和iPads。这是我有过的两个问题。有一次，它允许我将页眉和页脚拖过显示空格的body/html限制(不知道为什么要这样做)，而另一个问题是，我一松开手指就停止滚动。后者似乎通过这样做是可以解决的：
overflow-x: hidden;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
虽然我已经读到这不是一个受支持的CSS属性，但它似乎确实做到了这一点。我试图用JavaScript
浏览 10提问于2017-09-22得票数 2
回答已采纳
1回答
我正在尝试复制静态页脚，如在聚合物芯头面板中所示。
到目前为止，我有一个核心页眉面板，包括一个页脚和主要内容区域与“fit”属性，因此它延伸到视口的高度。
<body fullbleed layout vertical>
<core-header-panel flex style="background-color: red;">
<core-toolbar id="mainheader">
Header
</core-toolbar>
<div fit layout
浏览 0提问于2014-12-03得票数 2
3回答
我正在使用phonegap和jqm开发一个简单的应用程序，我的问题是当您到达页面的顶部或底部时，页脚和页眉是可滚动的。
如果我在页面的顶部，我向上滚动，页眉会滚动-页脚也会滚动(参见所提供的图像)
我试过iScroll，但它不能解决任何问题。我已经尝试过覆盖jqm css设置，将body的溢出设置为隐藏，将.ui-content div的溢出设置为scroll - by也不起作用。
我还尝试将body位置设置为fixed。然后，当我滚动时，主体没有移动，但一个黑色的屏幕从底部升起，隐藏了页面。
有什么想法吗？
浏览 1提问于2012-01-20得票数 3
2回答
CSS相对大小的页眉/页脚
、、、、
我不是CSS专家，所以我可能遗漏了一些明显的东西。我正在尝试设置一个相对大小的页眉和页脚(以便在较大的显示器上，页眉和页脚比在较小的屏幕上要大)。为此，我使用了一个百分比高度。但是，只有当我将position设置为absolute时，这才能起作用。问题是，将它设置为绝对意味着它会重叠屏幕的主要部分(在页眉和页脚之间)。将其设置为relative不起作用，因为它依赖于页眉/页脚中的项。我的页眉是这样的：
.header
{
position:absolute;
top:0px;
background-color:white;
width:100%;
he
浏览 4提问于2010-05-06得票数 0
回答已采纳
我使用jquery (1.1.1)和Adobe创建了一个iOS应用程序。该应用程序有一个固定的页眉和页脚，转换设置为“无”。页脚包含4个导航按钮，这些按钮通过javascript向应用程序中的四个页面提供导航。我使用了一个多页模板，所以只有一个HMTL文件.
最初，我使用“数据位置:固定”在屏幕上定位页眉和页脚，但在页面之间切换时遇到了一些不必要的闪烁和页面跳转。因此，我转而使用CSS将页眉和页脚修复到屏幕上(如本文中所述：)。这解决了闪光灯的问题，但引入了另一个问题。
问题是：第一次滚动文本时，在任何页面上，页脚与文本一起移动(也就是说，它不固定)。但只有第一次-从那时起，每当我滚动文本，页
浏览 3提问于2012-11-02得票数 1
我正在创建一个网页，其中我需要一个内容列在页面的中心(包括固定宽度)和两个不可滚动(固定)列在该内容列的左侧和右侧(包括固定宽度)。左列需要与中间内容列的左侧对齐。右列需要与中间内容列的右侧对齐。如果内容栏有很多内容，中间的内容栏应该是可滚动的，在浏览器的右侧有一个滚动条。但是左边和右边的列不能滚动，而是固定在浏览器的顶部。当调整浏览器宽度时，left+middle+right列将保持其宽度，并居中于网页的中间。在左列的左侧和右列的右侧，空白将以相同的宽度在两侧增加/减少。
在我的屏幕示例中，您可以找到我试图解决的概念。
我试图在stackoverflow和google上搜索这个问题，但
浏览 0提问于2011-03-26得票数 3
回答已采纳
我在一个网站上工作，应该能够显示照片和其他内容尽可能大。我的目标是有一个固定大小的页眉和页脚(假设每个页眉和页脚的高度都是40px )，并且我想要一个<div>元素来填充它们之间的所有空间(即高度100%的视窗减去80px)。我只是想在所有屏幕上最大的内容空间，没有滚动。
+---------------------+
| Header (40px) |
+---------------------+
| |
| Dynamic (100%-80px) |
| |
|
浏览 0提问于2014-05-04得票数 0
3回答
两个水平滚动条
、、、、
当我从代码笔嵌入日历小部件时，我的网站中有两个滚动条
两滚动条
一个滚动条移动主体，另一个像使用asp.net mvc5那样移动整个页面，所以我从共享布局中调用了页眉、页脚和侧栏。使用
overflow-y: hidden;
只需隐藏主页的滚动条。
在这里，您可以看到单个滚动条的图像，它只是移动内部体。
单涡旋
如何移除移动内体的滚动条？
浏览 0提问于2018-07-31得票数 0
回答已采纳
我创建了来显示我的问题所在。我想要的是在320*480的屏幕上有一个固定的页眉位置和固定的页脚位置。
内容应该是可滚动的，这样设置的宽度和高度就不会改变。
谢谢。
浏览 2提问于2010-11-17得票数 1
假设我有个家长。里面有三个子DIVs:页眉、内容和页脚。标头被附加到父文件的顶部并水平地填充它。页脚连接到父级的底部，并且水平地填充它。内容应该填充页眉和页脚之间的所有空格。
父母必须有固定的宽度和高度。内容DIV必须填充页眉和页脚之间的所有可用空间。当内容DIV的内容大小超过页眉和页脚之间的空间时，内容DIV应该显示滚动条，并允许适当的滚动，这样页脚内容就不应该模糊，页脚内容也不应该模糊。
现在是困难的部分：，你不知道页眉的高度，也不知道在之前的页脚。页眉和页脚被动态填充)。如何在不使用的情况下定位内容
示例：
<div style="position : relative;
浏览 15提问于2008-09-11得票数 8
3回答
在我的应用程序中，我需要设计与页眉，内容视图(表视图)和页脚视图，这是可滚动的视图。内容视图数据将动态更改。所以我使用了表视图。我已经在表视图的页眉和页脚中添加了页眉和页脚视图。(我的目标是滚动页眉、内容和页脚视图，以便在UItable视图的页眉和页脚中添加我的自定义页眉和页脚视图。)
我的设计
如果表视图包含一些数据，它将按照设计工作。问题是，如果表视图不包含任何数据(行数仅为0)。标题视图显示在视图的中间。(在这种情况下，表视图框会自动缩小。)即使我试图处理基于数据源count.But的表视图框架，我也做不到。
请指导我解决此问题。提前谢谢。
浏览 5提问于2014-04-08得票数 1
我有一个webapp的CSS网格布局，有一个固定大小的页眉和页脚(用rem单元定义)和一个可扩展的中心行(定义为1fr)，其中包含两个侧边栏和一个中央内容区域。外部栅格容器定义了宽度和高度，以填充视口(100vw/vh)。我希望中间的一行占据页眉和页脚之间的所有空间，并使任何溢出的页面滚动，而不是扩大页面的高度。
我尝试了各种可能的解决方案，包括使用overflow-y:scroll，但似乎都不起作用。额外的内容使页面更长，而不是使区域可滚动。
我不想对中间行使用固定的大小，因为我希望它可以扩展以适应任意大的屏幕。
下面是我的布局的一个相当小的例子：
(请注意，HTML和CSS中的嵌套区域是
浏览 2提问于2017-10-13得票数 1
我正在尝试只使用HTML和CSS创建布局，这样我就不会有使用Javascript进行布局的额外复杂性。
布局如下图所示，由三部分组成:页眉、正文和页脚。
页眉和页脚的高度应该相同，并且应该始终可见。在调整大小时，页眉、内容和页脚应该相应地扩展/收缩，但有几个例外。首先，当达到主内容的最大高度时，主内容不应该再扩展，而应该只扩展页眉和页脚。其次，当主要内容的最小高度被击中时，任何部分都不应该再收缩，并且视图应该是可滚动的。
至于主要内容，它可以水平滚动，视口的主滚动条在屏幕的底部，而页眉和页脚应该留在原地。
到目前为止，我已经想出了如何通过一个绝对定位的容器div来实现水平滚动的主要部
浏览 3提问于2013-03-07得票数 0
1回答
我们正在创建一个具有页眉、内容和页脚的网页。页眉和页脚应该始终可见，内容应该是可滚动的。容器div有固定的宽度，但没有固定的高度。我解决了页脚留在最后的问题，使用css的粘性页脚()内容区域被分成两部分(content1和content2)，并且有一个灵活的可滚动的div。
问题是，内容区域的高度并不是绝对定义的(即100%)。我们希望当content1或content2中的数据超过屏幕尺寸时，它会自动溢出到自己的独立滚动条中，并且页眉和页脚仍然可见。
我们希望避免使用iframe。有没有什么办法，我们可以用javascript (jquery或其他)来实现呢？我们受到goole docs主页
浏览 3提问于2009-07-29得票数 1
11回答
可滚动div内的冻结表头
、、、
我有三个div。页眉、中央和页脚。在中央div (gridview)中有一个表，它几乎总是比外部div长。所以我让这个div可以垂直滚动。问题是:如何使表格标题在div向下滚动后可见？我可以用单独的div或table来做这个标题，并使它固定，但是表中的列的宽度并不总是相同的-所以我不知道如何保持标题中的列的宽度。有什么线索吗？
浏览 0提问于2009-01-28得票数 8
回答已采纳
我使用jquery mobile，对于页眉/页脚，我使用data-position="fixed“。
然而，当我们滚动页面时...页眉页脚消失，并在滚动停止时重新出现。有没有一种方法可以让它固定在屏幕上，当你一直滚动的时候？
我只能想到一种方法，就是应用位置固定，而不是为这些元素使用jquerymobile。
浏览 1提问于2011-06-16得票数 4
我正在做一个网站使用jQuery移动。
如何保持jquery移动页眉和页脚固定？我只想滚动内容(就像在iPhone应用程序中一样)，并保持页眉和页脚固定在顶部和底部。
有什么建议吗？
浏览 3提问于2011-01-18得票数 29
1回答
我使用的是自动补全文本框，这里基于动态值超过滚动条，如果超过动态值，则滚动条显示在文本框中，滚动条自动超过在页脚页和两个滚动条中显示。如果在文本框滚动条中显示的值不应该超过页脚内容，只在正文容器中显示，也不会显示两个滚动条，所以请帮助我解决这个问题。
css代码：
.ui-autocomplete {
max-height: 28%;
overflow-y: auto;
}
自动编译代码:区域数据类型为数组，包含多个值
autocomplete({
autoFocus : true,
source : areas,
selectFirst : true,
浏览 0提问于2014-06-21得票数 4
我在一个相对页眉和粘性页脚上工作，动态加载内容(有时是空的div (未知高度)，因此高度为100 of；)，所有这些内容都在响应容器中，根据设备的宽度(宽度:100 of；)调整到最大宽度为350 max。
从这里开始，一些内容会动态地加载到页眉上方，并且应该将页眉和内容按下，但是应该保持粘性页脚的位置。当动态内容溢出时，应该在页眉下方和页脚上方滚动，因为两者都是半透明的。
已经尝试过(相对和绝对)的各种组合。下面是最接近的组合，例如：..。但这种组合猜测的是动态内容的百分比高度，而出现的内容在范围内格式不正确，并且由于绝对定位而不按下动态内容！？
需要对CSS进行哪些调整来说明这些规范？
H
浏览 0提问于2014-06-14得票数 2
回答已采纳
1回答
下面是一个具有静态页眉和静态页脚的网页的示例： (查看此网页时，请单击红色的"X“右上角删除透明的archive.org页眉)
我的问题是，是否可以(很容易)将滚动条限制在实际的(可滚动内容)区域--换句话说，滚动条不应该延伸到静态页眉和页脚上(就像现在一样)。
显示相同内容的：带有静态页眉和静态页脚的可滚动内容，其中滚动条位于页眉和页脚之上，但应仅限于内容框：
#content {
width: 1024px;
margin: 0 auto;
padding: 60px 0;
height:calc(100% - 120px);
}
下面是当前实现的一个示例：
html, bod
浏览 0提问于2015-04-20得票数 0
2回答
我目前正在为我正在开发的应用程序构建HTML和CSS。
这个应用程序有一个固定高度的页眉，一个固定高度的页脚和一个中间区域，它应该占据剩余的空间。
问题是，我希望页眉和页脚始终固定不变，而内容如果变得太大就会滚动。
我已经能够让内容滚动的页眉和页脚固定在适当的位置，但这使用了一个push div，这样滚动条就会消失在页眉后面，另一种选择是让它消失在页脚后面。我有一个困难的时间让一个div滚动时，它超过了最大尺寸没有给它一个100%的高度。
这是我到目前为止所知道的：
对于纯CSS，这是可能的吗？还是每次调整大小时都要用javascript计算窗口高度？
我的“解决方案”接近了吗？
浏览 3提问于2012-02-13得票数 4
回答已采纳
2回答
我有一个网站，客户不想滚动，所以页眉和页脚是固定在顶部和底部。
我在这里有一个例子
所以图像1,2和3应该拉伸，保持它的比例，而页眉和页脚是固定的。
有关于如何实现这一点的线索吗？(CSS和/或jQuery )；
这里有一个我快速上手的小提琴，可以帮助你使用它：
浏览 0提问于2012-09-26得票数 1
亲爱的，
如果我有一个屏幕，并将根布局的高度设置为“拉伸到容器”，并确保在页脚中看不到按钮(因此页脚被折叠)，您将注意到页面布局将不必要地扩展到浏览器窗口的高度之外(导致滚动条出现)，并且它将与页眉一样扩展(因此，如果页眉为60 be，底部的额外空间将为60 be)。这看起来不专业，当页脚按钮出现并消失时，浏览器滚动条也会出现和消失，在大多数浏览器中，滚动条将向内和向外拉伸页面内容，以占据其宽度范围，导致页面内容不舒服地快速移动。
下面是一个截图来说明：
有人知道对此有什么补救办法吗？
浏览 6提问于2017-04-14得票数 0
回答已采纳
1回答
我写了一份购物清单。页脚包含用于对列表中的选定项执行操作的按钮，我将页脚定义为固定，以便它在屏幕上始终可见。
现在我在firefox中测试了一个比屏幕还长的项目列表，我发现如果我点击列表中的一个项目(选中它)，页眉和页脚就会从屏幕上消失，并分别移到列表的顶部和底部。在列表上单击时，看起来固定属性被切换。
这给我带来了麻烦，因为当我选择列表中的一项时，带有按钮的页脚就消失了，我需要滚动到列表的末尾才能单击按钮。
如何删除此行为？我担心如果我每次单击一个项目时都设置了fixed属性，页脚和页眉就会闪烁。
浏览 4提问于2012-06-19得票数 0
回答已采纳
3回答
网站无法向下滚动
、、
我的网站可以在15英寸的笔记本电脑上运行，但每当我调整浏览器的大小时，网站上的一些信息就会“消失”，因为我无法滚动(滚动条不会出现)。
我在我的两个网站上遇到了这个问题(它们是学校项目的一部分)。
在第一个网站上，当在较小的浏览器窗口中查看网站时，粘性页脚覆盖了内容。我设法为容器部分获得了一个滚动条(除了页眉和页脚之外的所有东西)，但我需要滚动条出现在网站的最右边，容器的外面。(只有页脚是固定的，页眉也是可滚动的)。
在第二个网站上，我需要头部和蝶形留下来的固定和其他一切都是可滚动的。
我想知道是否有一个简单的解决方案，因为我没有太多的时间来完成这些网站。
浏览 2提问于2014-06-16得票数 5
2回答
我使用引导4作为响应模板。我已经修复了页眉和页脚使用固定顶部和固定底部类的引导4。
现在，我想在页眉和页脚之间修复容器类，这样我的内容就可以固定或滚动在容器中，而不会干扰页眉和页脚。
谢谢，请提出建议或帮忙。
浏览 0提问于2018-06-30得票数 0
回答已采纳
1回答
在我问问题之前，我想让你知道，你在JSFiddle上看到的东西与你在普通浏览器上看到的不准确。实际上，您不必在实际浏览器上滚动，页脚是固定位置。您有一个页眉和一个固定的页脚，内容div是950 no，它填补了页眉和页脚之间的空白，没有滚动。
也就是说，您可以在页眉和页脚之间看到中间的黑色内容div。我的问题是，我把它设置为950 My，它填补了页眉和页脚之间的空白。如果页面上的内容大于我设置的950 of的大小，我希望通过滚动来扩展div。有没有办法做到这一点，或者我只需要直接为每个页面设置我的div根据我添加了多少内容？我只希望滚动功能添加，如果它超过950 if。
HTML：
<
浏览 3提问于2013-07-26得票数 0
回答已采纳
我有一个HTML和CSS的文件。我希望在每个打印页面中都有页眉和页脚，这样当您按Print时，每个页面都有相同的页脚和页眉。有没有办法使用web技术来做到这一点？我找不到太多关于打印的信息，除了换页等。
浏览 2提问于2011-07-12得票数 3
回答已采纳
有许多固定的页脚/页眉可变宽度的内容帖子，但似乎没有一个适合我的特定用例。
描述我想要的最简单的方式是google文档的风格界面，页眉和页脚是固定的，内容是X/Y滚动的，但当你开始向下滚动时，它是页眉滚动的一部分
HTML, body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
div {
padding: 10px;
}
.header {
background: LightCoral;
border: 10px solid IndianRed;
}
.fixed-header {
浏览 14提问于2018-01-27得票数 0
3回答
我需要创建一个响应式的网站，将适合内部浏览器高度的内容，而不应该显示垂直滚动。我需要把页眉在页面的顶部和页脚在底部，我需要把内容放在剩余的高度。在一个内容中，我有一个图像，它必须适合该内容，并且不能缩放。有什么解决方案吗?或者我需要计算页眉高度，然后计算页眉页脚，然后用窗口高度减去。谢谢您:)
var content = $(window).height() - $('.header').height() - $('.footer').height();
浏览 4提问于2014-01-31得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
