如何計算導航欄和頁腳之間的高度？

所以我想我的應用程序看起來像這樣：如何計算導航欄和頁腳之間的高度？

Nav 
Content 
Footer

但我想內容是將在任何時候都這樣滾動屏幕上的導航欄和頁腳停留的唯一的事情。

HTML：

<body> 
    <div id="wrapper"> 
     <div id="header"> 
      <nav class="navbar navbar-sticky-top"> 
       <button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar2" aria-controls="exCollapsingNavbar2" aria-expanded="false" aria-label="Toggle navigation"> 
        &#9776; 
       </button> 
       <div class="collapse navbar-toggleable-xs" id="exCollapsingNavbar2"> 
        <a class="navbar-brand col-xs-2" href="http://www.test.co.uk/"> 
         <img src="~/Content/Images/[email protected]" /> 
        </a> 
        <ul class="nav navbar-nav"> 
         <li class="nav-item col-xs-3"> 
          @Html.ActionLink("MANAGEMENT", "", null, new { @class = "nav-link" }) 
         </li> 
         <li class="nav-item col-xs-3"> 
          @Html.ActionLink("DASHBOARD", "", null, new { @class = "nav-link" }) 
         </li> 
         <li class="nav-item col-xs-3"> 
          @Html.ActionLink("HELP/INFO", "", null, new { @class = "nav-link" }) 
         </li> 
        </ul> 
       </div> 
      </nav> 
     </div> 
     <div id="content"> 
      @RenderBody() 
     </div> 
     <div id="footer"> 
      <footer class="footer"> 
       <div class="col-xs-4"> 
        @Html.ActionLink("ELFS", "", null, new { @class = "nav-link" }) 
       </div> 
       <div class="col-xs-4"> 
        @Html.ActionLink("DATE/TIME", "", null, new { @class = "nav-link" }) 
       </div> 
       <div class="col-xs-4"> 
        @Html.ActionLink("AMOUNT CAPTURED: £0", "", null, new { @class = "nav-link" }) 
       </div> 

      </footer> 
     </div> 
    </div> 
    @Scripts.Render("~/bundles/jquery") 
    @Scripts.Render("~/bundles/bootstrap") 
    @RenderSection("scripts", required: false) 
</body>

CSS：

html, 
body { 
    margin: 0; 
    padding: 0; 
    height: 100%; } 

#wrapper { 
    min-height: 100%; 
    position: relative; } 

#content { 
    padding-bottom: 55px; 
    /* Height of the footer element */ 
    height: 840px; 
    overflow: auto; } 

#footer { 
    width: 100%; 
    height: 55px; 
    position: absolute; 
    bottom: 0; 
    left: 0; } 

footer { 
    background-color: #4F7F64; 
    height: 55px; } 
    footer div { 
    height: inherit; 
    text-align: center; } 
    footer div a { 
     vertical-align: middle; 
     color: white; 
     font-weight: bold; 
     text-decoration: none; 
     position: relative; 
     top: 50%; 
     transform: translateY(-50%); } 
     footer div a:hover { 
     text-decoration: none; 
     color: white; }

我已經做到了，我手動設置內容的高度，但這不會在所有設備上工作。那麼有沒有辦法來計算導航欄和頁腳之間的高度？

來源

2016-09-29 Andrew Kilburn

你爲什麼不設置'位置：fixed'用於導航和腳呢？ – SAM

@SAM這將如何工作？ –

引用我的代碼，我用固定的導航和頁腳 –

只使用固定的資產淨值和頁腳位置，下面的代碼演示了固定的頁腳和導航

body { 
 
\t background-color: #CCC; 
 
    margin:70px 0px; 
 
} 
 
div#fixedheader { 
 
\t position:fixed; 
 
\t top:0px; 
 
\t left:0px; 
 
\t width:100%; 
 
\t color:#CCC; 
 
\t background:#333; 
 
\t padding:20px; 
 
} 
 
div#fixedfooter { 
 
\t position:fixed; 
 
\t bottom:0px; 
 
\t left:0px; 
 
\t width:100%; 
 
\t color:#CCC; 
 
\t background:#333; 
 
\t padding:8px; 
 
}

<body> 
 
<div id="fixedheader">Top div content</div> 
 

 
<h1>Page Heading</h1> 
 
<p>Content placeholder ...</p><br/> 
 
    <p>Content placeholder ...</p><br/> 
 
    <p>Content placeholder ...</p><br/> 
 
    <p>Content placeholder ...</p><br/> 
 
    <p>Content placeholder ...</p><br/> 
 
    <p>Content placeholder ...</p><br/> 
 
    <p>Content placeholder ...</p><br/><p>Content placeholder ...</p><br/><p>Content placeholder ...</p><br/><p>Content placeholder ...</p><br/><p>Content placeholder ...</p><br/><p>Content placeholder ...</p><br/><p>Content placeholder ...</p><br/><p>Content placeholder ...</p><br/><p>Content placeholder ...</p><br/><p>Content placeholder ...</p><br/><p>Content placeholder ...</p><br/><p>Content placeholder ...</p><br/><p>Content placeholder ...</p><br/><p>Content placeholder ...</p><br/><p>Content placeholder ...</p><br/><p>Content placeholder ...</p><br/><p>Content placeholder ...</p><br/> 
 

 
<div id="fixedfooter">Bottom div content</div> 
 
</body>

來源

2016-09-29 09:04:39

但你只是增加了負載讓它滾動，如果你刪除邊緣它不滾動 –

老兄，它工作正常，如果你刪除保證金也，我已經刪除我的代碼中的利潤率，看看@AndrewKilburn –

對不起，男人，累了。感謝您的回覆 –

只需將position:fixed添加到頁腳和標題css。

來源

2016-09-29 08:55:18 SAM

你可以顯示HTML/CSS，因爲我不知道這將如何工作 –

@Andrew Kilburn Friends爲你做了它;） – SAM

如何計算導航欄和頁腳之間的高度？

回答

相關問題