Hoping someone can help with this. Have a menu bar that is set to position:sticky. It starts at 50px from the top on page load. When the document is scrolled, the menu bar sticks at the top of the page, as expected, until it "hits" another element further down the page, at which point it's scrolled above the top of the viewport, along with everything else.
Originally, I thought it was "running" into flex item(s) or something that had position:relative. That's not the case.
Has anyone come across this? I'd provide a code sample, but I'm not entirely sure what is causing the issue.
MDN: Sticky positioning can be thought of as a hybrid of relative and fixed positioning. A stickily positioned element is treated as relatively positioned until it crosses a specified threshold, at which point it is treated as fixed until it reaches the boundary of its parent.
Note that sticky, by specification, will not work inside element with overflow: hidden or auto
Use this link: https://developer.mozilla.org/en-US/docs/Web/CSS/position
Example:
The sticky button always moves till its parent div's edges.
section {
height: 200vh;
display: flex;
}
section nav {
background: wheat;
width: 30vw;
display: flex;
}
section nav button.btn {
background: #9b59b6;
border: 0px;
color: white;
flex: 1;
max-height: 50px;
padding: 1rem;
position: sticky;
top: 0px;
}
section div {
width: 100%;
background: pink;
}
header, footer {
text-align:center;
background: #2c3e50;
color:white;
}
header{
padding:1rem;
}
footer{
height:100vh;
}
<header>Scroll the page to see the sticky effect.</header>
<section>
<nav>
<button class="btn">Sticky Button</button>
</nav>
<div>
<article>Hello!</article>
</div>
</section>
<footer>Footer</footer>
Related
In CSS, position: sticky enables an element to display with a position: static behaviour (ie. it adopts its default position within the document flow) until it reaches a certain scroll position, after which it adopts position: fixed behaviour.
So... does that mean we cannot use position: sticky on an element which requires a normal behaviour of position: absolute?
Context:
I have an out-of-flow element which occupies a position towards the top-left corner of the viewport. After an inch or two of scrolling, the element hits the top of the viewport and, ideally, I'd like it not to carry on disappearing at that point.
You actually can leverage display: grid and have a sticky element that doesn't pushes its siblings:
header {
display: flex;
align-items: center;
justify-content: center;
height: 50vh;
border: 1px dashed #f00;
}
main {
display: grid;
}
div {
display: flex;
align-items: center;
justify-content: center;
}
.section {
grid-column: 1;
height: 100vh;
border: 1px dashed #0f0;
}
.first.section {
grid-row: 1;
}
.sticky {
grid-row: 1;
grid-column: 1;
position: sticky;
top: 0;
height: 30vh;
border: 1px dashed #0ff;
}
footer {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
border: 1px dashed #f00;
}
<header>I'm the header</header>
<main>
<div class="sticky">I'm sticky</div>
<div class="first section">Just</div>
<div class="section">some</div>
<div class="section">sections</div>
</main>
<footer>I'm the footer</footer>
The trick here is to place the sticky section and its first sibling on the first row and first column of their parent (because grids allow us to place many elements in the same cell).
The sticky element remains sticky in its parent so it will stay on scroll beyond its cell.
As GibboK says, the default positioning scheme isn't absolute positioning, it's the static position. Elements are laid out in normal flow by default — if out-of-flow were the default, then the default HTML page would be impossible to read. Besides, absolutely positioned elements do scroll with the page most of the time — the only time you can make an absolutely positioned behave like a fixed positioned element with respect to page scrolling is through some semi-complicated CSS.
If you're asking whether it's possible for
a stickily positioned element to be out-of-flow when stuck and unstuck, or
for the containing block of a stickily positioned element to be determined the same way as for an absolutely positioned element,
then unfortunately neither of these is supported by sticky positioning.
The point of position:sticky is that it is only fixed while the parent element is not in view. A position:absolute element isn't attached to it's parent.
It could be interesting if such a position would exist and the rule would be that the element would be absolute, while the element it is absolute positioned to is in view, but currently there exists nothing like this nativley, but you could try to recreate it using JS.
A way to make a sticky element look like it's absolutely positioned
I came up with this hack that achieves the goal, but I haven't figured out how to fix its one flaw: There's a blank area at the bottom of the scrollable content equal to the height of the sticky element + its initial vertical offset.
See the comments in the code for an explanation of how it works.
#body {
width: 100%;
position: relative;
background: Linen;
font-family: sans-serif;
font-size: 40px;
}
/* to position your sticky element vertically, use the
height of this empty/invisible block element */
#sticky-y-offset {
z-index: 0;
height: 100px;
}
/* to position your sticky element horizontally, use the
width of this empty/invisible inline-block element */
#sticky-x-offset {
z-index: 0;
width: 100px;
display: inline-block;
}
/* this element is sticky so must have a static position,
but we can fake an absolute position relative to the
upper left of its container by resizing the invisible
blocks above and to the left of it. */
#sticky-item {
width: 150px;
height: 100px;
border-radius: 10px;
background-color: rgba(0, 0, 255, 0.3);
display: inline-block;
position: sticky;
top: -80px;
bottom: -80px;
}
/* this div will contain the non-sticky main content of
the container. We translate it vertically upward by
sticky-y-offset's height + sticky-item's height */
#not-sticky {
width: 100%;
background-color: rgba(0, 0, 255, 0.1);
transform: translateY(-200px);
}
.in-flow {
width: 90%;
height: 150px;
border-radius: 10px;
margin: 10px auto;
padding: 10px 10px;
background: green;
opacity: 30%;
}
<div id="body">
<div id="sticky-y-offset"></div>
<div id="sticky-x-offset"></div>
<div id="sticky-item">absolute & sticky</div>
<div id="not-sticky">
<div class="in-flow">in flow</div>
<div class="in-flow">in flow</div>
<div class="in-flow">in flow</div>
<div class="in-flow">in flow</div>
</div>
</div>
I have a lot of space under the footer, and this is something that I would really like to get rid of. For some reason, this space only appears in Google Chrome and not in Firefox.
Heres an image showing it.
http://puu.sh/a6XQI/ec07f0ba31.jpg
What I would like to have happen is my content resize according to the screen size. I am not sure if I can do that because I dont have much content, just a few images.
Any suggestions would be appreciated.
Since you didn't provide any code, I would assume this has to do with the height of you page content being shorther than your window height. Many people who come from a print design background are often perplexed by the concept that a footer doesn't automatically appear at the bottom of a page. The position of dynamically sized elements depends on their content, which as you may come to find out, is very frustrating when a client wants a website built BEFORE providing any content. But I digress.
Assuming the root problem is caused by my former assumption, to achieve what is known as a sticky footer, implement the following to your existing page structions:
jsFiddle: http://jsfiddle.net/63mp6/
HTML
<div class="primary">
<div class="header">
Header Content
</div>
<div class="content">
Main body Content
</div>
<div class="footer">
Footer content
</div>
</div>
CSS
*{
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
html, body {
position: relative;
width: 100%;
height: 100%;
background: #eee;
}
.primary {
position: relative;
width: 80%;
height: 100%;
margin: 0 auto;
}
.header{
min-height: 100px;
min-width: 100%;
background: #aaa;
}
.content {
min-width: 100%;
min-height: 200px;
background: #fff;
}
.footer {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
min-height: 100px;
background: #666;
}
What's happening here is you're resetting default styling to the parent containers, forcing them to 100% height of the window and then telling the footer position about of the default page flow to the bottom of it's parent container. Notice the position: relative; attributes on the primary and html, body definitions. Those set the tone for their child elements to be relative to them instead of the window. Without the position declarations, the child elements would position themselves to the highest element with a relative position, which would be the window itself.
In the following fiddle:
http://jsfiddle.net/6qF7Q/1/
I have a yellow content area that has a min-height set to 100% - it's the background div to all pages and should take up at least 100% of the available height. If there's overflow, it expands vertically.
Then, within that yellow container, I have another child div (red) that I would like to take up as much vertical space as its parent. It seems I can't set height because the parent element only has min-height, and setting min-height on the red element doesn't work either.
So right now, the yellow is behaving as I'd like, but the red is not expanding. How can this be achieved with CSS only?
CSS:
.browser {
background-color: blue;
height: 600px;
width: 200px;
position: relative;
}
.innercontent {
min-height: 100%;
background-color: red;
width: 100%;
color: white;
padding: 2px;
}
.content {
background-color: yellow;
width: 100%;
min-height: calc(100% - 30px);
}
.footer {
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
background-color: orange;
height: 20px;
}
HTML:
<div class="browser">
<div class="content">
<div class="innercontent">
This is the problem - I need this to take up 100% of the remaining yellow space, without setting the parent element's 'height' - only min-height is specified in the parent because I need to make sure that it takes up 100% of the height at least, but allow it to extend vertically if there's any overflow.
</div>
should not see any yellow
</div>
<div class="footer"></div>
</div>
Take a look at this
I added this
*{
box-sizing: border-box;
}
html, body {
/* Make the body to be as tall as browser window */
height: 100%;
}
and changed some attributes u can see at fiddle
If thats what you want you should read this article
http://css-tricks.com/a-couple-of-use-cases-for-calc/
I made that based in this use-cases
I think this might solve your issue?
I have changed the innercontent to position: absolute
http://jsfiddle.net/6qF7Q/7/
If you have text in the yellow section it will always show.
Also, you're going to have to do a bit of fiddling to get your footer positioned correctly since you are going to have an overflowing absolute element. I think a full body position: relative wrapper will solve it.
P.S I don't see why you would need a .content AND a .innercontent if you don't want the .content to show?
This works much better and doesn't give you footer grief: http://jsfiddle.net/6qF7Q/9/
I'm having some issues with creating this effect with CSS:
http://i.stack.imgur.com/sMBmg.jpg
Basically, I want my content div to float on top and slightly overlap both the header and the footer elements. I've played around with some absolute positioning but I'm not sure if that's the best way to go. I want a responsive solution that works for all devices and screen sizes. Any suggestions?
Here is one way you could do it.
If this is your HTML:
<div class="header">Header</div>
<div class="content">Content</div>
<div class="footer">Footer</div>
Apply the following CSS:
.header, .footer {
height: 100px; /* not strictly needed... */
border: 1px solid blue;
}
.content {
width: 50%; /* for example... */
height: 400px;
background-color: yellow;
margin: 0 auto;
border: 1px dotted blue;
}
.header {
margin-bottom: -25px;
}
.footer {
margin-top: -25px;
}
.content {
position: relative;
z-index: 1;
}
You can see the demo at: http://jsfiddle.net/audetwebdesign/CNnay/
You set up three block level elements for the header, content and footer.
Apply negative margins to the bottom of the header and the top of the footer to
create the offset effect.
Finally, apply z-index to .content to tweak the stacking order so that the
content block is painted over the footer block.
In this layout, the content block will expand vertically as you add more content.
The results looks like:
You can try position:fixed or z-index:2000 of your div class
i have created this http://jsfiddle.net/RVnU7/1/
I have a "main-section" div that is set to inherit it's height from its' parent div, which is the "wrapper" div. The wrapper div is set to inherit it's height from its' parent div, which is the body of the document. The html and body tags are set to height: 100%.
So, in order to use the CSS "sticky footer" (found at http://www.cssstickyfooter.com/), I have to set padding-bottom in the "main-section" div equal to the height of the "footer" div (which has to be outside of the wrapper div). Then, the footer div must be given a negative margin-top value equal to the height of the footer as well.
All of this is working in keeping the footer at the bottom of the page, but I am trying to extend the height of the main-section 100% to the footer so that the background-color of the main-section is visible down the entirity of the page.
I am close in doing this, except the main-section is now extending beyond the footer, and stretching the window beyond 100% height (when there is not enough content to exceed the page height), and the backgroung-color is then visible beyond the footer, beyond the height of the page (which is not desirable).
It seems that the necessary parameter of padding-bottom in the main-section div is causing this problem, even though the footer is set to clear: both and position: relative (which does keep the footer at the bottom of the page, but the main-section div is still extending below the footer quite a bit). Or maybe the min-height: 100% attribute of the wrapper could be causing a conflict?
Here is the relevant html:
<div id="wrap">
<div id="header">
...
</div> <!-- end of header -->
<div id="main-section">
...
</div> <!-- end of main section -->
</div> <!-- end of wrapper -->
<div id="footer">
...
</div> <!-- end of footer -->
...and here is the relevant CSS:
*
{
margin: 0px;
padding: 0px;
}
html, body
{
height: 100%;
}
body
{
background-color: #bbb;
}
#wrapper
{
/* wrapper 100% of screen */
min-height: 100%;
height: inherit;
width: 950px;
margin-left: auto;
margin-right: auto;
}
#header
{
background-color: #C97;
line-height: auto;
text-align: center;
font-family: "Lucida Console";
font-weight: bold;
font-size: 2.5em;
}
#main-section
{
background-color: #ddd;
height: inherit;
/* for a "sticky" footer */
padding-bottom: 50px; /* equal to the height of the footer */
}
#footer
{
clear: both;
position: relative;
height: 50px;
line-height: 50px;
margin-top: -50px; /* equal to the height of the footer, for a "sticky footer" */
width: 950px; /* equal to width of wrapper */
margin-left: auto;
margin-right: auto;
text-align: center;
background-color: #C97;
}
EDIT: It is important to mention that I am testing this in Firefox.
Here is a reference for you.
LIVE DEMO
Make change in footer
#footer
{
bottom:0px;
width:100%;
height:50px;
position:fixed; // this is the key
height: 50px;
line-height: 50px;
width: 950px;
background-color: #C97;
}
Updated Jsfiidle demo
So, a workaround, that exhibits the same behavior --
Instead of messing with the nested main-section div, I am applying the background-color to the wrapper div itself (and also not applying postion: absolute to the main-section div, but still applying position: fixed to the footer div).
This way, the main-section can contain any amount of content, and it will appear to have a 100% height background-color.