Andrew Kilburn Andrew Kilburn - 2 months ago 7
CSS Question

How to calculate height between navbar and footer?

So I would like my application to look like this:

Nav
Content
Footer


but I'd like the content to be the only thing which will scroll so the navbar and footer stay on the screen at all times.

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; }


I have done it where I manually set the height of the content but this won't work on all devices. So is there a way to calculate the height between the navbar and the footer?

Answer

just use position fixed for nav and footer, below code demonstrates fixed footer and nav

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>