響應和無響應代碼在同一頁

我正在工作的網站是巨大的，我們不能一次霰彈槍的整個事情。所以，我們必須分階段建設。問題是，我們正在從一個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

響應和無響應代碼在同一頁

回答

相關問題