Reputation: 1220
I have a sidenav
which has a container with social media context that is meant to stick to the bottom of the sidenav
which spans the entire view-port height like so:
sidenav {
height: 100%;
background: #007979;
left: 0;
position: fixed;
text-align:
width: 25rem;
}
The sidenav
immediate child is a container which has it's position
property set to relative to I can then assign a position
property and value to the social media container to stick to the bottom, like so:
sidenav-inner {
position: relative;
height: 100%;
}
My issue is that if I set the social media containers position
property to either absolute
or relative
, if the view-port height is adjusted slightly, the social media container overlaps the navigation list that is at the top, as it is positioned in correspondence to the sidenav-inner
container.
Question
How do I position the social media container at the bottom of the sidenav
, without using the position
proeprty? Or how do I use the position
property without it overlapping other content in the sidenav
?
<nav class="sidenav">
<div class="sidenav-inner">
<div class="sidenav-header">
<div class="row">
<div class="col-md-12">
<img src="/">
</div>
</div>
</div>
<ul class="nav">
<li><a>Item</a></li>
<li><a>Item</a></li>
<li><a>Item</a></li>
</ul>
<div class="side-nav-social">
<div>
//social media content
</div>
//more social media content
</div>
</div>
</nav>
Upvotes: 1
Views: 112
Reputation: 2613
You can easily solve this by defining .sidenav-inner as a flexbox and then having the header and footer not grow, but the ul grow to take up all the space. It will thus push the social media to the bottom of the box.
.sidenav {
height: 100%;
background: #007979;
left: 0;
position: fixed;
text-align:
width: 25rem;
}
.sidenav-inner {
position: relative;
height: 100%;
display: flex;
flex-direction: column;
}
.sidenav-header {
flex: 0 1 auto;
}
.sidenav-inner ul {
flex: 1 0 auto;
}
.side-nav-social {
flex: 0 1 auto;
}
https://jsfiddle.net/d2u85u4q/
Upvotes: 2
Reputation: 1304
You can do it like this:(be aware of margins) html
<nav class="sidenav">
<div class="sidenav-inner">
<div class="sidenav-header">
<div class="row">
<div class="col-md-12">
header
<img src="/">
</div>
</div>
</div>
<ul class="nav sidenav-body">
<li><a>Item</a></li>
<li><a>Item</a></li>
<li><a>Item</a></li>
<li><a>Item</a></li>
<li><a>Item</a></li>
<li><a>Item</a></li>
<li><a>Item</a></li>
<li><a>Item</a></li>
<li><a>Item</a></li>
</ul>
<div class="side-nav-social">
<div>
//social media content
</div>
//more social media content
</div>
</div>
</nav>
css:
.sidenav {
height: 250px;
background: #007979;
left: 0;
position: fixed;
width: 200px;
}
.sidenav-inner {
position: relative;
height: 90%;
}
.sidenav-header{
height:10%;
}
.sidenav-body{
overflow:auto;
height:70%;
}
.side-nav-social{
position:absolute;
bottom:0;
height:10%;
}
Upvotes: 0