Whenever I set my navbar to fixed and my header height is 100vh, my header seems to be under the navbar. How can I make the navbar not cover my header and make header 100vh
.nav {
height: 80px;
position: fixed;
top: 0;
left: 0;
width: 100%;
background: red;
}
.hero {
background: blue;
height: 100vh;
margin-top: 80px;
}
* {
margin: 0;
}
<div class="nav">
</div>
<div class="hero">
</div>
Use position: sticky instead of position: fixed. This way your main container will always be 100vh.
In css I made edits.
* {
margin: 0;
}
.nav {
height: 80px;
position: sticky;
top: 0;
/*left: 0;*/
width: 100%;
background: red;
}
.hero {
background: blue;
min-height: 100vh;
/*margin-top: 80px;*/
}
<div class="nav">
</div>
<div class="hero">
</div>
Try setting the nav to position:sticky; instead
example: https://jsfiddle.net/sq5ae3u1/
Related
I am trying to stretch a sticky element to size of the screen. I have the following HTML
.large {
height: 200vw;
width: 200vw;
}
.header {
left: 0;
top: 0;
color:white;
position: sticky;
width: 100px;
height: 100px;
background: black;
}
<div class="header">Header</div>
<div class="large">Content</div>
The problem is that this works but the element is not stretched. If I change width:100px to width:100vw the sticky to the left breaks. So it seems like I cannot specify relative width and use sticky to the left at the same time?
You can achieve this by adding a div around both elements and giving that div a display: inline-block;:
.container {
display: inline-block;
}
.large {
height: 200vw;
width: 200vw;
}
.header {
left: 0;
top: 0;
position: sticky;
width: 100vw;
height: 100px;
background: black;
}
<div class="container">
<div class="header"></div>
<div class="large"></div>
</div>
I would like to create footer effect just like on this site. I think I need a wrapper for my content and then add footer.
So structure would be like:
<div class="content"></div>
<div class="footer">
<div class="footer-content">
</div>
</div>
And CSS like:
.footer{
width: 100%;
}
.footer-content{
position: fixed;
bottom: 0;
width: 100%;
z-index: 0;
}
.content{
z-index: 9999 !important;
background-color: #fff;
position: relative;
margin-bottom: 600px; //height of my full footer
}
However this doesn't make this effect. Please help and sorry for my english.
To achieve this you'll need to make the footer fixed and have the content scroll above it.
A rough example of the CSS would be:
.content {
position: relative; /* required for z-index to work */
z-index: 2; /* bring above footer */
margin-bottom: 100px; /* the height of the footer */
}
.footer {
position: fixed; /* fix in position */
z-index: 1; /* bring below content */
bottom: 0; /* anchor to bottom of screen */
left: 0; /* go full width */
width: 100%; /* go full width */
}
please check this code
HTML
<div class="content">
<h1>Content</h1>
</div>
<div class="footer">
<div class="footer-content">
<h1>Footer</h1>
</div>
</div>
CSS
.footer{
width: 100%;
height: 1px;
display: block;
}
.footer-content{
bottom: 0;
display: block;
position: fixed;
width: 100%;
z-index: 0;
background: #f1f1f1;
}
.content{
z-index: 9999 !important;
background-color: #fff;
display: block;
position: relative;
width: 100%;
height: 1500px;
margin-bottom: 600px;
margin-top: -30px;
}
A sample
Fixed footer effect in CSS
I have two independently scrolling divs, one with a header and footer.
<body>
<div class="container col-1">
Many listings
</div>
<div class="container col-2">
<div class="header">Fixed Header</div>
<div class="content">Lots of content</div>
<div class="footer">Fixed footer</div>
</div>
</body>
See this fiddle: https://jsfiddle.net/bhmvv05n/
The problem is, I'd like the second container div to have a fixed header and footer that are always visible and have only the content scrollable.
As soon as I change the scrolling of the col-2 div, the two columns don't scroll independently anymore.
Any advice?
Thanks!
This will adjust to whatever width you have for your columns.
The idea is that you only make .col-2.content scrollable, not the whole .container.
* {
box-sizing: border-box;
}
html, body {
margin: 0;
height: 100%;
}
.container {
height: 100%;
}
.col-1{
float: left;
width: 33%;
overflow: auto;
}
.col-2{
float: left;
width: 67%;
position: relative;
}
.col-2 .content {
position: absolute;
left: 0; right: 0;
top: 20px; /* header height */
bottom: 20px; /* footer height */
overflow: auto;
}
.header, .footer {
height: 20px;
background-color: red;
position: absolute;
left: 0; right: 0;
}
.header {
top: 0;
}
.footer {
bottom: 0;
}
Could something like this work for you?
https://jsfiddle.net/vz7eb8uc/
Code changed;
.col-1{
float: left;
width: 33%;
position: relative;
}
.col-2{
float: left;
width: 67%;
position: relative;
}
.header, .footer {
height: 20px;
background-color: red;
position: fixed;
left: 33%;
width:67%
}
In this code I have a sticky footer and a content section above, but why height:100% doesn't work for content section?
html {
position: relative;
min-height: 100%;
}
body {
margin-bottom: 60px;
height: 100%;
}
.content {
background-color: #116655;
height: 100%;
}
.footer {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 60px;
background-color: #ffcc44;
}
<div class="content">
<div>content</div>
</div>
<footer class="footer">
My footer
</footer>
You need to set an actual height on the html
html {
position: relative;
height: 100%; /* not min-height */
}
JsFiddle Demo
Use position: absolute on the content as well, then use top: 0 and bottom: 60px this will make the content take up the remaining space. then use overflow: auto; to allow scrolling the content;
(Demo)
.content {
position: absolute;
top: 0;
bottom: 60px;
background-color: red;
overflow: auto;
}
My simple layout contains header, main section and footer. Footer pushed to bottom of a page. And I want main section to take all the space between header and footer. Here is what I've done: http://jsfiddle.net/5d3m9/
HTML
<div class="wrap">
<header>header</header>
<div class="main">lorem2000 </div>
<div class="clear"></div>
<footer>#Copyright</footer>
</div>
CSS
html, body {
height: 100%;
}
body {
margin: 0;
}
header {
height: 150px;
background: orange;
}
.wrap {
min-height: 100%;
position: relative;
overflow: hidden;
}
.main {
background: #00eaea;
padding-bottom: 32767px;
margin-bottom: -32767px;
}
.clear {
height: 50px;
}
footer {
background: #dadada;
height: 50px;
width: 100%;
position: absolute;
bottom: 0;
}
Is there any other/better way to achieve this? (without padding-bottom: 32767px; margin-bottom: -32767px;)
Apply the following style to .main
.main {
background: #00eaea;
top: 150px;
bottom: 50px;
position:absolute;
width: 100%;
}
http://jsfiddle.net/5d3m9/1/