固定页眉和页脚与可滚动的content+不可点击的超链接
固定页眉和页脚与可滚动的content+不可点击的超链接是一种常见的网页布局方式，用于在网页中固定显示页眉和页脚，并在中间的内容区域进行滚动显示。不可点击的超链接是指在网页中以文本形式展示的链接，但无法点击跳转到其他页面。
这种布局方式的优势在于可以提供更好的用户体验和导航功能。固定的页眉和页脚可以包含网站的logo、导航菜单、搜索框、联系信息等常用元素，使用户在浏览网页时始终能够方便地访问这些功能。而可滚动的内容区域则可以用于展示具体的页面内容，如文章、产品列表、图片等。
应用场景包括但不限于：
- 新闻网站：固定页眉和页脚可以包含网站的标志和导航菜单，方便用户浏览不同的新闻分类，而内容区域则可以展示具体的新闻内容。
- 博客网站：固定页眉和页脚可以包含博客的标题、作者信息和分类标签，而内容区域则可以展示博客文章的内容。
- 电子商务网站：固定页眉和页脚可以包含网站的品牌标志、搜索框和购物车信息，而内容区域则可以展示商品列表和详细信息。
对于实现固定页眉和页脚与可滚动的content+不可点击的超链接的网页布局，可以使用HTML和CSS来实现。具体的实现方式可以参考以下示例代码：
HTML代码：
<!DOCTYPE html>
<html>
<head>
<title>固定页眉和页脚示例</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<h1>网站标题</h1>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</nav>
</header>
<div class="content">
<h2>内容标题</h2>
<p>这里是内容区域的内容...</p>
<p>这里是内容区域的内容...</p>
<p>这里是内容区域的内容...</p>
<p>这里是内容区域的内容...</p>
<p>这里是内容区域的内容...</p>
<p>这里是内容区域的内容...</p>
<p>这里是内容区域的内容...</p>
<p>这里是内容区域的内容...</p>
<p>这里是内容区域的内容...</p>
<p>这里是内容区域的内容...</p>
</div>
<footer>
<p>版权信息 © 2022</p>
</footer>
</body>
</html>CSS代码（style.css）：
body {
margin: 0;
padding: 0;
}
header {
background-color: #f2f2f2;
padding: 20px;
position: fixed;
top: 0;
left: 0;
width: 100%;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
nav ul li {
display: inline;
margin-right: 10px;
}
nav ul li a {
text-decoration: none;
}
.content {
margin-top: 100px;
padding: 20px;
}
footer {
background-color: #f2f2f2;
padding: 20px;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
}在这个示例中，通过将页眉（header）和页脚（footer）的position属性设置为fixed，可以使它们固定在页面的顶部和底部。内容区域（content）通过设置margin-top属性来避免被页眉遮挡。通过CSS样式的设置，可以实现固定页眉和页脚的样式。
对于不可点击的超链接，可以使用CSS样式来设置其样式，如修改颜色、添加下划线等。具体的样式设置可以根据实际需求进行调整。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云主页：https://cloud.tencent.com/
- 云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 云数据库 MySQL 版：https://cloud.tencent.com/product/cdb_mysql
- 云原生应用引擎（TKE）：https://cloud.tencent.com/product/tke
- 云存储（COS）：https://cloud.tencent.com/product/cos
- 腾讯云区块链服务（BCS）：https://cloud.tencent.com/product/bcs
- 腾讯云人工智能（AI）：https://cloud.tencent.com/product/ai
- 物联网通信（IoT）：https://cloud.tencent.com/product/iot
- 移动开发平台（MTP）：https://cloud.tencent.com/product/mtp
请注意，以上链接仅为示例，具体的产品选择和推荐应根据实际需求和情况进行评估。
相关·内容
jQuery手机(v1.1)的固定页脚应该停留在屏幕底部，并浮动在文本的顶部，否则将始终可见。这在浏览器中效果很好，但当我将它与Phonegap (现在称为Cordova) (v1.6)捆绑到一个Android应用程序中时，页脚就会停留在它第一次出现的地方。这是与文本一起滚动的页脚。
真正奇怪的是，当你点击屏幕时，页眉和页脚被固定在页面的顶部和底部(这是jQuery手机内置的具有固定页眉和页脚的功能)，当你再次点击它时，页眉和页脚又回到了浮动状态。但是这一次，页脚停留在屏幕的底部，而不是像从一开始就应该的那样，与文本一起滚动。
你知道怎么固定页脚吗？
下面是我使用的代码：
<di
浏览 2提问于2012-04-20得票数 2
1回答
我正在尝试建立一个使用sencha touch的iphone的网站。我是sencha和ext的新手。
我想有一个页眉，页脚和内部内容布局。它可以理解为具有页眉和页脚的母版页，这将在每个页面上使用。
页眉和页脚应该是可滚动的(不是停靠的！)我希望在页面之间有一个动画。
通常，该网站将有一个页眉，菜单和页脚的主页。如果用户点击菜单中的某个按钮(即'ABOUT')页面应该滑到'ABOUT‘页面的右侧。这个页面将有一个标题，一些内容，后退按钮和页脚。页眉和页脚将看起来像在主页上。
我已经看到了很多使用停靠页眉和页脚的解决方案，但是我还没有找到一个能够以我想要的方式工作的方案(问
浏览 3提问于2011-04-20得票数 1
1回答
我试图使修复页脚和页眉类似于本页中的页眉：
但我所做的一切成功的是页眉和页脚，这是修复，但当你滚动它消失，只有当你停止滚动它又回来了。
*当我说到英尺，我指的是肚脐。就像这样：
浏览 1提问于2012-02-14得票数 0
1回答
您好，我正在建立一个移动网页，我的内容只会滚动，我的页脚和页眉是位置:固定-我可以使内容，使它不滚动下的页眉或页脚，以便它只是在自己的div滚动。
我想这样做的原因是我的页眉和页脚会有一些不透明，如果内容被滚动到下面，它看起来就不好。
这是我制作的jsfiddle，只是为了向您展示卷轴的示例
浏览 0提问于2012-06-05得票数 3
回答已采纳
我有页眉，页脚和主页内容在不同的页面，但页眉和页脚是在同一个文件夹称为布局。现在，我有超链接的标题(关于我们)，需要滚动到页脚，其中有联系详细说明它。
我怎么才能做到这一点？请引导我。
UPDATE src文件夹有主文件夹和布局文件夹，布局文件夹具有header.html和footer.html i在所有三个页面(主页、页眉和页脚)中的内容，当home url加载到本地页眉中时，显示的每个内容都有“联系我们”的块，单击应滚动到具有联系人详细信息的页脚。我需要使用#Id实现的这个没有工作
浏览 0提问于2018-12-26得票数 1
1回答
如何在我的index.html中提供滚动条，使页眉和页脚div保持固定在屏幕上，而位于页眉和页脚之间的内容部分可以在内容超出可用空间时滚动。
有谁知道吗？
提前谢谢。
浏览 2提问于2012-09-19得票数 0
2回答
jQuery移动css滚动并单击
、、、、
我正在为智能手机开发一个移动网站，并使用jquery mobile。第一个测试：
我已经向页面添加了内容，所以它应该是可滚动的，但当我滚动页眉和页脚时，滚动时间将被禁用。:(第二个测试：
jquery mobile文档()提供了data-position="fixed“应该禁止隐藏页眉和页脚的信息
我做错了什么？
浏览 2提问于2012-03-04得票数 1
回答已采纳
1回答
我写了一份购物清单。页脚包含用于对列表中的选定项执行操作的按钮，我将页脚定义为固定，以便它在屏幕上始终可见。
现在我在firefox中测试了一个比屏幕还长的项目列表，我发现如果我点击列表中的一个项目(选中它)，页眉和页脚就会从屏幕上消失，并分别移到列表的顶部和底部。在列表上单击时，看起来固定属性被切换。
这给我带来了麻烦，因为当我选择列表中的一项时，带有按钮的页脚就消失了，我需要滚动到列表的末尾才能单击按钮。
如何删除此行为？我担心如果我每次单击一个项目时都设置了fixed属性，页脚和页眉就会闪烁。
浏览 4提问于2012-06-19得票数 0
回答已采纳
1回答
我一直在疯狂地试图在我正在工作的网站上解决响应问题，而我在这里或其他地方找不到任何解决方案。主要的问题是我的固定脚。在站点的登陆页面上，有一个页眉、主区域和页脚(当箭头单击时页面会展开，但这是不相关的)。
我已经使用固定定位将页脚附加到页面底部。当屏幕宽度>1024 is时，页眉、主页脚和页脚宽度为100%。在1024 as以下，页眉和页脚宽度变为静态(1024为静态宽度)。
问题是，有一个点，页脚应该溢出在屏幕的右侧(因为宽度变得固定)。我可以向右滚动，在页眉中看到菜单的其余部分，但是页脚不会向右滚动。相反，它只是切断了通常存在的一切。
我尝试用相关代码重新创建这个问题，这里是：，但是
浏览 3提问于2013-08-21得票数 0
回答已采纳
我见过几个类似的问题(并做了大量的研究)，但我不认为其中任何一个都不能解决这个特定的问题.
我在这里给出了一个简单的例子：
这不是我使用的实际代码(因为我使用的是WordPress)，但它说明了我的问题，具体而言：
我正在工作的网站，将有一个固定的页眉和页脚，与内容在两者之间。我已经这么做了，效果很好。但是，我不希望页眉和页脚接触到浏览器的顶部和底部(例如，它们将有20 on的边距，因此容器和浏览器之间不会有太多的空间)。
问题是，当您滚动页面时，内容在页眉/浏览器和页脚/浏览器之间的空间中是可见的。如图所示，您可以看到它在页眉和页脚下面滚动；我想避免这种情况。
是否有某种方式可以使内容容器的
浏览 1提问于2014-04-18得票数 1
回答已采纳
2回答
我有一个网页，我正在工作。它有一个固定的页眉和页脚，所以只有body元素才会滚动。当需要滚动条的页面被拉上来时，滚动条将页眉和页脚中的元素推到左侧。是否有办法使滚动条只出现在网页的“滚动”部分，而不是垂直到达页眉和页脚元素？
示例( "S“表示滚动条仅位于body元素中)：
+----------------------------------------------------------+
| This is the Header |
+-----------------------------------
浏览 1提问于2014-06-05得票数 0
回答已采纳
我需要组成一个页面，其中有一个页眉和页脚，以及一些文本之间的内容。
页面大小是固定的(一个iframe)，并且有一个固定高度的页脚，但是页眉的内容可以改变(它会被翻译，因此文本行数会变化)。页眉和页脚都不应该有滚动条。如果它们之间的内容很长，则应该向内容本身添加一个滚动条。无论我做什么，我都不能让它只在CSS上工作。我可以滚动到整个页面(或者顶部区域，包括页眉)，或者内容div的文本超出了它的边界。
这里有一个例子来说明我的问题： (我只想要一个绿色区域的卷轴)
哦没有了JavaScript..。:)
谢谢。
浏览 1提问于2013-07-15得票数 0
回答已采纳
3回答
屏幕上有一个页眉和页脚，而屏幕的中心(内容区域)被ScrollView占据。当我启动应用程序时，会显示页脚。但是，当我点击元素"A“时，它在屏幕上显示了更多的元素，并将其他元素推到了下面。ScrollView确实使中央部分可滚动，但它也隐藏了页脚(屏幕底部的灰色LinearLayout )。
如何使页脚保留在屏幕底部？我想内容区滚动只。页眉和页脚XML位于ScrollView元素之外。我尝试使用RelativeLayout代替LinearLayout作为页脚，但没有成功。
这是单击元素"A“之前和之后的外观。
如果需要，我可以提供代码，XML和Java，但这
浏览 0提问于2012-01-23得票数 1
回答已采纳
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
这里有一个app.js的简单要点来重现这个问题
我有一个屏幕，其中有一个FlatList夹在页眉和页脚组件之间。FlatList有一些行，单击这些行时，它们会变成TextInputs。Flatlist可以很好地处理这个屏幕中的键盘，方法是滚动点击的行，使其就在键盘的上方。
问题是，页脚组件是在键盘上方提出来的，而不是被覆盖的。在编辑文本字段时，没有必要看到页脚，在实际用例中，页眉和页脚要大得多，因此严重限制了可用的屏幕不动产。它基本上将文本输入压缩到一个很小的行中，这几乎是不可用的。
TextInput UnFocused
TextInput聚焦(注意，页脚向上推)
我如
浏览 0提问于2018-06-22得票数 4
回答已采纳
我的网页应用程序中的滚动条应该只滚动“内容”部分。但是，只要我滚动到内容的末尾或顶部，滚动条就会滚动页眉或页脚。另外，页面会被拖走，看起来很难看。
以下是一些图片：
页眉和页脚固定在位置上.
标题：
<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
5回答
多年来，我一直在为此而苦苦挣扎。今年，可能会有一个解决方案。我需要一个标题，内容和页脚。我希望页脚在页面的底部，页眉在顶部，内容在之间。
我希望内容有一个滚动条。
问:这是不是要求太多了？
浏览 0提问于2010-06-03得票数 2
回答已采纳
我使用jquery mobile，对于页眉/页脚，我使用data-position="fixed“。
然而，当我们滚动页面时...页眉页脚消失，并在滚动停止时重新出现。有没有一种方法可以让它固定在屏幕上，当你一直滚动的时候？
我只能想到一种方法，就是应用位置固定，而不是为这些元素使用jquerymobile。
浏览 1提问于2011-06-16得票数 4
2回答
我试图在我的模板上有一个粘性的页眉和页脚，这是可行的，但我有一个问题，因为id=“页面”并不总是滚动到页眉下！
这是网站，
我发现带有position=“相对”的元素有问题，比如标签和"Patricia signed...“框项目，作为一个例子。
.box ul.supports-list li.last {
width: 200px;
position: relative;
float: left;
}
如何修复id=“页面”，使其中的所有元素始终滚动到页眉和页脚下？
浏览 1提问于2012-06-02得票数 0
回答已采纳
jQuery手机:我可以做页眉/页脚真正的css固定(比如css位置:固定)？
为了修复页眉和页脚，我尝试使用jquery-mobile的数据位置=“固定”
但在电话里它看起来很丑:当我滚动时，它会出现，消失，闪烁，嗯..。如果将头部样式设置为：style="position:fixed;z-index:1000"，那么这并不意味着在css中，它看起来要好得多-它只是修复了，仅此而已。
有什么办法可以做到这一点吗？
浏览 2提问于2012-01-02得票数 1
回答已采纳
我有两个独立滚动的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
回答已采纳
3回答
我正在使用phonegap和jqm开发一个简单的应用程序，我的问题是当您到达页面的顶部或底部时，页脚和页眉是可滚动的。
如果我在页面的顶部，我向上滚动，页眉会滚动-页脚也会滚动(参见所提供的图像)
我试过iScroll，但它不能解决任何问题。我已经尝试过覆盖jqm css设置，将body的溢出设置为隐藏，将.ui-content div的溢出设置为scroll - by也不起作用。
我还尝试将body位置设置为fixed。然后，当我滚动时，主体没有移动，但一个黑色的屏幕从底部升起，隐藏了页面。
有什么想法吗？
浏览 1提问于2012-01-20得票数 3
4回答
敬请访问以下网站：
尝试调整窗口大小，使其小到出现水平滚动条的程度。向右拖动水平滚动条，问题就出现了。页眉和页脚似乎没有相应地调整。在css中，页眉和页脚元素的宽度为100%。
有什么办法解决这个问题吗？谢谢!
浏览 0提问于2012-05-30得票数 2
回答已采纳
我有一个搜索表单，它使用RELEVANSSI插件来执行搜索和显示搜索结果。在我的搜索结果页面中有分页和搜索过滤器(超链接)，允许用户在屏幕上显示10、20或30条记录。
问题:在我的网站，我有一些内部网页，有不同的页眉和页脚和一个搜索框。通过添加一些检查，如果用户从这些内部页面执行搜索，那么它将加载相关和正确的页眉和页脚。但如果我点击分页过滤器或搜索过滤器(显示10记录，显示20条记录)，那么它将加载主网站页眉和页脚。
我需要一种方法来传递一些变量，它可以识别页面用户来自哪个页面，并且根据该变量，它将加载页眉和页脚。
谢谢
浏览 0提问于2019-03-19得票数 0
回答已采纳
我使用jquery (1.1.1)和Adobe创建了一个iOS应用程序。该应用程序有一个固定的页眉和页脚，转换设置为“无”。页脚包含4个导航按钮，这些按钮通过javascript向应用程序中的四个页面提供导航。我使用了一个多页模板，所以只有一个HMTL文件.
最初，我使用“数据位置:固定”在屏幕上定位页眉和页脚，但在页面之间切换时遇到了一些不必要的闪烁和页面跳转。因此，我转而使用CSS将页眉和页脚修复到屏幕上(如本文中所述：)。这解决了闪光灯的问题，但引入了另一个问题。
问题是：第一次滚动文本时，在任何页面上，页脚与文本一起移动(也就是说，它不固定)。但只有第一次-从那时起，每当我滚动文本，页
浏览 3提问于2012-11-02得票数 1
问题: ScrollIntoView隐藏元素在页眉/页脚后面。我的应用程序有页眉/页脚。
尝试了以下解决方案:
1) ScrollIntoView(true)，如果元素向上并试图从底部滚动，则将web元素隐藏在标题后面。
2)发送true/false，工作正常，但我不知道元素的确切位置，所以不能每次都告诉框架向下滚动/向上滚动到元素。
3)直接点击(采取行动)元素，铬自动滚动到可见性，但标题是存在的，这就是为什么它隐藏在后面。
请让我知道是否有任何单一的代码，将使元素可见，即使它的页眉/页脚，目前的.Looking解决方案是c#和使用铬浏览器。
浏览 9提问于2017-06-03得票数 0
我有一个包含多列的表格布局面板。我已经为页眉和页脚添加了另外两个表格布局面板，因为我不希望垂直滚动影响页眉和页脚。然而，由于有3个不同的表格布局面板，当我们在中央面板获得垂直滚动条时，我无法对齐单元格边界。一种方法是让禁用的滚动条始终存在，只有在需要时才会启用。已检查，但未找到任何参考资料。有什么想法吗？
浏览 1提问于2010-02-09得票数 0
回答已采纳
1回答
下面是一个具有静态页眉和静态页脚的网页的示例： (查看此网页时，请单击红色的"X“右上角删除透明的archive.org页眉)
我的问题是，是否可以(很容易)将滚动条限制在实际的(可滚动内容)区域--换句话说，滚动条不应该延伸到静态页眉和页脚上(就像现在一样)。
显示相同内容的：带有静态页眉和静态页脚的可滚动内容，其中滚动条位于页眉和页脚之上，但应仅限于内容框：
#content {
width: 1024px;
margin: 0 auto;
padding: 60px 0;
height:calc(100% - 120px);
}
下面是当前实现的一个示例：
html, bod
浏览 0提问于2015-04-20得票数 0
假设我有个家长。里面有三个子DIVs:页眉、内容和页脚。标头被附加到父文件的顶部并水平地填充它。页脚连接到父级的底部，并且水平地填充它。内容应该填充页眉和页脚之间的所有空格。
父母必须有固定的宽度和高度。内容DIV必须填充页眉和页脚之间的所有可用空间。当内容DIV的内容大小超过页眉和页脚之间的空间时，内容DIV应该显示滚动条，并允许适当的滚动，这样页脚内容就不应该模糊，页脚内容也不应该模糊。
现在是困难的部分：，你不知道页眉的高度，也不知道在之前的页脚。页眉和页脚被动态填充)。如何在不使用的情况下定位内容
示例：
<div style="position : relative;
浏览 15提问于2008-09-11得票数 8
6回答
首先，在所有可能的iOS版本上，一切都可以在UIWebView上完美地工作，所以这是一个特定的WKWebView问题。
在我完成了WKWebView的实现之后，我遇到了一个巨大的图形错误/问题。在肖像中，我的应用程序运行良好，但当我将其旋转到横向时，发生了一些奇怪的事情，我的页眉和页脚无法正确呈现。
如果我查看我的网页代码，我可以看到在DOM中CSS宽度正在用正确的数据更新，但我只能看到页眉/页脚的纵向宽度( 320px )，尽管它在DOM中显示为style=“width: 568px;”。
我使用的是positioning:fixed，但如果我更改为定位:相对，它会在屏幕旋转时按预期呈现(不
浏览 0提问于2014-12-04得票数 6
我已经建立了一个页面，其中有一个iframe。我还在页面上显示了一个页眉和页脚，通过include file语句显示。iframe位于页眉和页脚之间，设置为显示不在我的网站上的页面。
插入的页面在页面上具有用户可以点击的超链接，并且因此要显示的内容的高度改变。
是否可以设置iframe，以便如果框架窗口页面发生变化，它将自动调整框架窗口页面的大小，使其与要显示的插入页面的大小相同。我目前不得不将iframe的高度设置得非常大，以便它将显示用户可以使用框架(800)显示的内容的最大页面。这样做的唯一问题是，框架中显示的大多数页面都很小，因此在大多数情况下，用户无法看到页面页脚。
最后一点，我不想
浏览 1提问于2011-02-09得票数 0
回答已采纳
11回答
可滚动div内的冻结表头
、、、
我有三个div。页眉、中央和页脚。在中央div (gridview)中有一个表，它几乎总是比外部div长。所以我让这个div可以垂直滚动。问题是:如何使表格标题在div向下滚动后可见？我可以用单独的div或table来做这个标题，并使它固定，但是表中的列的宽度并不总是相同的-所以我不知道如何保持标题中的列的宽度。有什么线索吗？
浏览 0提问于2009-01-28得票数 8
回答已采纳
有许多固定的页脚/页眉可变宽度的内容帖子，但似乎没有一个适合我的特定用例。
描述我想要的最简单的方式是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
我正在尝试只使用HTML和CSS创建布局，这样我就不会有使用Javascript进行布局的额外复杂性。
布局如下图所示，由三部分组成:页眉、正文和页脚。
页眉和页脚的高度应该相同，并且应该始终可见。在调整大小时，页眉、内容和页脚应该相应地扩展/收缩，但有几个例外。首先，当达到主内容的最大高度时，主内容不应该再扩展，而应该只扩展页眉和页脚。其次，当主要内容的最小高度被击中时，任何部分都不应该再收缩，并且视图应该是可滚动的。
至于主要内容，它可以水平滚动，视口的主滚动条在屏幕的底部，而页眉和页脚应该留在原地。
到目前为止，我已经想出了如何通过一个绝对定位的容器div来实现水平滚动的主要部
浏览 3提问于2013-03-07得票数 0
亲爱的，
如果我有一个屏幕，并将根布局的高度设置为“拉伸到容器”，并确保在页脚中看不到按钮(因此页脚被折叠)，您将注意到页面布局将不必要地扩展到浏览器窗口的高度之外(导致滚动条出现)，并且它将与页眉一样扩展(因此，如果页眉为60 be，底部的额外空间将为60 be)。这看起来不专业，当页脚按钮出现并消失时，浏览器滚动条也会出现和消失，在大多数浏览器中，滚动条将向内和向外拉伸页面内容，以占据其宽度范围，导致页面内容不舒服地快速移动。
下面是一个截图来说明：
有人知道对此有什么补救办法吗？
浏览 6提问于2017-04-14得票数 0
回答已采纳
我正在做一个网站使用jQuery移动。
如何保持jquery移动页眉和页脚固定？我只想滚动内容(就像在iPhone应用程序中一样)，并保持页眉和页脚固定在顶部和底部。
有什么建议吗？
浏览 3提问于2011-01-18得票数 29
2回答
我目前正在为我正在开发的应用程序构建HTML和CSS。
这个应用程序有一个固定高度的页眉，一个固定高度的页脚和一个中间区域，它应该占据剩余的空间。
问题是，我希望页眉和页脚始终固定不变，而内容如果变得太大就会滚动。
我已经能够让内容滚动的页眉和页脚固定在适当的位置，但这使用了一个push div，这样滚动条就会消失在页眉后面，另一种选择是让它消失在页脚后面。我有一个困难的时间让一个div滚动时，它超过了最大尺寸没有给它一个100%的高度。
这是我到目前为止所知道的：
对于纯CSS，这是可能的吗？还是每次调整大小时都要用javascript计算窗口高度？
我的“解决方案”接近了吗？
浏览 3提问于2012-02-13得票数 4
回答已采纳
我有这样简单的数据网格：
<div class="uiGridContent">
<table>
<tbody id="page-1">
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
浏览 0提问于2013-10-15得票数 5
回答已采纳
我需要，页眉和页脚总是固定的位置。
我不想喜欢下面的url页面。我该怎么办？帮帮我......
(在上面的url中，如果你点击了页面内部。页眉和页脚将隐藏)。我不想这样
浏览 0提问于2011-08-03得票数 27
回答已采纳
3回答
我需要创建一个响应式的网站，将适合内部浏览器高度的内容，而不应该显示垂直滚动。我需要把页眉在页面的顶部和页脚在底部，我需要把内容放在剩余的高度。在一个内容中，我有一个图像，它必须适合该内容，并且不能缩放。有什么解决方案吗?或者我需要计算页眉高度，然后计算页眉页脚，然后用窗口高度减去。谢谢您:)
var content = $(window).height() - $('.header').height() - $('.footer').height();
浏览 4提问于2014-01-31得票数 0
1回答
在我问问题之前，我想让你知道，你在JSFiddle上看到的东西与你在普通浏览器上看到的不准确。实际上，您不必在实际浏览器上滚动，页脚是固定位置。您有一个页眉和一个固定的页脚，内容div是950 no，它填补了页眉和页脚之间的空白，没有滚动。
也就是说，您可以在页眉和页脚之间看到中间的黑色内容div。我的问题是，我把它设置为950 My，它填补了页眉和页脚之间的空白。如果页面上的内容大于我设置的950 of的大小，我希望通过滚动来扩展div。有没有办法做到这一点，或者我只需要直接为每个页面设置我的div根据我添加了多少内容？我只希望滚动功能添加，如果它超过950 if。
HTML：
<
浏览 3提问于2013-07-26得票数 0
回答已采纳
4回答
我基本上有一些兄弟div，页眉，内容，页脚。我想让内容在调整窗口大小时动态填充页眉和页脚留下的父级空间。
我尝试过在所有或部分元素上使用高度:100%，这总是会使元素太高。我不想要滚动条。这可以只使用CSS完成吗?还是必须使用Jquery？
HTML
<html class="fill">
<body class="fill">
<div>header</div>
<div class="content">content</div>
浏览 1提问于2012-09-19得票数 2
回答已采纳
当我有页眉、内容和页脚(页眉/页脚是固定的)时，jquerymobile中的默认行为是，当我滚动内容时，页眉/页脚显示/隐藏。我的意思是，当你开始滚动页眉/页脚时，页眉/页脚会隐藏，当你停止滚动时，页眉/页脚又会显示出来。在设备上，它看起来非常糟糕/对用户不友好。我想避免这种页眉/页脚的显示/隐藏效果。在jquerymobile或它的一些插件中有什么可以避免它的东西吗？如果没有，那么我想在内容上应用iScroll。有没有人可以指导我如何使用全屏高度来制作data-role="content“？
浏览 1提问于2012-02-27得票数 0
2回答
我有一个网站，客户不想滚动，所以页眉和页脚是固定在顶部和底部。
我在这里有一个例子
所以图像1,2和3应该拉伸，保持它的比例，而页眉和页脚是固定的。
有关于如何实现这一点的线索吗？(CSS和/或jQuery )；
这里有一个我快速上手的小提琴，可以帮助你使用它：
浏览 0提问于2012-09-26得票数 1
2回答
我使用引导4作为响应模板。我已经修复了页眉和页脚使用固定顶部和固定底部类的引导4。
现在，我想在页眉和页脚之间修复容器类，这样我的内容就可以固定或滚动在容器中，而不会干扰页眉和页脚。
谢谢，请提出建议或帮忙。
浏览 0提问于2018-06-30得票数 0
回答已采纳
7回答
如何创建具有固定页眉和页脚的ListView？
我不希望页眉/页脚与ListView中的项目一起滚动。
有没有可能页眉/页脚浮动在ListView上，以便页眉/页脚不需要有直的底部/顶部背景，并且ListView项滚动到页眉/页脚视图的背景下，但仍然显示列表的第一个元素？
浏览 4提问于2013-05-29得票数 13
回答已采纳
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
1回答
我已经创建了一个应用程序的黑莓，Os6.0和android使用rho移动，我想使用修复页眉和页脚在它。为此，我使用位置创建了一个css : for；top:0px;。它不会在黑莓上工作，但在android系统中运行良好。它滚动与页面，当停止滚动它再次固定在黑莓的确切位置.我的另一个css运行良好，没有错误。
请帮我解决这个问题。
浏览 0提问于2012-05-03得票数 2
1回答
如果我有一个很短的内容，我会尝试使用的技巧来使我的页脚锁定在的底部。它正在工作，但只有一小部分页脚是可见的，我仍然必须滚动才能看到所有内容。因为我正在使用Wordpress，如果我登录了，情况会变得更糟，因为wordpress的页眉，页脚更深。我试着删除我该怎么解决这个问题？
浏览 0提问于2013-09-08得票数 0
2回答
我正试图在HTML/CSS中实现这一点：
+---------------------------------------------------------------------+
| HEADER DIV |
+------------+--------------------------------------------------------+
| |
浏览 6提问于2015-03-03得票数 2
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
