頁腳與引導

適應性定位我有一個簡單的佈局：頁腳與引導

+----------+ 
| Header | 
+----------+ 
|   | 
| Content | 
|   | 
+----------+ 
| Footer | 
+----------+

我想頁腳爲：

在視口的底部，當內容沒有完全填滿了所有如果內容填充了所有視口空間或更多，則通過滾動可訪問剩餘視口空間
。

所述另一種方式我想內容採取至少由頭部和底部留出了空間所有，並且更如果必要的話，推頁腳視口外部。

要添加到等式我想不硬編碼頁腳的高度，因爲我猜它的內容大小可能因瀏覽器/設備而異。

如果我天真地讓默認行爲是完美的，當內容很長，但是當頁面頁腳不是太高時。

如果我試圖通過將底部定位在底部來固定頁腳，則可以採用其他方式：當內容很短時完美，但當內容太長時與內容重疊。

我已經看到，並與一些「幼稚」（硬編碼的頁腳的高度）的樣品沒有起到引導：Absolute Positioning with Footer not working

即使他們沒有工作，因爲自舉「搞亂事情了」。玩過我的樣本後，我發現罪魁禍首是適用於所有container-fluid的relativeposition。通過刪除它，我得到了腳本高度硬編碼「天真」的情況下的預期行爲。

那麼如何獲得與引導預期的行爲：

至少在天真的情況下，
沒有硬編碼頁腳的高度（可能需要一些JS）？

/*.footer { 
 
    position: absolute; 
 
    bottom: 0px; 
 
}*/

<body> 
 
    <div class="container-fluid"> 
 
     <div class="row"> 
 
      <div class="col-xl-12"> 
 
       Header<br/> 
 
       Header<br/> 
 
       Header<br/> 
 
      </div> 
 
     </div> 
 
     
 
     <div class="row"> 
 
      <div class="col-xl-12"> 
 
       Content<br/> 
 
       Content<br/> 
 
       Content<br/> 
 
       Content<br/> 
 
       Content<br/> 
 
       Content<br/> 
 
       Content<br/> 
 
       Content<br/> 
 
       Content<br/> 
 
       Content<br/> 
 
       Content<br/> 
 
       Content<br/> 
 
       Content<br/> 
 
       Content<br/> 
 
       Content<br/> 
 
       Content<br/> 
 
       Content<br/> 
 
       Content<br/> 
 
       Content<br/> 
 
       Content<br/> 
 
       Content<br/> 
 
       Content<br/> 
 
       Content<br/> 
 
       Content<br/> 
 
       Content<br/> 
 
       Content<br/> 
 
       Content<br/> 
 
       Content<br/> 
 
       Content<br/> 
 
       Content<br/> 
 
      </div> 
 
     </div> 
 
     
 
     <div class="row footer"> 
 
      <div class="col-xl-12"> 
 
       Footer<br/> 
 
       Footer<br/> 
 
       Footer<br/> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</body>

來源

2017-01-14 Pragmateek

以下樣式添加到您的頁腳：

position: absolute; 
bottom: 0;

有從引導4在這裏工作的例子：http://v4-alpha.getbootstrap.com/examples/sticky-footer-navbar/導航欄之間的容器和頁腳中position: relative;，所以你不應該有任何問題。

來源

2017-01-14 23:41:04

謝謝，但這種風格是什麼我指定在我的問題中，雖然在視口中有空間時它是完美的，但在沒有空間時它將不起作用。無論如何，因爲這是anwser的一部分。:) – Pragmateek

確定嗎？我已經在一些網站上使用過它，它的工作方式與您所描述的完全相同：即使存在額外的空間，也停留在底部，並且當內容溢出窗口時進入頁面的（可滾動）底部。例如，看[這個小提琴]（https://jsfiddle.net/b5mrjebm/）。這是完全相同的設置，除了我複製的內容，使其滾動。正如你看到的，頁腳落到了頁面的底部。 –

確實這個小提琴有所有必要的部分。 – Pragmateek

我之前做過多次這樣的事情，說實話，作爲後端開發者，它總是一種危險。有一個訣竅是我每次都會從我的公司找到一個人幫我。你需要將所有的內容包裝在一個新的容器/包裝中，除了頁腳，然後做這樣的事情（這是從我幾年前創建的一個工作示例粘貼的）。

footer { 
    height: 75px; 
    background-color: #34495e; 
    margin-bottom:0; 
    position: relative; 
} 

footer .row, footer > .row > .col-lg-12 { 
    height: 75px; 
} 

html, body { 
    height: 100%; 
} 

#container { 
    min-height: 100%; 
    height: auto !important; 

    margin: 0 auto -75px; 
    background-color:#f2f2f2; 
} 

#container:after { 
     display: block; 
     width: 100%; 
     content: ""; 
     height: 75px; 
}

和HTML：

<div id="container"> 

    <nav class="navbar navbar-inverse" role="navigation"> 
      <div class="container"> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
       <span class="sr-only">Toggle navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       </button> 
       <div id="logo" ></div> 
       <h1><a class="navbar-brand" href="http://localhost" style="color:white">Trapetaf.be</a></h1> 
      </div> 

      <div class="collapse navbar-collapse"> 
       <ul class="nav navbar-nav navbar-right"> 
       <li class="{{ Request::is('history') ? 'active' : '' }}"><a href="{{URL::to('history')}}">History</a></li> 
       <li class="{{ Request::is('leaderboard') ? 'active' : '' }}"><a href="{{URL::to('leaderboard')}}">Leaderboard</a></li> 
       <li class="{{Request::is('challenges/*') ? 'active' : '' }}"><a href="{{URL::to('challenges')}}">Challenges</a></li> 
       <li class="{{Request::is('statistics*')? 'active': ''}}"><a href="{{URL::to('statistics')}}">Statistics</a></li> 
       <li class="{{ Request::is('login*') || Request::is('aanmelden*') ? 'active' : '' }}"><a href="{{URL::to('login')}}" >Inloggen</a></li> 
        @if(Auth::check()) 
        <li class="{{ Request::is('admin*') ? 'active' : '' }}"><a href="{{URL::to('admin')}}">Admin</a></li> 
       @endif 
       </ul> 
      </div><!-- /.navbar-collapse --> 
      </div><!-- /.container --> 
     </nav> 

@yield('content') 

</div> 

     <footer> 
     <div class="row"> 
      <div class="col-md-12"> 
      <p> &copy; <?php echo Date('Y')?> Trapetaf.be</p> 
      </div> 
     </div> 
     </footer>

來源

2017-01-14 23:48:01

感謝您的回答，但我無法將其應用於我的用例。無論如何+1，因爲幾乎所有的CSS黑魔法都需要。 :-) – Pragmateek

感謝您的anwsers。

我終於被前來預期的行爲：

設置position: absolute和bottom: 0px爲footer，
爲html設置position: relative（我想，這樣的footer相對定位到它），
設置min-height: 100%爲html（這是我認爲的黑魔法），
動態LY定身的bottom-margin到footer的高度： document.body.style.marginBottom = footer.clientHeight + "px";

我知道我根本不是一個天才，但是這一切的CSS的東西我是無法理解。：'（

來源

2017-01-15 01:24:49 Pragmateek

因爲Flexbox的是默認的引導4，這種「粘性」頁腳是容易使用Flexbox的..

<wrapper class="d-flex flex-column"> 
    <nav> 
    </nav> 
    <main> 
    </main> 
    <footer> 
    </footer> 
</wrapper> 

body, wrapper { 
    min-height:100vh; 
} 

main { 
    flex:1; 
}

演示：Bootstrap 4 Sticky Footer with Flexbox

來源

2017-02-11 18:08:23 ZimSystem

好的謝謝你的選擇。 – Pragmateek

回答

相關問題