响应和无响应代码在同一页

我正在工作的网站是巨大的，我们不能一次霰弹枪的整个事情。所以，我们必须分阶段建设。问题是，我们正在从一个90年代的表格结构网站转到Bootstrap-divs响应式网站。这意味着，一旦我们建立并发布第一阶段，它必须在整个场地保持一致。响应和无响应代码在同一页

换句话说，页眉/页脚必须在非响应页面（使用表格构建）和响应页面（引导程序）中工作并且看起来相同。因此，由于该网站正在成为一个完整的响应网站，标题是响应式的，但不是网站的其余部分。

这是我的问题，我的标题固定在顶部，它是响应式的。页面内容没有使用响应式代码，因此我在底部获得滚动条（当然）。但是，除非我修复它，否则页脚拒绝去100％的宽度，我不能那样做。它必须保持在最低点，并且它也必须具有响应能力。

我做了一个codepen，显示我的问题与简单的香草页。见here

页脚类

footer{ 
    width:100%; 
    background:#ddd; 
    height:35px; 
}

现在，出于某种原因，这实际上并保持底部的页脚（或者看起来是这样），但如果我想补充的位置是：绝对的底部：0，它实际上反而移动到页面的中心！

来源

2015-03-31 LOTUSMS

你想页脚位于底部总是可见的？或者不管页面高度如何，页脚都处于底部？ – jono 2015-04-01 00:04:56

@JonathonMilne我希望页脚处于我拥有的内容高度的底部。不固定:) – LOTUSMS 2015-04-01 00:09:37

@showdev如果您调整浏览器窗口的大小，直到出现水平滚动条，然后移动滚动条以查看最右边缘，则会看到页脚不是100％。但我会看看你的建议帖子 – LOTUSMS 2015-04-01 00:11:07

这是一个糟糕的。

您可以将您的无响应页面内容封装在另一个元素中，以防止它在<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>

来源

2015-04-01 16:59:04 showdev

响应和无响应代码在同一页

回答

相关问题