html如何让头部跟下面的底部固定，点击导航栏不同的选项，只有中间变化，头部跟底部不变？

Question

Answer 1

写一个index.html,把头部底部内容用css固定,中间留一个空白区容器，需要切换的内容可以用html分开来写，点击头部导航的时候用jquery的load(url)的方法,$(容器).load(url)，用不同的子页面html替换中间空白区的内容,不同子页面引用不同的js,不会有影响。公用的css可以放在index.html里面，所有子页面都可以用。

Answer 2

首先，很感谢你邀请我来回答问题，对于这个问题我个人有以下几种解决方法：

1、采用单页面的方式，内容都写在页面中，初始化时，仅显示当前内容，其他内容隐藏，通过点击导航条来切换需要显示的内容（类似于选项卡，用js，jQuery实现都很简单）。

2、采用iframe的方式，要显示的内容在主html中，内容显示在html的iframe标签中，通过改变iframe的src来加载不同的内容(不是很推荐使用)。

3、你也可以使用框架，像比较简单易学的vue.js，你可以通过配置路由达到点击导航栏切换不同内容的效果；当然了，像angular，react都可以，这就看题主的喜欢了。

最后说点题外话，我看了下题主的导航栏，有点想法，我觉得你可以把所有内容都在当前页面显示出来，给导航栏加上锚点（或者你可以通过设置scrollTop），点击就滚动到相应的内容区。

Answer 3

可以用vue.js

Answer 4

ifarme 或者include 你开心就好

Answer 5

这要看你的页面结构了啊，如果跳转页面肯定是要动的，如果不跳转只更新中间一部分的数据，那上下肯定是不动的啊。
像你说的这种，肯定是点击导航栏之后更新了中间一部分的数据。或者进行了页面跳转，但是跳转页面和原页面具有相同的头部和尾部。

Answer 6

iframe、pjax以及各种MMVM

Answer 7

也可以这样，拆文件（jsp方案)

<jsp:include page="/tiles/nav.jsp" flush="true" />
<div class="container">
中间变化内容
</div>
<jsp:include page="/tiles/footer.jsp" flush="true" />

Answer 8

如果不跳转页面建议使用pjax;
跳转页面的话直接固定header和footer，CSS position fixed

Answer 9

谢邀！我最近写了一个官网类似这样的，我整理一下发出来。单页面官网
你也可以写个顶部和底部，中间的内容区用swiper固定高度轮播实现基于swiper的Tab选项卡。

Answer 10

这个，一般都是用模板引擎来实现，或者是一些自带模板功能的框架，现在前端流行的框架基本都能实现。如果完全不用框架和模板功能，你也可以自己封装成一个插件，把头部和底部封装起来，每个页面引入一下就好了

Answer 11

方法一：这个只是个切换版，如果是静态html页面，同时嫌编写页面太麻烦，也已采用Bootstrap帮助开发，可以轻松实现楼主所要的切换版效果。
方法二：如果楼主js和css技术过关，同时jquery运用灵活自如，可以自己实现锚点的形式，通过点击页首导航进行切换显示内容。
Thanks & Regards