Issue
I have a bootstrap layout like the one on the picture. It has several rows containing columns. The green link is placed inside the column of in the last row. Is it possible to make the link to always stick to the bottom of the parent container? It's relatively positioned. The option is to use position:absolute, but I can't do it because it will overlap other elements if the viewport height is small. What are the options (except for using @media conditions)? The html code of this element is like this:
<div class="bottom-link">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12">
<a class="big-link highlight-pink" href="#"><i class="fa fa-chevron-down" aria-hidden="true"></i> I wanna stick to bottom</a>
</div>
</div>
Here's the JSFiddle https://jsfiddle.net/DTcHh/34705/
Solution
For this to work without absolute positioning, you need to give it all the available height (maybe with calc or 100% height) and then use flex like:
.parent-of-a {
/* height: ? You must give all available height here, just 100% won't work */
display: flex;
align-items: flex-end;
}
A code snippet would be helpful indeed.
Update: I have updated your code as follows:
.container {
height: 100vh;
}
.useful-row {
height: 100%;
}
.col-lg-12.col-md-12.col-sm-12 {
height: 100%;
display: flex;
align-items: flex-end;
}
New fiddle: https://jsfiddle.net/ksiabani/wsvc4j31/
Answered By - Kostas Siabanis
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.