Question

所以我希望我的应用程序看起来像这样：

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/ap_full@2x.png" />
                    </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; }

我已经完成了手动设置内容高度的地方，但这不适用于所有设备。那么有没有办法计算导航栏和页脚之间的高度？

Answer 1

只需使用固定在导航和页脚的位置，下面的代码演示固定的页脚和导航

body {
	background-color: #CCC;
    margin:70px 0px;
}
div#fixedheader {
	position:fixed;
	top:0px;
	left:0px;
	width:100%;
	color:#CCC;
	background:#333;
	padding:20px;
}
div#fixedfooter {
	position:fixed;
	bottom:0px;
	left:0px;
	width:100%;
	color:#CCC;
	background:#333;
	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>

Answer 2

只需将position:fixed添加到页脚和标题css。

如何计算导航栏和页脚之间的高度？

2 个答案: