我正在处理的网站非常庞大，我们无法一次搞定整个网站。因此，我们必须分阶段进行 build 。问题是，我们正在从 1990 年代的表格结构网站转变为 Bootstrap-divs 响应式网站。这意味着，一旦我们构建并发布了第一阶段，它就必须在整个站点中保持一致。
换句话说，页眉/页脚必须在非响应式页面(使用表格构建)和响应式页面(自举)中看起来相同。因此，由于该站点正朝着成为一个完全响应式站点的方向发展，因此标题是响应式的，但站点的其余部分不是。
这是我的问题，我的页眉固定在顶部，而且是响应式的。页面内容没有使用响应代码，所以我在底部得到了一个滚动条(当然)。但是页脚拒绝 100% 宽度，除非我修复它，但我不能那样做。它必须保留在底部，并且也必须具有响应能力。
我用一个简单的原始页面制作了一个代码笔来显示我的问题。参见 here
页脚类
footer{
width:100%;
background:#ddd;
height:35px;
}
现在，出于某种原因，这实际上确实将页脚保留在底部(或看起来如此)，但如果我添加 position: absolute 和 bottom:0，它实际上会向上移动到页面的中心!
最佳答案
真讨厌。
您可以将非响应页面内容包装在另一个元素中，以防止它在 <body> 处产生水平滚动条。等级。然后，只允许该元素水平滚动。
这并不理想，但在您可以使整个网站始终响应之前它会起作用。
.page-content-wrap {
max-width: 100%;
overflow-x: scroll;
}
.page-content {
padding-top: 70px;
width: 1170px;
margin: 0 auto;
}
footer {
width: 100%;
background: #ddd;
height: 35px;
}<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a>
</li>
<li><a href="#about">About</a>
</li>
<li><a href="#contact">Contact</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a>
</li>
<li><a href="#">Another action</a>
</li>
<li><a href="#">Something else here</a>
</li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li><a href="#">Separated link</a>
</li>
<li><a href="#">One more separated link</a>
</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="../navbar/">Default</a>
</li>
<li><a href="../navbar-static-top/">Static top</a>
</li>
<li class="active"><a href="./">Fixed top <span class="sr-only">(current)</span></a>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</nav>
<div class="page-content-wrap">
<div class="page-content">
<div class="box">
<h1>Navbar example</h1>
<p>This example is a quick exercise to illustrate how the default, static and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
<p>To see the difference between static and fixed top navbars, just scroll.</p>
<p>This example is a quick exercise to illustrate how the default, static and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
<p>To see the difference between static and fixed top navbars, just scroll.</p>
<p>This example is a quick exercise to illustrate how the default, static and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
<p>To see the difference between static and fixed top navbars, just scroll.</p>
<p>This example is a quick exercise to illustrate how the default, static and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
<p>To see the difference between static and fixed top navbars, just scroll.</p>
<p>This example is a quick exercise to illustrate how the default, static and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
<p>To see the difference between static and fixed top navbars, just scroll.</p>
<p>This example is a quick exercise to illustrate how the default, static and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
<p>To see the difference between static and fixed top navbars, just scroll.</p>
<p>This example is a quick exercise to illustrate how the default, static and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
<p>To see the difference between static and fixed top navbars, just scroll.</p>
<p>This example is a quick exercise to illustrate how the default, static and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
<p>To see the difference between static and fixed top navbars, just scroll.</p>
<p>
<a class="btn btn-lg btn-primary" href="../../components/#navbar" role="button">View navbar docs »</a>
</p>
</div>
</div>
<!-- /container -->
</div>
<footer>
<div class="container">
Footer
</div>
</footer>关于html - 同一页面中的响应和非响应代码，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29380583/