I have been trying to keep my footer at the bottom of the page using CSS.
Please explain in simpler terms as I am new to HTML, CSS and BootStrap.
HTML:
<div id="footer-bottom">
<div class="container">
<div class="row">
<div class="col-sm-6">
<div class="widget widget-text">
<div class="copyright">
<p class="last">
2015. AVENTIS. ALL RIGHTS RESERVED
</p>
</div>
</div><!-- widget-text -->
</div><!-- col -->
<div class="col-sm-6">
<div class="widget widget-social">
<div class="social-media">
<a class="facebook" href="#"><i class="fa fa-facebook"></i></a>
<a class="twitter" href="#"><i class="fa fa-twitter"></i></a>
<a class="google" href="#"><i class="fa fa-google-plus"></i></a>
<a class="pinterest" href="#"><i class="fa fa-pinterest"></i></a>
</div><!-- social-media -->
</div><!-- widget-social -->
</div><!-- col -->
</div><!-- row -->
</div><!-- container -->
</div>
CSS:
#footer-bottom {
padding: 30px 0;
background-color: #084C8D;
color: #FFFFFF;
position:absolute;
width: 100%;
height:100px;
bottom:0;
left:0;
}
the footer is currently stuck between my content and not at the bottom of the webpage.
html,
body {
padding: 0;
}
#footer-bottom {
padding: 30px 0;
background-color: #084C8D;
color: #FFFFFF;
position: relative;
width: 100%;
height: 100px;
margin: 0;
}
<html>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet
vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper
sed, adipiscing id dolor. Pellentesque auctor nisi id magna consequat sagittis. Curabitur dapibus enim sit amet elit pharetra tincidunt feugiat nisl imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed odio eros. Donec viverra mi quis
quam pulvinar at malesuada arcu rhoncus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem facilisis semper ac in est. Vivamus fermentum semper porta. Nunc
diam velit, adipiscing ut tristique vitae, sagittis vel odio. Maecenas convallis ullamcorper ultricies. Curabitur ornare, ligula semper consectetur sagittis, nisi diam iaculis velit, id fringilla sem nunc vel mi. Nam dictum, odio nec pretium volutpat,
arcu ante placerat erat, non tristique elit urna et turpis. Quisque mi metus, ornare sit amet fermentum et, tincidunt et orci. Fusce eget orci a orci congue vestibulum. Ut dolor diam, elementum et vestibulum eu, porttitor vel elit. Curabitur venenatis
pulvinar tellus gravida ornare. Sed et erat faucibus nunc euismod ultricies ut id justo. Nullam cursus suscipit nisi, et ultrices justo sodales nec. Fusce venenatis facilisis lectus ac semper. Aliquam at massa ipsum. Quisque bibendum purus convallis
nulla ultrices ultricies. Nullam aliquam, mi eu aliquam tincidunt, purus velit laoreet tortor, viverra pretium nisi quam vitae mi. Fusce vel volutpat elit. Nam sagittis nisi dui. Suspendisse lectus leo, consectetur in tempor sit amet, placerat quis
neque. Etiam luctus porttitor lorem, sed suscipit est rutrum non. Curabitur lobortis nisl a enim congue semper. Aenean commodo ultrices imperdiet. Vestibulum ut justo vel sapien venenatis tincidunt. Phasellus eget dolor sit amet ipsum dapibus condimentum
vitae quis lectus. Aliquam ut massa in turpis dapibus convallis. Praesent elit lacus, vestibulum at malesuada et, ornare et est. Ut augue nunc, sodales ut euismod non, adipiscing vitae orci. Mauris ut placerat justo. Mauris in ultricies enim. Quisque
nec est eleifend nulla ultrices egestas quis ut quam. Donec sollicitudin lectus a mauris pulvinar id aliquam urna cursus. Cras quis ligula sem, vel elementum mi. Phasellus non ullamcorper urna. Class aptent taciti sociosqu ad litora torquent per conubia
nostra, per inceptos himenaeos. In euismod ultrices facilisis. Vestibulum porta sapien adipiscing augue congue id pretium lectus molestie. Proin quis dictum nisl. Morbi id quam sapien, sed vestibulum sem. Duis elementum rutrum mauris sed convallis.
Proin vestibulum magna mi. Aenean tristique hendrerit magna, ac facilisis nulla hendrerit ut. Sed non tortor sodales quam auctor elementum. Donec hendrerit nunc eget elit pharetra pulvinar. Suspendisse id tempus tortor. Aenean luctus, elit commodo
laoreet commodo, justo nisi consequat massa, sed vulputate quam urna quis eros. Donec vel.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur
ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies a non tortor. Lorem ipsum dolor sit
amet, consectetur adipiscing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor. Pellentesque auctor nisi id magna consequat sagittis. Curabitur dapibus enim sit amet elit pharetra tincidunt feugiat nisl imperdiet.
Ut convallis libero in urna ultrices accumsan. Donec sed odio eros. Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies.
Mauris vitae nisi at sem facilisis semper ac in est. Vivamus fermentum semper porta. Nunc diam velit, adipiscing ut tristique vitae, sagittis vel odio. Maecenas convallis ullamcorper ultricies. Curabitur ornare, ligula semper consectetur sagittis,
nisi diam iaculis velit, id fringilla sem nunc vel mi. Nam dictum, odio nec pretium volutpat, arcu ante placerat erat, non tristique elit urna et turpis. Quisque mi metus, ornare sit amet fermentum et, tincidunt et orci. Fusce eget orci a orci congue
vestibulum. Ut dolor diam, elementum et vestibulum eu, porttitor vel elit. Curabitur venenatis pulvinar tellus gravida ornare. Sed et erat faucibus nunc euismod ultricies ut id justo. Nullam cursus suscipit nisi, et ultrices justo sodales nec. Fusce
venenatis facilisis lectus ac semper. Aliquam at massa ipsum. Quisque bibendum purus convallis nulla ultrices ultricies. Nullam aliquam, mi eu aliquam tincidunt, purus velit laoreet tortor, viverra pretium nisi quam vitae mi. Fusce vel volutpat elit.
Nam sagittis nisi dui. Suspendisse lectus leo, consectetur in tempor sit amet, placerat quis neque. Etiam luctus porttitor lorem, sed suscipit est rutrum non. Curabitur lobortis nisl a enim congue semper. Aenean commodo ultrices imperdiet. Vestibulum
ut justo vel sapien venenatis tincidunt. Phasellus eget dolor sit amet ipsum dapibus condimentum vitae quis lectus. Aliquam ut massa in turpis dapibus convallis. Praesent elit lacus, vestibulum at malesuada et, ornare et est. Ut augue nunc, sodales
ut euismod non, adipiscing vitae orci. Mauris ut placerat justo. Mauris in ultricies enim. Quisque nec est eleifend nulla ultrices egestas quis ut quam. Donec sollicitudin lectus a mauris pulvinar id aliquam urna cursus. Cras quis ligula sem, vel
elementum mi. Phasellus non ullamcorper urna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In euismod ultrices facilisis. Vestibulum porta sapien adipiscing augue congue id pretium lectus molestie. Proin
quis dictum nisl. Morbi id quam sapien, sed vestibulum sem. Duis elementum rutrum mauris sed convallis. Proin vestibulum magna mi. Aenean tristique hendrerit magna, ac facilisis nulla hendrerit ut. Sed non tortor sodales quam auctor elementum. Donec
hendrerit nunc eget elit pharetra pulvinar. Suspendisse id tempus tortor. Aenean luctus, elit commodo laoreet commodo, justo nisi consequat massa, sed vulputate quam urna quis eros. Donec vel.</p>
<div id="footer-bottom">
<div class="container">
<div class="row">
<div class="col-sm-6">
<div class="widget widget-text">
<div class="copyright">
<p class="last">
2015. AVENTIS. ALL RIGHTS RESERVED
</p>
</div>
</div>
<!-- widget-text -->
</div>
<!-- col -->
<div class="col-sm-6">
<div class="widget widget-social">
<div class="social-media">
<a class="facebook" href="#"><i class="fa fa-facebook"></i></a>
<a class="twitter" href="#"><i class="fa fa-twitter"></i></a>
<a class="google" href="#"><i class="fa fa-google-plus"></i></a>
<a class="pinterest" href="#"><i class="fa fa-pinterest"></i></a>
</div>
<!-- social-media -->
</div>
<!-- widget-social -->
</div>
<!-- col -->
</div>
<!-- row -->
</div>
<!-- container -->
</div>
</body>
</html>
In your css, change Position: absolute; to Position: Fixed;
Related
So I have some html containers which are repeated on a page. Each container will contain large portions of text. As the text will span a considerable number of lines each container has a max-height so the containers arn't too big to scroll past with the overflow of the containers hidden so you have to scroll in them.
Using jquery, I want to have a button below each container which will expand only the specific container it is meant to work for.
How I want to do this is by using jquery to toggle a css class only on the specific container the button is meant for. I've inlcuded a snippet to show the concept and what I've managed to get working but currently my code adds the css class to every container not just the specific one.
Also I don't think I've written the jquery code properly either. It works in FireFox but not in the stackoverflow snippet, so help with understanding what I've written wrong there would also be much appreciated.
I've tried to figure it out and have tried to use similar answers to similar questions found on stackoverflow, but as I am still learning jquery I've gotten myself completely stuck with this.
$("container-expand").click(function(){
$(".container-box").toggleClass("container-box-expand");
});
.container-box {
display: block;
background-color: #f6f6f6;
font-size: 17px;
line-height: 1.5;
white-space: nowrap;
max-width: 100%;
max-height: 100px;
overflow: auto;
margin: 0;
padding: 20px 25px;
}
.container-box-expand {
max-height: none;
}
<div class="container-box">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. A erat nam at lectus urna. Auctor elit sed vulputate mi sit amet mauris commodo quis. Interdum velit laoreet id donec ultrices. Posuere ac ut consequat semper viverra nam libero justo laoreet. Nec sagittis aliquam malesuada bibendum arcu. Cras fermentum odio eu feugiat. Facilisi nullam vehicula ipsum a arcu cursus vitae. Egestas egestas fringilla phasellus faucibus scelerisque eleifend donec pretium. Duis ut diam quam nulla. Augue ut lectus arcu bibendum at varius vel pharetra vel. Nunc eget lorem dolor sed viverra ipsum nunc. Urna id volutpat lacus laoreet. In est ante in nibh mauris cursus mattis molestie. Scelerisque varius morbi enim nunc faucibus a pellentesque sit amet.
<br/><br/>
Diam maecenas ultricies mi eget mauris pharetra et ultrices. Enim facilisis gravida neque convallis a cras semper. Cras ornare arcu dui vivamus arcu felis bibendum. Turpis egestas integer eget aliquet nibh praesent tristique. Eget nullam non nisi est. Enim nec dui nunc mattis enim ut tellus. Ipsum faucibus vitae aliquet nec. Nibh praesent tristique magna sit amet purus. Malesuada pellentesque elit eget gravida cum sociis. Purus viverra accumsan in nisl nisi scelerisque eu ultrices. Magnis dis parturient montes nascetur ridiculus mus mauris vitae ultricies. Habitasse platea dictumst quisque sagittis purus sit amet. Nec ultrices dui sapien eget. Sit amet volutpat consequat mauris nunc. Scelerisque felis imperdiet proin fermentum leo vel orci porta. Dictum at tempor commodo ullamcorper a lacus vestibulum sed arcu. Risus ultricies tristique nulla aliquet enim. Sem integer vitae justo eget magna fermentum iaculis. Tempor nec feugiat nisl pretium fusce id. Quis varius quam quisque id diam vel quam elementum pulvinar.
<br/><br/>
Imperdiet nulla malesuada pellentesque elit eget gravida cum sociis. Tincidunt arcu non sodales neque sodales ut etiam sit amet. Sed adipiscing diam donec adipiscing tristique risus nec. Eu volutpat odio facilisis mauris sit amet massa vitae. Morbi tincidunt augue interdum velit euismod in pellentesque massa placerat. Tempor orci eu lobortis elementum nibh. Ornare quam viverra orci sagittis eu volutpat odio. Nunc lobortis mattis aliquam faucibus purus in. Pulvinar sapien et ligula ullamcorper malesuada proin. Purus sit amet luctus venenatis.
<br/><br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. A erat nam at lectus urna. Auctor elit sed vulputate mi sit amet mauris commodo quis. Interdum velit laoreet id donec ultrices. Posuere ac ut consequat semper viverra nam libero justo laoreet. Nec sagittis aliquam malesuada bibendum arcu. Cras fermentum odio eu feugiat. Facilisi nullam vehicula ipsum a arcu cursus vitae. Egestas egestas fringilla phasellus faucibus scelerisque eleifend donec pretium. Duis ut diam quam nulla. Augue ut lectus arcu bibendum at varius vel pharetra vel. Nunc eget lorem dolor sed viverra ipsum nunc. Urna id volutpat lacus laoreet. In est ante in nibh mauris cursus mattis molestie. Scelerisque varius morbi enim nunc faucibus a pellentesque sit amet.
<br/><br/>
Diam maecenas ultricies mi eget mauris pharetra et ultrices. Enim facilisis gravida neque convallis a cras semper. Cras ornare arcu dui vivamus arcu felis bibendum. Turpis egestas integer eget aliquet nibh praesent tristique. Eget nullam non nisi est. Enim nec dui nunc mattis enim ut tellus. Ipsum faucibus vitae aliquet nec. Nibh praesent tristique magna sit amet purus. Malesuada pellentesque elit eget gravida cum sociis. Purus viverra accumsan in nisl nisi scelerisque eu ultrices. Magnis dis parturient montes nascetur ridiculus mus mauris vitae ultricies. Habitasse platea dictumst quisque sagittis purus sit amet. Nec ultrices dui sapien eget. Sit amet volutpat consequat mauris nunc. Scelerisque felis imperdiet proin fermentum leo vel orci porta. Dictum at tempor commodo ullamcorper a lacus vestibulum sed arcu. Risus ultricies tristique nulla aliquet enim. Sem integer vitae justo eget magna fermentum iaculis. Tempor nec feugiat nisl pretium fusce id. Quis varius quam quisque id diam vel quam elementum pulvinar.
<br/><br/>
Imperdiet nulla malesuada pellentesque elit eget gravida cum sociis. Tincidunt arcu non sodales neque sodales ut etiam sit amet. Sed adipiscing diam donec adipiscing tristique risus nec. Eu volutpat odio facilisis mauris sit amet massa vitae. Morbi tincidunt augue interdum velit euismod in pellentesque massa placerat. Tempor orci eu lobortis elementum nibh. Ornare quam viverra orci sagittis eu volutpat odio. Nunc lobortis mattis aliquam faucibus purus in. Pulvinar sapien et ligula ullamcorper malesuada proin. Purus sit amet luctus venenatis.
</div>
<button id="container-expand">Expand</button>
<br/><br/>
<div class="container-box">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. A erat nam at lectus urna. Auctor elit sed vulputate mi sit amet mauris commodo quis. Interdum velit laoreet id donec ultrices. Posuere ac ut consequat semper viverra nam libero justo laoreet. Nec sagittis aliquam malesuada bibendum arcu. Cras fermentum odio eu feugiat. Facilisi nullam vehicula ipsum a arcu cursus vitae. Egestas egestas fringilla phasellus faucibus scelerisque eleifend donec pretium. Duis ut diam quam nulla. Augue ut lectus arcu bibendum at varius vel pharetra vel. Nunc eget lorem dolor sed viverra ipsum nunc. Urna id volutpat lacus laoreet. In est ante in nibh mauris cursus mattis molestie. Scelerisque varius morbi enim nunc faucibus a pellentesque sit amet.
<br/><br/>
Diam maecenas ultricies mi eget mauris pharetra et ultrices. Enim facilisis gravida neque convallis a cras semper. Cras ornare arcu dui vivamus arcu felis bibendum. Turpis egestas integer eget aliquet nibh praesent tristique. Eget nullam non nisi est. Enim nec dui nunc mattis enim ut tellus. Ipsum faucibus vitae aliquet nec. Nibh praesent tristique magna sit amet purus. Malesuada pellentesque elit eget gravida cum sociis. Purus viverra accumsan in nisl nisi scelerisque eu ultrices. Magnis dis parturient montes nascetur ridiculus mus mauris vitae ultricies. Habitasse platea dictumst quisque sagittis purus sit amet. Nec ultrices dui sapien eget. Sit amet volutpat consequat mauris nunc. Scelerisque felis imperdiet proin fermentum leo vel orci porta. Dictum at tempor commodo ullamcorper a lacus vestibulum sed arcu. Risus ultricies tristique nulla aliquet enim. Sem integer vitae justo eget magna fermentum iaculis. Tempor nec feugiat nisl pretium fusce id. Quis varius quam quisque id diam vel quam elementum pulvinar.
<br/><br/>
Imperdiet nulla malesuada pellentesque elit eget gravida cum sociis. Tincidunt arcu non sodales neque sodales ut etiam sit amet. Sed adipiscing diam donec adipiscing tristique risus nec. Eu volutpat odio facilisis mauris sit amet massa vitae. Morbi tincidunt augue interdum velit euismod in pellentesque massa placerat. Tempor orci eu lobortis elementum nibh. Ornare quam viverra orci sagittis eu volutpat odio. Nunc lobortis mattis aliquam faucibus purus in. Pulvinar sapien et ligula ullamcorper malesuada proin. Purus sit amet luctus venenatis.
<br/><br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. A erat nam at lectus urna. Auctor elit sed vulputate mi sit amet mauris commodo quis. Interdum velit laoreet id donec ultrices. Posuere ac ut consequat semper viverra nam libero justo laoreet. Nec sagittis aliquam malesuada bibendum arcu. Cras fermentum odio eu feugiat. Facilisi nullam vehicula ipsum a arcu cursus vitae. Egestas egestas fringilla phasellus faucibus scelerisque eleifend donec pretium. Duis ut diam quam nulla. Augue ut lectus arcu bibendum at varius vel pharetra vel. Nunc eget lorem dolor sed viverra ipsum nunc. Urna id volutpat lacus laoreet. In est ante in nibh mauris cursus mattis molestie. Scelerisque varius morbi enim nunc faucibus a pellentesque sit amet.
<br/><br/>
Diam maecenas ultricies mi eget mauris pharetra et ultrices. Enim facilisis gravida neque convallis a cras semper. Cras ornare arcu dui vivamus arcu felis bibendum. Turpis egestas integer eget aliquet nibh praesent tristique. Eget nullam non nisi est. Enim nec dui nunc mattis enim ut tellus. Ipsum faucibus vitae aliquet nec. Nibh praesent tristique magna sit amet purus. Malesuada pellentesque elit eget gravida cum sociis. Purus viverra accumsan in nisl nisi scelerisque eu ultrices. Magnis dis parturient montes nascetur ridiculus mus mauris vitae ultricies. Habitasse platea dictumst quisque sagittis purus sit amet. Nec ultrices dui sapien eget. Sit amet volutpat consequat mauris nunc. Scelerisque felis imperdiet proin fermentum leo vel orci porta. Dictum at tempor commodo ullamcorper a lacus vestibulum sed arcu. Risus ultricies tristique nulla aliquet enim. Sem integer vitae justo eget magna fermentum iaculis. Tempor nec feugiat nisl pretium fusce id. Quis varius quam quisque id diam vel quam elementum pulvinar.
<br/><br/>
Imperdiet nulla malesuada pellentesque elit eget gravida cum sociis. Tincidunt arcu non sodales neque sodales ut etiam sit amet. Sed adipiscing diam donec adipiscing tristique risus nec. Eu volutpat odio facilisis mauris sit amet massa vitae. Morbi tincidunt augue interdum velit euismod in pellentesque massa placerat. Tempor orci eu lobortis elementum nibh. Ornare quam viverra orci sagittis eu volutpat odio. Nunc lobortis mattis aliquam faucibus purus in. Pulvinar sapien et ligula ullamcorper malesuada proin. Purus sit amet luctus venenatis.
</div>
<button id="container-expand">Expand</button>
<br/><br/>
<div class="container-box">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. A erat nam at lectus urna. Auctor elit sed vulputate mi sit amet mauris commodo quis. Interdum velit laoreet id donec ultrices. Posuere ac ut consequat semper viverra nam libero justo laoreet. Nec sagittis aliquam malesuada bibendum arcu. Cras fermentum odio eu feugiat. Facilisi nullam vehicula ipsum a arcu cursus vitae. Egestas egestas fringilla phasellus faucibus scelerisque eleifend donec pretium. Duis ut diam quam nulla. Augue ut lectus arcu bibendum at varius vel pharetra vel. Nunc eget lorem dolor sed viverra ipsum nunc. Urna id volutpat lacus laoreet. In est ante in nibh mauris cursus mattis molestie. Scelerisque varius morbi enim nunc faucibus a pellentesque sit amet.
<br/><br/>
Diam maecenas ultricies mi eget mauris pharetra et ultrices. Enim facilisis gravida neque convallis a cras semper. Cras ornare arcu dui vivamus arcu felis bibendum. Turpis egestas integer eget aliquet nibh praesent tristique. Eget nullam non nisi est. Enim nec dui nunc mattis enim ut tellus. Ipsum faucibus vitae aliquet nec. Nibh praesent tristique magna sit amet purus. Malesuada pellentesque elit eget gravida cum sociis. Purus viverra accumsan in nisl nisi scelerisque eu ultrices. Magnis dis parturient montes nascetur ridiculus mus mauris vitae ultricies. Habitasse platea dictumst quisque sagittis purus sit amet. Nec ultrices dui sapien eget. Sit amet volutpat consequat mauris nunc. Scelerisque felis imperdiet proin fermentum leo vel orci porta. Dictum at tempor commodo ullamcorper a lacus vestibulum sed arcu. Risus ultricies tristique nulla aliquet enim. Sem integer vitae justo eget magna fermentum iaculis. Tempor nec feugiat nisl pretium fusce id. Quis varius quam quisque id diam vel quam elementum pulvinar.
<br/><br/>
Imperdiet nulla malesuada pellentesque elit eget gravida cum sociis. Tincidunt arcu non sodales neque sodales ut etiam sit amet. Sed adipiscing diam donec adipiscing tristique risus nec. Eu volutpat odio facilisis mauris sit amet massa vitae. Morbi tincidunt augue interdum velit euismod in pellentesque massa placerat. Tempor orci eu lobortis elementum nibh. Ornare quam viverra orci sagittis eu volutpat odio. Nunc lobortis mattis aliquam faucibus purus in. Pulvinar sapien et ligula ullamcorper malesuada proin. Purus sit amet luctus venenatis.
<br/><br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. A erat nam at lectus urna. Auctor elit sed vulputate mi sit amet mauris commodo quis. Interdum velit laoreet id donec ultrices. Posuere ac ut consequat semper viverra nam libero justo laoreet. Nec sagittis aliquam malesuada bibendum arcu. Cras fermentum odio eu feugiat. Facilisi nullam vehicula ipsum a arcu cursus vitae. Egestas egestas fringilla phasellus faucibus scelerisque eleifend donec pretium. Duis ut diam quam nulla. Augue ut lectus arcu bibendum at varius vel pharetra vel. Nunc eget lorem dolor sed viverra ipsum nunc. Urna id volutpat lacus laoreet. In est ante in nibh mauris cursus mattis molestie. Scelerisque varius morbi enim nunc faucibus a pellentesque sit amet.
<br/><br/>
Diam maecenas ultricies mi eget mauris pharetra et ultrices. Enim facilisis gravida neque convallis a cras semper. Cras ornare arcu dui vivamus arcu felis bibendum. Turpis egestas integer eget aliquet nibh praesent tristique. Eget nullam non nisi est. Enim nec dui nunc mattis enim ut tellus. Ipsum faucibus vitae aliquet nec. Nibh praesent tristique magna sit amet purus. Malesuada pellentesque elit eget gravida cum sociis. Purus viverra accumsan in nisl nisi scelerisque eu ultrices. Magnis dis parturient montes nascetur ridiculus mus mauris vitae ultricies. Habitasse platea dictumst quisque sagittis purus sit amet. Nec ultrices dui sapien eget. Sit amet volutpat consequat mauris nunc. Scelerisque felis imperdiet proin fermentum leo vel orci porta. Dictum at tempor commodo ullamcorper a lacus vestibulum sed arcu. Risus ultricies tristique nulla aliquet enim. Sem integer vitae justo eget magna fermentum iaculis. Tempor nec feugiat nisl pretium fusce id. Quis varius quam quisque id diam vel quam elementum pulvinar.
<br/><br/>
Imperdiet nulla malesuada pellentesque elit eget gravida cum sociis. Tincidunt arcu non sodales neque sodales ut etiam sit amet. Sed adipiscing diam donec adipiscing tristique risus nec. Eu volutpat odio facilisis mauris sit amet massa vitae. Morbi tincidunt augue interdum velit euismod in pellentesque massa placerat. Tempor orci eu lobortis elementum nibh. Ornare quam viverra orci sagittis eu volutpat odio. Nunc lobortis mattis aliquam faucibus purus in. Pulvinar sapien et ligula ullamcorper malesuada proin. Purus sit amet luctus venenatis.
</div>
<button id="container-expand">Expand</button>
As someone else has said, your id's should be unique. Alternatively, make them classes.
If you make container-expand to be classes then you will need to alter your code like so...
$(".container-expand").click(function(){
$(this).prev().toggleClass("container-box-expand");
});
The this keyword refers to the button you are clicking (otherwise using just the class name would mean both buttons) . The .prev() bit will return the sibling element that comes before that button, so 'container-box' and in turn the correct class will get added to the correct container div.
I made a sticky navbar and I'm trying to center the menu and for some reason, I can't at all, it's driving me nuts. I can't figure out why and I have tried a lot of answers, none work.
HTML code here:
<!DOCTYPE html>
<html>
<head>
<title>Restaurant Titanic</title>
<link rel="stylesheet" type="text/css" href="indexC.css">
</head>
<body>
<nav class="navbar">
<ul class="menu-list">
<li>Acasa</li>
<li>Acasa</li>
<li>Acasa</li>
<li>Acasa</li>
<li>Acasa</li>
</ul>
</nav>
</body>
</html>
CSS code here
body{
background-image: url("");
}
.navbar{
text-align: center;
background-color: rgba(0,0,0,0.5);
position: sticky;
position: -webkit-sticky;
top: 0;
}
.menu-list{
text-decoration: none;
list-style-type: none;
}
.menu-list li {
display: inline-block;
}
h1{
color: white;
padding-top: 50px;
}
You can use this code
body{
background-image: url("");
margin: 0;
padding: 0;
}
.navbar{
text-align: center;
background-color: #777;
position: sticky;
position: -webkit-sticky;
top: 0;
padding: 15px;
}
.menu-list{
text-decoration: none;
list-style-type: none;
margin: 0;
padding: 0;
}
.menu-list li {
display: inline-block;
}
.menu-list li a {
margin: 0;
padding: 0 30px;
text-decoration: none;
color: #ffffff;
font-size: 20px;
text-align: center;
}
.main p {
margin: 0;
padding: 30px;
color: #333333;
font-size: 20px;
font-weight: 500;
}
<nav class="navbar">
<ul class="menu-list">
<li>Acasa</li>
<li>Acasa</li>
<li>Acasa</li>
<li>Acasa</li>
<li>Acasa</li>
</ul>
</nav>
<div class="main">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean laoreet tempus diam id varius. Curabitur quis placerat quam, sit amet consectetur odio. Aliquam mollis ac arcu sed viverra. Fusce et augue felis. Phasellus consequat ipsum sem, sit amet volutpat tortor ornare sit amet. Aliquam leo ante, sodales non faucibus sollicitudin, cursus sed lacus. Donec at finibus magna. Etiam porttitor, mi eget luctus viverra, lacus elit rhoncus nisl, quis pulvinar mauris purus eget lorem. In et nibh vitae tortor venenatis eleifend vitae quis turpis. Integer vestibulum nisi quam, varius commodo lacus lacinia vitae. Ut eget imperdiet eros, eget consectetur nulla. Nam nec semper est. Pellentesque scelerisque quam vel arcu tempus, sit amet mattis nulla luctus. Proin eu diam a justo accumsan dignissim vel eu elit. Mauris semper convallis massa eu ultrices.</p>
<p>Fusce quis nisl ac urna dignissim volutpat. Donec sed felis tincidunt, ornare orci eget, lacinia nunc. Quisque a lacus vel est ornare dignissim pretium quis neque. Mauris non velit et est laoreet laoreet. Aliquam feugiat non quam sit amet consequat. Proin a dolor tempor, pharetra arcu id, ullamcorper dolor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus fringilla dictum diam a varius. Vestibulum tempus pellentesque sem sit amet lobortis. Integer eu purus non erat feugiat cursus eu eget tortor. Mauris luctus, elit eu porta fermentum, ipsum neque pellentesque nunc, et mattis orci sem lacinia est. Sed eget est sed augue euismod aliquet. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<p>Ut eu felis eget erat lobortis fringilla ut quis libero. Curabitur in tortor mattis, consectetur ex a, interdum quam. Nullam luctus neque eget felis tristique, vitae posuere est rhoncus. Morbi id imperdiet lorem. Nulla porttitor posuere sapien ac condimentum. Nam ut est et ex suscipit finibus ac at tortor. Proin augue risus, gravida vitae lacus non, consectetur pharetra tortor. Sed tristique pretium elit ut imperdiet. Morbi tincidunt mattis justo, quis blandit sem imperdiet elementum. Aenean varius molestie sapien quis viverra. Aliquam convallis efficitur erat. Aliquam convallis id leo eu ultricies. Etiam placerat odio ac placerat congue. In hac habitasse platea dictumst. Integer vitae ipsum ut massa tempor commodo sed id odio. Nunc semper pellentesque augue non ornare.</p>
<p>Nam sit amet eros risus. Nam arcu lectus, tincidunt quis fringilla eget, eleifend id felis. Duis at suscipit elit. Nunc tellus velit, viverra id urna vitae, scelerisque congue diam. Donec a nibh id nisi blandit tincidunt at at diam. Pellentesque accumsan diam turpis, hendrerit dapibus dolor finibus quis. Vivamus vulputate scelerisque enim, vitae rhoncus velit facilisis sed. Mauris laoreet eu eros sit amet auctor. Donec auctor molestie blandit.</p>
<p>Proin pretium nibh tortor, aliquam accumsan massa porttitor luctus. Donec facilisis nisi sit amet commodo egestas. Aenean quis hendrerit quam. Nam ut tellus lorem. Mauris sed rhoncus purus, eu tincidunt orci. Aliquam suscipit justo non laoreet ullamcorper. Morbi faucibus nisi vitae velit egestas posuere. Nam porta convallis diam non dignissim. Suspendisse est nisi, tincidunt sed ullamcorper at, facilisis sit amet nisl. Donec a enim non tellus posuere tincidunt. Curabitur a metus sagittis, commodo urna sit amet, efficitur ipsum. In sed diam pellentesque, feugiat metus sed, gravida orci. Cras tempus pellentesque euismod. Etiam sollicitudin lectus odio, eget vestibulum justo vestibulum et. Integer posuere feugiat neque, sed aliquam felis lobortis et.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean laoreet tempus diam id varius. Curabitur quis placerat quam, sit amet consectetur odio. Aliquam mollis ac arcu sed viverra. Fusce et augue felis. Phasellus consequat ipsum sem, sit amet volutpat tortor ornare sit amet. Aliquam leo ante, sodales non faucibus sollicitudin, cursus sed lacus. Donec at finibus magna. Etiam porttitor, mi eget luctus viverra, lacus elit rhoncus nisl, quis pulvinar mauris purus eget lorem. In et nibh vitae tortor venenatis eleifend vitae quis turpis. Integer vestibulum nisi quam, varius commodo lacus lacinia vitae. Ut eget imperdiet eros, eget consectetur nulla. Nam nec semper est. Pellentesque scelerisque quam vel arcu tempus, sit amet mattis nulla luctus. Proin eu diam a justo accumsan dignissim vel eu elit. Mauris semper convallis massa eu ultrices.</p>
<p>Fusce quis nisl ac urna dignissim volutpat. Donec sed felis tincidunt, ornare orci eget, lacinia nunc. Quisque a lacus vel est ornare dignissim pretium quis neque. Mauris non velit et est laoreet laoreet. Aliquam feugiat non quam sit amet consequat. Proin a dolor tempor, pharetra arcu id, ullamcorper dolor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus fringilla dictum diam a varius. Vestibulum tempus pellentesque sem sit amet lobortis. Integer eu purus non erat feugiat cursus eu eget tortor. Mauris luctus, elit eu porta fermentum, ipsum neque pellentesque nunc, et mattis orci sem lacinia est. Sed eget est sed augue euismod aliquet. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<p>Ut eu felis eget erat lobortis fringilla ut quis libero. Curabitur in tortor mattis, consectetur ex a, interdum quam. Nullam luctus neque eget felis tristique, vitae posuere est rhoncus. Morbi id imperdiet lorem. Nulla porttitor posuere sapien ac condimentum. Nam ut est et ex suscipit finibus ac at tortor. Proin augue risus, gravida vitae lacus non, consectetur pharetra tortor. Sed tristique pretium elit ut imperdiet. Morbi tincidunt mattis justo, quis blandit sem imperdiet elementum. Aenean varius molestie sapien quis viverra. Aliquam convallis efficitur erat. Aliquam convallis id leo eu ultricies. Etiam placerat odio ac placerat congue. In hac habitasse platea dictumst. Integer vitae ipsum ut massa tempor commodo sed id odio. Nunc semper pellentesque augue non ornare.</p>
<p>Nam sit amet eros risus. Nam arcu lectus, tincidunt quis fringilla eget, eleifend id felis. Duis at suscipit elit. Nunc tellus velit, viverra id urna vitae, scelerisque congue diam. Donec a nibh id nisi blandit tincidunt at at diam. Pellentesque accumsan diam turpis, hendrerit dapibus dolor finibus quis. Vivamus vulputate scelerisque enim, vitae rhoncus velit facilisis sed. Mauris laoreet eu eros sit amet auctor. Donec auctor molestie blandit.</p>
<p>Proin pretium nibh tortor, aliquam accumsan massa porttitor luctus. Donec facilisis nisi sit amet commodo egestas. Aenean quis hendrerit quam. Nam ut tellus lorem. Mauris sed rhoncus purus, eu tincidunt orci. Aliquam suscipit justo non laoreet ullamcorper. Morbi faucibus nisi vitae velit egestas posuere. Nam porta convallis diam non dignissim. Suspendisse est nisi, tincidunt sed ullamcorper at, facilisis sit amet nisl. Donec a enim non tellus posuere tincidunt. Curabitur a metus sagittis, commodo urna sit amet, efficitur ipsum. In sed diam pellentesque, feugiat metus sed, gravida orci. Cras tempus pellentesque euismod. Etiam sollicitudin lectus odio, eget vestibulum justo vestibulum et. Integer posuere feugiat neque, sed aliquam felis lobortis et.</p>
</div>
I have 3 fixed elements
- top nav
- ads banner
- subMenu
I wish those to be position fixed, however, sometime, the ads banner can be hidden, in such case, subMenu should still be position fixed. is there a non js solution?
for now, bar has hardcoded top however if ads div is hidden, this will not work
<div class="page">
<div class="top-bar"> top nav</div>
<div class="ads">ads</div>
<div class="body">
<div class="bar">sub menu</div>
<div class="text">
long long text ...
</div>
</div>
</div>
css
.top-bar {
height: 50px;
background: blue;
position: fixed;
width: 100%;
top: 0;
}
.ads {
height: 70px;
background: gray;
position: fixed;
top: 50px;
width: 100%;
}
.bar {
height: 40px;
width: 100%;
background: yellow;
position: fixed;
top: 110px;
}
https://codepen.io/anon/pen/bLZgaO
Simply wrap the fixed elements in the same container and make this container fixed instead:
.fixed {
position: fixed;
width: 100%;
top: 0;
}
.top-bar {
height: 50px;
background: blue;
}
.ads {
height: 70px;
background: gray;
}
.bar {
height: 40px;
background: yellow;
}
<div class="page">
<div class="fixed">
<div class="top-bar"> top nav</div>
<div class="ads">ads</div>
<div class="bar">sub menu</div>
</div>
<div class="body">
<div class="text">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et felis leo. Sed vehicula felis ac suscipit venenatis. Maecenas vel est eget erat mollis feugiat id in felis. Fusce quam felis, facilisis et suscipit quis, lacinia in nunc. Aenean interdum
ligula fermentum justo interdum, eu eleifend leo pulvinar. Ut nec orci id nisi ultricies feugiat. Duis at tincidunt sapien, at eleifend lectus. Nunc ex magna, porta at massa a, venenatis blandit diam. Sed congue mattis justo, nec vestibulum justo.
Pellentesque sodales elit quis quam posuere auctor. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla consectetur dapibus mauris non porttitor. Vestibulum maximus interdum enim eu pharetra. Donec congue
quam quis justo sodales aliquet quis in risus. Integer elit diam, efficitur vitae viverra sit amet, sollicitudin in elit. Proin eget velit faucibus est vulputate lacinia. Curabitur sem urna, efficitur sit amet magna sed, rutrum tempor urna. Suspendisse
sit amet sem nec lectus suscipit aliquet. Nulla vel ullamcorper leo, non scelerisque nibh. Maecenas finibus mauris elit, quis tristique magna efficitur vehicula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos
himenaeos. Quisque at cursus ligula, eget luctus mi. Nunc ipsum ipsum, accumsan at tortor non, pharetra mollis sem. Duis vestibulum molestie leo, vel ultrices felis rutrum ut. Maecenas commodo arcu id arcu tempor, eu tempus tellus commodo. Maecenas
finibus, turpis auctor accumsan dignissim, lacus odio semper sapien, et vulputate dolor erat sit amet diam. Fusce interdum consectetur placerat. Maecenas et arcu ut nulla malesuada molestie. Maecenas cursus velit sit amet enim egestas semper.
Integer aliquet, urna id rutrum sagittis, velit metus iaculis urna, vel porta turpis dolor non nulla. Ut vitae turpis at lacus vehicula finibus sed sit amet nibh. Proin id diam ac neque eleifend euismod vel non risus. Vestibulum egestas, orci
et eleifend egestas, ipsum ante tempus elit, sit amet tincidunt ligula risus in lectus. Aenean vitae turpis eget erat egestas molestie. Duis efficitur augue elementum quam ultrices blandit. Nam iaculis libero non gravida tempor. Mauris sit amet
leo a lorem mattis faucibus quis at enim. Integer tincidunt efficitur ipsum, a imperdiet sem rutrum sit amet. Integer diam nibh, imperdiet nec leo a, ullamcorper finibus ex. Sed sed justo lorem. Proin justo enim, faucibus eu semper at, dictum
et nunc. Suspendisse congue id ligula ac faucibus. Mauris varius nisi et est semper sagittis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam a felis ut purus tincidunt finibus. Nunc sollicitudin
massa nulla, ac rhoncus eros finibus vitae. Nam auctor lobortis porta. Nulla et vestibulum lorem. Nunc a mi pretium, pulvinar magna ut, ornare velit. Mauris feugiat, quam in accumsan eleifend, orci velit placerat mauris, ut mollis ipsum sapien
ac ligula. Donec eleifend lectus lorem, ut finibus ipsum blandit ac. Ut placerat purus et lacus sodales consequat. Nulla in massa eget metus luctus mattis. Aliquam erat volutpat. Cras aliquet risus ut nisl blandit tempus.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et felis leo. Sed vehicula felis ac suscipit venenatis. Maecenas vel est eget erat mollis feugiat id in felis. Fusce quam felis, facilisis et suscipit quis, lacinia in nunc. Aenean interdum
ligula fermentum justo interdum, eu eleifend leo pulvinar. Ut nec orci id nisi ultricies feugiat. Duis at tincidunt sapien, at eleifend lectus. Nunc ex magna, porta at massa a, venenatis blandit diam. Sed congue mattis justo, nec vestibulum justo.
Pellentesque sodales elit quis quam posuere auctor. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla consectetur dapibus mauris non porttitor. Vestibulum maximus interdum enim eu pharetra. Donec congue
quam quis justo sodales aliquet quis in risus. Integer elit diam, efficitur vitae viverra sit amet, sollicitudin in elit. Proin eget velit faucibus est vulputate lacinia. Curabitur sem urna, efficitur sit amet magna sed, rutrum tempor urna. Suspendisse
sit amet sem nec lectus suscipit aliquet. Nulla vel ullamcorper leo, non scelerisque nibh. Maecenas finibus mauris elit, quis tristique magna efficitur vehicula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos
himenaeos. Quisque at cursus ligula, eget luctus mi. Nunc ipsum ipsum, accumsan at tortor non, pharetra mollis sem. Duis vestibulum molestie leo, vel ultrices felis rutrum ut. Maecenas commodo arcu id arcu tempor, eu tempus tellus commodo. Maecenas
finibus, turpis auctor accumsan dignissim, lacus odio semper sapien, et vulputate dolor erat sit amet diam. Fusce interdum consectetur placerat. Maecenas et arcu ut nulla malesuada molestie. Maecenas cursus velit sit amet enim egestas semper.
Integer aliquet, urna id rutrum sagittis, velit metus iaculis urna, vel porta turpis dolor non nulla. Ut vitae turpis at lacus vehicula finibus sed sit amet nibh. Proin id diam ac neque eleifend euismod vel non risus. Vestibulum egestas, orci
et eleifend egestas, ipsum ante tempus elit, sit amet tincidunt ligula risus in lectus. Aenean vitae turpis eget erat egestas molestie. Duis efficitur augue elementum quam ultrices blandit. Nam iaculis libero non gravida tempor. Mauris sit amet
leo a lorem mattis faucibus quis at enim. Integer tincidunt efficitur ipsum, a imperdiet sem rutrum sit amet. Integer diam nibh, imperdiet nec leo a, ullamcorper finibus ex. Sed sed justo lorem. Proin justo enim, faucibus eu semper at, dictum
et nunc. Suspendisse congue id ligula ac faucibus. Mauris varius nisi et est semper sagittis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam a felis ut purus tincidunt finibus. Nunc sollicitudin
massa nulla, ac rhoncus eros finibus vitae. Nam auctor lobortis porta. Nulla et vestibulum lorem. Nunc a mi pretium, pulvinar magna ut, ornare velit. Mauris feugiat, quam in accumsan eleifend, orci velit placerat mauris, ut mollis ipsum sapien
ac ligula. Donec eleifend lectus lorem, ut finibus ipsum blandit ac. Ut placerat purus et lacus sodales consequat. Nulla in massa eget metus luctus mattis. Aliquam erat volutpat. Cras aliquet risus ut nisl blandit tempus.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et felis leo. Sed vehicula felis ac suscipit venenatis. Maecenas vel est eget erat mollis feugiat id in felis. Fusce quam felis, facilisis et suscipit quis, lacinia in nunc. Aenean interdum
ligula fermentum justo interdum, eu eleifend leo pulvinar. Ut nec orci id nisi ultricies feugiat. Duis at tincidunt sapien, at eleifend lectus. Nunc ex magna, porta at massa a, venenatis blandit diam. Sed congue mattis justo, nec vestibulum justo.
Pellentesque sodales elit quis quam posuere auctor. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla consectetur dapibus mauris non porttitor. Vestibulum maximus interdum enim eu pharetra. Donec congue
quam quis justo sodales aliquet quis in risus. Integer elit diam, efficitur vitae viverra sit amet, sollicitudin in elit. Proin eget velit faucibus est vulputate lacinia. Curabitur sem urna, efficitur sit amet magna sed, rutrum tempor urna. Suspendisse
sit amet sem nec lectus suscipit aliquet. Nulla vel ullamcorper leo, non scelerisque nibh. Maecenas finibus mauris elit, quis tristique magna efficitur vehicula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos
himenaeos. Quisque at cursus ligula, eget luctus mi. Nunc ipsum ipsum, accumsan at tortor non, pharetra mollis sem. Duis vestibulum molestie leo, vel ultrices felis rutrum ut. Maecenas commodo arcu id arcu tempor, eu tempus tellus commodo. Maecenas
finibus, turpis auctor accumsan dignissim, lacus odio semper sapien, et vulputate dolor erat sit amet diam. Fusce interdum consectetur placerat. Maecenas et arcu ut nulla malesuada molestie. Maecenas cursus velit sit amet enim egestas semper.
Integer aliquet, urna id rutrum sagittis, velit metus iaculis urna, vel porta turpis dolor non nulla. Ut vitae turpis at lacus vehicula finibus sed sit amet nibh. Proin id diam ac neque eleifend euismod vel non risus. Vestibulum egestas, orci
et eleifend egestas, ipsum ante tempus elit, sit amet tincidunt ligula risus in lectus. Aenean vitae turpis eget erat egestas molestie. Duis efficitur augue elementum quam ultrices blandit. Nam iaculis libero non gravida tempor. Mauris sit amet
leo a lorem mattis faucibus quis at enim. Integer tincidunt efficitur ipsum, a imperdiet sem rutrum sit amet. Integer diam nibh, imperdiet nec leo a, ullamcorper finibus ex. Sed sed justo lorem. Proin justo enim, faucibus eu semper at, dictum
et nunc. Suspendisse congue id ligula ac faucibus. Mauris varius nisi et est semper sagittis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam a felis ut purus tincidunt finibus. Nunc sollicitudin
massa nulla, ac rhoncus eros finibus vitae. Nam auctor lobortis porta. Nulla et vestibulum lorem. Nunc a mi pretium, pulvinar magna ut, ornare velit. Mauris feugiat, quam in accumsan eleifend, orci velit placerat mauris, ut mollis ipsum sapien
ac ligula. Donec eleifend lectus lorem, ut finibus ipsum blandit ac. Ut placerat purus et lacus sodales consequat. Nulla in massa eget metus luctus mattis. Aliquam erat volutpat. Cras aliquet risus ut nisl blandit tempus.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et felis leo. Sed vehicula felis ac suscipit venenatis. Maecenas vel est eget erat mollis feugiat id in felis. Fusce quam felis, facilisis et suscipit quis, lacinia in nunc. Aenean interdum
ligula fermentum justo interdum, eu eleifend leo pulvinar. Ut nec orci id nisi ultricies feugiat. Duis at tincidunt sapien, at eleifend lectus. Nunc ex magna, porta at massa a, venenatis blandit diam. Sed congue mattis justo, nec vestibulum justo.
Pellentesque sodales elit quis quam posuere auctor. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla consectetur dapibus mauris non porttitor. Vestibulum maximus interdum enim eu pharetra. Donec congue
quam quis justo sodales aliquet quis in risus. Integer elit diam, efficitur vitae viverra sit amet, sollicitudin in elit. Proin eget velit faucibus est vulputate lacinia. Curabitur sem urna, efficitur sit amet magna sed, rutrum tempor urna. Suspendisse
sit amet sem nec lectus suscipit aliquet. Nulla vel ullamcorper leo, non scelerisque nibh. Maecenas finibus mauris elit, quis tristique magna efficitur vehicula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos
himenaeos. Quisque at cursus ligula, eget luctus mi. Nunc ipsum ipsum, accumsan at tortor non, pharetra mollis sem. Duis vestibulum molestie leo, vel ultrices felis rutrum ut. Maecenas commodo arcu id arcu tempor, eu tempus tellus commodo. Maecenas
finibus, turpis auctor accumsan dignissim, lacus odio semper sapien, et vulputate dolor erat sit amet diam. Fusce interdum consectetur placerat. Maecenas et arcu ut nulla malesuada molestie. Maecenas cursus velit sit amet enim egestas semper.
Integer aliquet, urna id rutrum sagittis, velit metus iaculis urna, vel porta turpis dolor non nulla. Ut vitae turpis at lacus vehicula finibus sed sit amet nibh. Proin id diam ac neque eleifend euismod vel non risus. Vestibulum egestas, orci
et eleifend egestas, ipsum ante tempus elit, sit amet tincidunt ligula risus in lectus. Aenean vitae turpis eget erat egestas molestie. Duis efficitur augue elementum quam ultrices blandit. Nam iaculis libero non gravida tempor. Mauris sit amet
leo a lorem mattis faucibus quis at enim. Integer tincidunt efficitur ipsum, a imperdiet sem rutrum sit amet. Integer diam nibh, imperdiet nec leo a, ullamcorper finibus ex. Sed sed justo lorem. Proin justo enim, faucibus eu semper at, dictum
et nunc. Suspendisse congue id ligula ac faucibus. Mauris varius nisi et est semper sagittis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam a felis ut purus tincidunt finibus. Nunc sollicitudin
massa nulla, ac rhoncus eros finibus vitae. Nam auctor lobortis porta. Nulla et vestibulum lorem. Nunc a mi pretium, pulvinar magna ut, ornare velit. Mauris feugiat, quam in accumsan eleifend, orci velit placerat mauris, ut mollis ipsum sapien
ac ligula. Donec eleifend lectus lorem, ut finibus ipsum blandit ac. Ut placerat purus et lacus sodales consequat. Nulla in massa eget metus luctus mattis. Aliquam erat volutpat. Cras aliquet risus ut nisl blandit tempus.
</p>
</div>
</div>
</div>
I'm trying to create a layout with the following specs and look:
|-------------|
| header |
|-------------|
| |
| main |
| |
| |
|-------------|
| footer |
|-------------|
The header should be visible always, meaning, it should move down when scrolling
if the height of the content of main isn't enough to fill the entire screen, it should take all the space to the bottom of the screen, except for the height of the footer.
if the height of the content of main is more than the height of the screen, the footer should be placed at the end of the main block, so it would appear only after scrolling to the bottom.
Of course, this could be easily done with a few paddings, a few position: absolute; and a few fixed values, but I'm trying to do all that with CSS3 (flex) without specifying the height of neither of the elements.
This is what I have currently: http://codepen.io/anon/pen/ZGXqBa
but as you can see I'm failing at points 1.
Btw, I'm using Bootstrap, if that would make things easier.
You can split the contents of the body in two parts:
The header
A wrapper which contains the main and the footer
Those parts will fill body without overflowing it.
If the main and the footer are tall enough, they will overflow its wrapper, but not the body.
This way the body won't be scrolled, so the header will always be at the top.
html {
height: 100%; /* Fill all screen */
display: flex; /* Magic begins */
}
body, #wrapper {
flex: 1; /* Exactly fill available space */
display: flex; /* More magic */
flex-direction: column; /* Column layout */
}
#wrapper {
overflow: auto; /* Add scrollbars if necessary */
}
main {
flex-grow: 1; /* Grow to fill remaining space */
}
main, footer {
flex-shrink: 0; /* Needed for old Chrome */
}
html {
height: 100%; /* Fill all screen */
display: flex; /* Magic begins */
}
body, #wrapper {
flex: 1; /* Exactly fill available space */
display: flex; /* More magic */
flex-direction: column; /* Column layout */
}
#wrapper {
overflow: auto; /* Add scrollbars if necessary */
}
main {
flex-grow: 1; /* Grow to fill remaining space */
}
main, footer {
flex-shrink: 0; /* Needed for old Chrome */
}
header, main, footer {
border: 1px solid;
}
<header>Header</header>
<div id="wrapper">
<main>Main</main>
<footer>Footer</footer>
</div>
html {
height: 100%; /* Fill all screen */
display: flex; /* Magic begins */
}
body, #wrapper {
flex: 1; /* Exactly fill available space */
display: flex; /* More magic */
flex-direction: column; /* Column layout */
}
#wrapper {
overflow: auto; /* Add scrollbars if necessary */
}
main {
flex-grow: 1; /* Grow to fill remaining space */
}
main, footer {
flex-shrink: 0; /* Needed for old Chrome */
}
header, main, footer {
border: 1px solid;
}
<header>Header</header>
<div id="wrapper">
<main>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor. Pellentesque auctor nisi id magna consequat sagittis. Curabitur dapibus enim sit amet elit pharetra tincidunt feugiat nisl imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed odio eros. Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem facilisis semper ac in est.</p>
<p>Vivamus fermentum semper porta. Nunc diam velit, adipiscing ut tristique vitae, sagittis vel odio. Maecenas convallis ullamcorper ultricies. Curabitur ornare, ligula semper consectetur sagittis, nisi diam iaculis velit, id fringilla sem nunc vel mi. Nam dictum, odio nec pretium volutpat, arcu ante placerat erat, non tristique elit urna et turpis. Quisque mi metus, ornare sit amet fermentum et, tincidunt et orci. Fusce eget orci a orci congue vestibulum. Ut dolor diam, elementum et vestibulum eu, porttitor vel elit. Curabitur venenatis pulvinar tellus gravida ornare. Sed et erat faucibus nunc euismod ultricies ut id justo. Nullam cursus suscipit nisi, et ultrices justo sodales nec. Fusce venenatis facilisis lectus ac semper. Aliquam at massa ipsum. Quisque bibendum purus convallis nulla ultrices ultricies. Nullam aliquam, mi eu aliquam tincidunt, purus velit laoreet tortor, viverra pretium nisi quam vitae mi. Fusce vel volutpat elit. Nam sagittis nisi dui.</p>
<p>Suspendisse lectus leo, consectetur in tempor sit amet, placerat quis neque. Etiam luctus porttitor lorem, sed suscipit est rutrum non. Curabitur lobortis nisl a enim congue semper. Aenean commodo ultrices imperdiet. Vestibulum ut justo vel sapien venenatis tincidunt. Phasellus eget dolor sit amet ipsum dapibus condimentum vitae quis lectus. Aliquam ut massa in turpis dapibus convallis. Praesent elit lacus, vestibulum at malesuada et, ornare et est. Ut augue nunc, sodales ut euismod non, adipiscing vitae orci. Mauris ut placerat justo. Mauris in ultricies enim. Quisque nec est eleifend nulla ultrices egestas quis ut quam. Donec sollicitudin lectus a mauris pulvinar id aliquam urna cursus. Cras quis ligula sem, vel elementum mi. Phasellus non ullamcorper urna.</p>
<p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In euismod ultrices facilisis. Vestibulum porta sapien adipiscing augue congue id pretium lectus molestie. Proin quis dictum nisl. Morbi id quam sapien, sed vestibulum sem. Duis elementum rutrum mauris sed convallis. Proin vestibulum magna mi. Aenean tristique hendrerit magna, ac facilisis nulla hendrerit ut. Sed non tortor sodales quam auctor elementum. Donec hendrerit nunc eget elit pharetra pulvinar. Suspendisse id tempus tortor. Aenean luctus, elit commodo laoreet commodo, justo nisi consequat massa, sed vulputate quam urna quis eros. Donec vel.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor. Pellentesque auctor nisi id magna consequat sagittis. Curabitur dapibus enim sit amet elit pharetra tincidunt feugiat nisl imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed odio eros. Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem facilisis semper ac in est.</p>
<p>Vivamus fermentum semper porta. Nunc diam velit, adipiscing ut tristique vitae, sagittis vel odio. Maecenas convallis ullamcorper ultricies. Curabitur ornare, ligula semper consectetur sagittis, nisi diam iaculis velit, id fringilla sem nunc vel mi. Nam dictum, odio nec pretium volutpat, arcu ante placerat erat, non tristique elit urna et turpis. Quisque mi metus, ornare sit amet fermentum et, tincidunt et orci. Fusce eget orci a orci congue vestibulum. Ut dolor diam, elementum et vestibulum eu, porttitor vel elit. Curabitur venenatis pulvinar tellus gravida ornare. Sed et erat faucibus nunc euismod ultricies ut id justo. Nullam cursus suscipit nisi, et ultrices justo sodales nec. Fusce venenatis facilisis lectus ac semper. Aliquam at massa ipsum. Quisque bibendum purus convallis nulla ultrices ultricies. Nullam aliquam, mi eu aliquam tincidunt, purus velit laoreet tortor, viverra pretium nisi quam vitae mi. Fusce vel volutpat elit. Nam sagittis nisi dui.</p>
<p>Suspendisse lectus leo, consectetur in tempor sit amet, placerat quis neque. Etiam luctus porttitor lorem, sed suscipit est rutrum non. Curabitur lobortis nisl a enim congue semper. Aenean commodo ultrices imperdiet. Vestibulum ut justo vel sapien venenatis tincidunt. Phasellus eget dolor sit amet ipsum dapibus condimentum vitae quis lectus. Aliquam ut massa in turpis dapibus convallis. Praesent elit lacus, vestibulum at malesuada et, ornare et est. Ut augue nunc, sodales ut euismod non, adipiscing vitae orci. Mauris ut placerat justo. Mauris in ultricies enim. Quisque nec est eleifend nulla ultrices egestas quis ut quam. Donec sollicitudin lectus a mauris pulvinar id aliquam urna cursus. Cras quis ligula sem, vel elementum mi. Phasellus non ullamcorper urna.</p>
<p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In euismod ultrices facilisis. Vestibulum porta sapien adipiscing augue congue id pretium lectus molestie. Proin quis dictum nisl. Morbi id quam sapien, sed vestibulum sem. Duis elementum rutrum mauris sed convallis. Proin vestibulum magna mi. Aenean tristique hendrerit magna, ac facilisis nulla hendrerit ut. Sed non tortor sodales quam auctor elementum. Donec hendrerit nunc eget elit pharetra pulvinar. Suspendisse id tempus tortor. Aenean luctus, elit commodo laoreet commodo, justo nisi consequat massa, sed vulputate quam urna quis eros. Donec vel.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor. Pellentesque auctor nisi id magna consequat sagittis. Curabitur dapibus enim sit amet elit pharetra tincidunt feugiat nisl imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed odio eros. Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem facilisis semper ac in est.</p>
<p>Vivamus fermentum semper porta. Nunc diam velit, adipiscing ut tristique vitae, sagittis vel odio. Maecenas convallis ullamcorper ultricies. Curabitur ornare, ligula semper consectetur sagittis, nisi diam iaculis velit, id fringilla sem nunc vel mi. Nam dictum, odio nec pretium volutpat, arcu ante placerat erat, non tristique elit urna et turpis. Quisque mi metus, ornare sit amet fermentum et, tincidunt et orci. Fusce eget orci a orci congue vestibulum. Ut dolor diam, elementum et vestibulum eu, porttitor vel elit. Curabitur venenatis pulvinar tellus gravida ornare. Sed et erat faucibus nunc euismod ultricies ut id justo. Nullam cursus suscipit nisi, et ultrices justo sodales nec. Fusce venenatis facilisis lectus ac semper. Aliquam at massa ipsum. Quisque bibendum purus convallis nulla ultrices ultricies. Nullam aliquam, mi eu aliquam tincidunt, purus velit laoreet tortor, viverra pretium nisi quam vitae mi. Fusce vel volutpat elit. Nam sagittis nisi dui.</p>
<p>Suspendisse lectus leo, consectetur in tempor sit amet, placerat quis neque. Etiam luctus porttitor lorem, sed suscipit est rutrum non. Curabitur lobortis nisl a enim congue semper. Aenean commodo ultrices imperdiet. Vestibulum ut justo vel sapien venenatis tincidunt. Phasellus eget dolor sit amet ipsum dapibus condimentum vitae quis lectus. Aliquam ut massa in turpis dapibus convallis. Praesent elit lacus, vestibulum at malesuada et, ornare et est. Ut augue nunc, sodales ut euismod non, adipiscing vitae orci. Mauris ut placerat justo. Mauris in ultricies enim. Quisque nec est eleifend nulla ultrices egestas quis ut quam. Donec sollicitudin lectus a mauris pulvinar id aliquam urna cursus. Cras quis ligula sem, vel elementum mi. Phasellus non ullamcorper urna.</p>
<p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In euismod ultrices facilisis. Vestibulum porta sapien adipiscing augue congue id pretium lectus molestie. Proin quis dictum nisl. Morbi id quam sapien, sed vestibulum sem. Duis elementum rutrum mauris sed convallis. Proin vestibulum magna mi. Aenean tristique hendrerit magna, ac facilisis nulla hendrerit ut. Sed non tortor sodales quam auctor elementum. Donec hendrerit nunc eget elit pharetra pulvinar. Suspendisse id tempus tortor. Aenean luctus, elit commodo laoreet commodo, justo nisi consequat massa, sed vulputate quam urna quis eros. Donec vel.</p>
</main>
<footer>Footer</footer>
</div>
To achieve your first point you can use sticky positioning, but note it's not widely supported yet.
To achieve the other ones you can use flexbox magic.
html {
height: 100%; /* Fill all screen */
display: flex; /* Magic begins */
}
body {
flex-grow: 1; /* Grow to fill available space */
display: flex; /* More magic */
flex-direction: column; /* Column layout */
}
header {
position: sticky; /* Stick it... */
top: 0; /* ... at the top */
}
main {
flex-grow: 1; /* Grow to fill available space */
}
Example with small content:
html {
height: 100%; /* Fill all screen */
display: flex; /* Magic begins */
}
body {
flex-grow: 1; /* Grow to fill available space */
display: flex; /* More magic */
flex-direction: column; /* Column layout */
}
header {
position: sticky; /* Stick it... */
top: 0; /* ... at the top */
background: #fff;
}
main {
flex-grow: 1; /* Grow to fill available space */
}
body > * {
border: 1px solid;
}
<header>Header</header>
<main>Main</main>
<footer>Footer</footer>
Example with big content:
html {
height: 100%; /* Fill all screen */
display: flex; /* Magic begins */
}
body {
flex-grow: 1; /* Grow to fill available space */
display: flex; /* More magic */
flex-direction: column; /* Column layout */
}
header {
position: sticky; /* Stick it... */
top: 0; /* ... at the top */
background: #fff;
}
main {
flex-grow: 1; /* Grow to fill available space */
}
body > * {
border: 1px solid;
}
<header>Header</header>
<main>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor. Pellentesque auctor nisi id magna consequat sagittis. Curabitur dapibus enim sit amet elit pharetra tincidunt feugiat nisl imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed odio eros. Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem facilisis semper ac in est.</p>
<p>Vivamus fermentum semper porta. Nunc diam velit, adipiscing ut tristique vitae, sagittis vel odio. Maecenas convallis ullamcorper ultricies. Curabitur ornare, ligula semper consectetur sagittis, nisi diam iaculis velit, id fringilla sem nunc vel mi. Nam dictum, odio nec pretium volutpat, arcu ante placerat erat, non tristique elit urna et turpis. Quisque mi metus, ornare sit amet fermentum et, tincidunt et orci. Fusce eget orci a orci congue vestibulum. Ut dolor diam, elementum et vestibulum eu, porttitor vel elit. Curabitur venenatis pulvinar tellus gravida ornare. Sed et erat faucibus nunc euismod ultricies ut id justo. Nullam cursus suscipit nisi, et ultrices justo sodales nec. Fusce venenatis facilisis lectus ac semper. Aliquam at massa ipsum. Quisque bibendum purus convallis nulla ultrices ultricies. Nullam aliquam, mi eu aliquam tincidunt, purus velit laoreet tortor, viverra pretium nisi quam vitae mi. Fusce vel volutpat elit. Nam sagittis nisi dui.</p>
<p>Suspendisse lectus leo, consectetur in tempor sit amet, placerat quis neque. Etiam luctus porttitor lorem, sed suscipit est rutrum non. Curabitur lobortis nisl a enim congue semper. Aenean commodo ultrices imperdiet. Vestibulum ut justo vel sapien venenatis tincidunt. Phasellus eget dolor sit amet ipsum dapibus condimentum vitae quis lectus. Aliquam ut massa in turpis dapibus convallis. Praesent elit lacus, vestibulum at malesuada et, ornare et est. Ut augue nunc, sodales ut euismod non, adipiscing vitae orci. Mauris ut placerat justo. Mauris in ultricies enim. Quisque nec est eleifend nulla ultrices egestas quis ut quam. Donec sollicitudin lectus a mauris pulvinar id aliquam urna cursus. Cras quis ligula sem, vel elementum mi. Phasellus non ullamcorper urna.</p>
<p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In euismod ultrices facilisis. Vestibulum porta sapien adipiscing augue congue id pretium lectus molestie. Proin quis dictum nisl. Morbi id quam sapien, sed vestibulum sem. Duis elementum rutrum mauris sed convallis. Proin vestibulum magna mi. Aenean tristique hendrerit magna, ac facilisis nulla hendrerit ut. Sed non tortor sodales quam auctor elementum. Donec hendrerit nunc eget elit pharetra pulvinar. Suspendisse id tempus tortor. Aenean luctus, elit commodo laoreet commodo, justo nisi consequat massa, sed vulputate quam urna quis eros. Donec vel.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor. Pellentesque auctor nisi id magna consequat sagittis. Curabitur dapibus enim sit amet elit pharetra tincidunt feugiat nisl imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed odio eros. Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem facilisis semper ac in est.</p>
<p>Vivamus fermentum semper porta. Nunc diam velit, adipiscing ut tristique vitae, sagittis vel odio. Maecenas convallis ullamcorper ultricies. Curabitur ornare, ligula semper consectetur sagittis, nisi diam iaculis velit, id fringilla sem nunc vel mi. Nam dictum, odio nec pretium volutpat, arcu ante placerat erat, non tristique elit urna et turpis. Quisque mi metus, ornare sit amet fermentum et, tincidunt et orci. Fusce eget orci a orci congue vestibulum. Ut dolor diam, elementum et vestibulum eu, porttitor vel elit. Curabitur venenatis pulvinar tellus gravida ornare. Sed et erat faucibus nunc euismod ultricies ut id justo. Nullam cursus suscipit nisi, et ultrices justo sodales nec. Fusce venenatis facilisis lectus ac semper. Aliquam at massa ipsum. Quisque bibendum purus convallis nulla ultrices ultricies. Nullam aliquam, mi eu aliquam tincidunt, purus velit laoreet tortor, viverra pretium nisi quam vitae mi. Fusce vel volutpat elit. Nam sagittis nisi dui.</p>
<p>Suspendisse lectus leo, consectetur in tempor sit amet, placerat quis neque. Etiam luctus porttitor lorem, sed suscipit est rutrum non. Curabitur lobortis nisl a enim congue semper. Aenean commodo ultrices imperdiet. Vestibulum ut justo vel sapien venenatis tincidunt. Phasellus eget dolor sit amet ipsum dapibus condimentum vitae quis lectus. Aliquam ut massa in turpis dapibus convallis. Praesent elit lacus, vestibulum at malesuada et, ornare et est. Ut augue nunc, sodales ut euismod non, adipiscing vitae orci. Mauris ut placerat justo. Mauris in ultricies enim. Quisque nec est eleifend nulla ultrices egestas quis ut quam. Donec sollicitudin lectus a mauris pulvinar id aliquam urna cursus. Cras quis ligula sem, vel elementum mi. Phasellus non ullamcorper urna.</p>
<p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In euismod ultrices facilisis. Vestibulum porta sapien adipiscing augue congue id pretium lectus molestie. Proin quis dictum nisl. Morbi id quam sapien, sed vestibulum sem. Duis elementum rutrum mauris sed convallis. Proin vestibulum magna mi. Aenean tristique hendrerit magna, ac facilisis nulla hendrerit ut. Sed non tortor sodales quam auctor elementum. Donec hendrerit nunc eget elit pharetra pulvinar. Suspendisse id tempus tortor. Aenean luctus, elit commodo laoreet commodo, justo nisi consequat massa, sed vulputate quam urna quis eros. Donec vel.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor. Pellentesque auctor nisi id magna consequat sagittis. Curabitur dapibus enim sit amet elit pharetra tincidunt feugiat nisl imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed odio eros. Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem facilisis semper ac in est.</p>
<p>Vivamus fermentum semper porta. Nunc diam velit, adipiscing ut tristique vitae, sagittis vel odio. Maecenas convallis ullamcorper ultricies. Curabitur ornare, ligula semper consectetur sagittis, nisi diam iaculis velit, id fringilla sem nunc vel mi. Nam dictum, odio nec pretium volutpat, arcu ante placerat erat, non tristique elit urna et turpis. Quisque mi metus, ornare sit amet fermentum et, tincidunt et orci. Fusce eget orci a orci congue vestibulum. Ut dolor diam, elementum et vestibulum eu, porttitor vel elit. Curabitur venenatis pulvinar tellus gravida ornare. Sed et erat faucibus nunc euismod ultricies ut id justo. Nullam cursus suscipit nisi, et ultrices justo sodales nec. Fusce venenatis facilisis lectus ac semper. Aliquam at massa ipsum. Quisque bibendum purus convallis nulla ultrices ultricies. Nullam aliquam, mi eu aliquam tincidunt, purus velit laoreet tortor, viverra pretium nisi quam vitae mi. Fusce vel volutpat elit. Nam sagittis nisi dui.</p>
<p>Suspendisse lectus leo, consectetur in tempor sit amet, placerat quis neque. Etiam luctus porttitor lorem, sed suscipit est rutrum non. Curabitur lobortis nisl a enim congue semper. Aenean commodo ultrices imperdiet. Vestibulum ut justo vel sapien venenatis tincidunt. Phasellus eget dolor sit amet ipsum dapibus condimentum vitae quis lectus. Aliquam ut massa in turpis dapibus convallis. Praesent elit lacus, vestibulum at malesuada et, ornare et est. Ut augue nunc, sodales ut euismod non, adipiscing vitae orci. Mauris ut placerat justo. Mauris in ultricies enim. Quisque nec est eleifend nulla ultrices egestas quis ut quam. Donec sollicitudin lectus a mauris pulvinar id aliquam urna cursus. Cras quis ligula sem, vel elementum mi. Phasellus non ullamcorper urna.</p>
<p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In euismod ultrices facilisis. Vestibulum porta sapien adipiscing augue congue id pretium lectus molestie. Proin quis dictum nisl. Morbi id quam sapien, sed vestibulum sem. Duis elementum rutrum mauris sed convallis. Proin vestibulum magna mi. Aenean tristique hendrerit magna, ac facilisis nulla hendrerit ut. Sed non tortor sodales quam auctor elementum. Donec hendrerit nunc eget elit pharetra pulvinar. Suspendisse id tempus tortor. Aenean luctus, elit commodo laoreet commodo, justo nisi consequat massa, sed vulputate quam urna quis eros. Donec vel.</p>
</main>
<footer>Footer</footer>
What I want to do is to create two fixed navigation elements (each on the opposite side of the page). I did that, but the problem is; it is not responsive. When I zoom-in or zoom-out, elements mix together.
How can I fix it? Here is the code I have tried so far:
.docTheme {
margin-top: 20px;
padding-left: 0;
margin-left: 10px;
}
.leftNav { /* add rounded corner */
position: fixed;
}
.rightNav {
position: fixed;
right: 0;
}
.mainContent {
display: block;
margin-left: 320px;
width: 65%;
}
<!-- Content -->
<div class="container-fluid docTheme" role="main">
<div class="row">
<div class="col-sm-3 leftNav">
<div class="list-group">
<a href="#" class="list-group-item active">
Cras justo odio
</a>
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulum at eros
</div>
</div>
<div class="col-sm-7 mainContent">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eu ante molestie dui vehicula finibus ac eget ante. Aliquam lacus mi, lobortis eget aliquet vitae, ultrices et metus. Praesent quis aliquet turpis. Nam elementum lacinia purus vel consequat. Nullam at est ante. Vestibulum quis mauris ac sem facilisis egestas. Proin in posuere nunc. In elit justo, cursus eget eleifend a, sagittis ac quam. Quisque quis justo accumsan, commodo nulla nec, tempor nulla. Ut tristique imperdiet enim sed pretium. Vestibulum sit amet bibendum turpis. Nam mollis commodo elit, vitae egestas nisi. Nam ligula elit, gravida quis feugiat vel, congue at tellus. Cras efficitur consectetur enim non porta. Pellentesque ut luctus dolo
Nam feugiat purus eu velit condimentum rhoncus. Proin pulvinar volutpat diam, id porta erat pharetra at. Mauris hendrerit nulla enim, et tempus urna placerat vitae. Integer ut ipsum tincidunt, sodales quam vitae, varius massa. Sed rhoncus arcu mi, in faucibus risus dictum vel. Cras id sollicitudin magna, quis tempor mi. In ultrices gravida quam, in scelerisque diam volutpat ac. Duis hendrerit tempus dui, viverra euismod purus mattis eu.
Aenean et mi in nisi pellentesque porttitor pellentesque nec felis. In hac habitasse platea dictumst. Integer euismod mollis metus, nec fermentum ligula suscipit id. Nunc vitae gravida magna. Sed ut urna nunc. Fusce eget fringilla nulla, sed congue odio. Cras bibendum nisi est, quis scelerisque nisl laoreet non. Curabitur mi nibh, hendrerit eu dolor sit amet, egestas convallis nibh. Nam ultricies elit ut tincidunt congue. Aliquam ac dui vel arcu condimentum pharetra. Phasellus porta, sem sed tempus aliquam, urna nisl posuere sem, non auctor nibh risus faucibus turpis. Integer sit amet cursus lectus. Nam hendrerit, nisl sed fringilla volutpat, leo neque fringilla magna, a maximus metus mauris nec urna. Duis nulla dui, dignissim at felis id, tristique laoreet nibh. Pellentesque convallis neque a purus convallis lobortis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eu ante molestie dui vehicula finibus ac eget ante. Aliquam lacus mi, lobortis eget aliquet vitae, ultrices et metus. Praesent quis aliquet turpis. Nam elementum lacinia purus vel consequat. Nullam at est ante. Vestibulum quis mauris ac sem facilisis egestas. Proin in posuere nunc. In elit justo, cursus eget eleifend a, sagittis ac quam. Quisque quis justo accumsan, commodo nulla nec, tempor nulla. Ut tristique imperdiet enim sed pretium. Vestibulum sit amet bibendum turpis. Nam mollis commodo elit, vitae egestas nisi. Nam ligula elit, gravida quis feugiat vel, congue at tellus. Cras efficitur consectetur enim non porta. Pellentesque ut luctus dolor.
</div>
<div class="col-sm-2 rightNav">
<div class="list-group">
<a href="#" class="list-group-item active">
Cras justo odio
</a>
In this chapter
In this chapter
In this chapter
In this chapterros
</div>
</div>
</div>
</div> <!-- /container -->
Thanks.
I think you need one like this
.docTheme {
margin-top: 20px;
padding-left: 0;
margin-left: 10px;
}
.leftNav {
/* add rounded corner */
position: fixed;
top: 0;
left: 0;
width: 33%;
}
.rightNav {
position: fixed;
right: 0;
top: 0;
width: 33%;
}
.mainContent {
display: block;
margin-left: 33%;
width: 33%;
}
<!-- Content -->
<div class="container-fluid docTheme" role="main">
<div class="row">
<div class="col-sm-3 leftNav">
<div class="list-group">
<a href="#" class="list-group-item active">
Cras justo odio
</a>
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulum at eros
</div>
</div>
<div class="col-sm-7 mainContent">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eu ante molestie dui vehicula finibus ac eget ante. Aliquam lacus mi, lobortis eget aliquet vitae, ultrices et metus. Praesent quis aliquet turpis. Nam elementum lacinia purus vel consequat.
Nullam at est ante. Vestibulum quis mauris ac sem facilisis egestas. Proin in posuere nunc. In elit justo, cursus eget eleifend a, sagittis ac quam. Quisque quis justo accumsan, commodo nulla nec, tempor nulla. Ut tristique imperdiet enim sed pretium.
Vestibulum sit amet bibendum turpis. Nam mollis commodo elit, vitae egestas nisi. Nam ligula elit, gravida quis feugiat vel, congue at tellus. Cras efficitur consectetur enim non porta. Pellentesque ut luctus dolo Nam feugiat purus eu velit condimentum
rhoncus. Proin pulvinar volutpat diam, id porta erat pharetra at. Mauris hendrerit nulla enim, et tempus urna placerat vitae. Integer ut ipsum tincidunt, sodales quam vitae, varius massa. Sed rhoncus arcu mi, in faucibus risus dictum vel. Cras id
sollicitudin magna, quis tempor mi. In ultrices gravida quam, in scelerisque diam volutpat ac. Duis hendrerit tempus dui, viverra euismod purus mattis eu. Aenean et mi in nisi pellentesque porttitor pellentesque nec felis. In hac habitasse platea
dictumst. Integer euismod mollis metus, nec fermentum ligula suscipit id. Nunc vitae gravida magna. Sed ut urna nunc. Fusce eget fringilla nulla, sed congue odio. Cras bibendum nisi est, quis scelerisque nisl laoreet non. Curabitur mi nibh, hendrerit
eu dolor sit amet, egestas convallis nibh. Nam ultricies elit ut tincidunt congue. Aliquam ac dui vel arcu condimentum pharetra. Phasellus porta, sem sed tempus aliquam, urna nisl posuere sem, non auctor nibh risus faucibus turpis. Integer sit amet
cursus lectus. Nam hendrerit, nisl sed fringilla volutpat, leo neque fringilla magna, a maximus metus mauris nec urna. Duis nulla dui, dignissim at felis id, tristique laoreet nibh. Pellentesque convallis neque a purus convallis lobortis. Lorem
ipsum dolor sit amet, consectetur adipiscing elit. Nunc eu ante molestie dui vehicula finibus ac eget ante. Aliquam lacus mi, lobortis eget aliquet vitae, ultrices et metus. Praesent quis aliquet turpis. Nam elementum lacinia purus vel consequat.
Nullam at est ante. Vestibulum quis mauris ac sem facilisis egestas. Proin in posuere nunc. In elit justo, cursus eget eleifend a, sagittis ac quam. Quisque quis justo accumsan, commodo nulla nec, tempor nulla. Ut tristique imperdiet enim sed pretium.
Vestibulum sit amet bibendum turpis. Nam mollis commodo elit, vitae egestas nisi. Nam ligula elit, gravida quis feugiat vel, congue at tellus. Cras efficitur consectetur enim non porta. Pellentesque ut luctus dolor.
</div>
<div class="col-sm-2 rightNav">
<div class="list-group">
<a href="#" class="list-group-item active">
Cras justo odio
</a>
In this chapter
In this chapter
In this chapter
In this chapterros
</div>
</div>
</div>
</div>
<!-- /container -->