In UIKit V3 I have the following which works fine with the div staying at the top (sticky) during scrolling:
HTML
<div class="uk-card uk-card-default uk-card-body" uk-sticky>Stick to the top</div>
<p>stuff</p>
<p>stuff</p>
<p>stuff</p>
<p>stuff</p>
<!-- [...] -->
JSFiddle of the above
However, if I do the exact same thing within an overflow-y: scroll; div then the div just scrolls with the rest of the content rather than staying sticky:
HTML
<div id="thing" class="inline">
<div class="uk-card uk-card-default uk-card-body" uk-sticky>Stick to the top</div>
<p>stuff</p>
<p>stuff</p>
<p>stuff</p>
<p>stuff</p>
<!-- [...] -->
</div>
CSS
div.inline {
width: 200px;
height: 200px;
border: 1px solid red;
overflow-x: hidden;
overflow-y: scroll;
}
JSFiddle of the above
I have tried using uk-sticky="top: #thing" but it doesn't make any difference.
Any ideas?
The core javascript + all the tests her - without any example of sticky+overflow:
https://getuikit.com/docs/sticky
This is more a GitHub Feature Request. For now add style="position: fixed;" to solve this issue.
Scrollable div content area with fixed header
Related
I was trying to implement sticky footer with zurb foundation 5.5.3 off-canvas menu for hours and I can't figure out what's causing the error.
Sticky footer works: https://codepen.io/marko_avlijas/pen/dWBJVM
When I wrap it in off canvas menu, it doesn't: https://codepen.io/marko_avlijas/pen/vmqpey
This is minimal html and css, so this question doesn't depend on codepen.
HTML
<div class="wrapper">
<div class="content">
<h1>Sticky Footer of Unknown Height (no javascript)</h2>
<button id="button-show">Toggle Content</button>
</div>
<div class="footer">
<h3>Sticky footer</h3>
<p>Footer of variable height</p>
</div>
</div>
CSS
html, body {
height: 100%;
margin: 0;
}
.wrapper {
display: table;
table-layout: fixed;
height: 100%;
width: 100%;
}
.content {
display: table-row;
height: 100%;
/* ...as content is added (won't scroll) */
}
.footer {
display: table-row;
}
Broken HTML
<div class="off-canvas-wrap" data-offcanvas>
<div class="inner-wrap">
<!-- This part is same like before -->
<div class="wrapper">
<div class="content">
<h1>Sticky Footer Broken!!!</h2>
<button id="button-show">Toggle Content</button>
</div>
<div class="footer">
<h3>Sticky footer</h3>
<p>Footer of variable height</p>
</div>
</div>
</div>
</div>
You need to add:
.off-canvas-wrap, .inner-wrap {height:100%;}
When you are using 100% height, the parent needs to have a fixed height... or if still want it 100%, all parents till htmlneeds 100% to make it work.
I am building an app that uses Bootstrap. I want this app to have a footer. The footer needs to "stick" to the bottom. In other words, if the content is larger than the height of the screen, the footer should still be visible, the content goes under it. If the content takes less than the height of the screen, I still need the footer to stick tothe bottom. I tried using the sticky footer. However, that doesn't work. Currently, I am trying the following:
Here's My Plunker
My HTML looks like this:
<div class="footer">
<div class="container text-center">
<button class="btn btn-warning"><span class="glyphicon glyphicon-filter"></span></button>
<button class="btn btn-warning"><span class="glyphicon glyphicon-th"></span></button>
</div>
</div>
How do I build a footer that permanently sticks to the bottom? I'm basically trying to build an "action bar" that is visible only when the site runs on a phone.
Thank you for your help.
use the following code
.footer {
background-color: #f5f5f5;
bottom: 0;
height: 60px;
position: fixed;
width: 100%;
}
you should change the footer position :
.footer {
background-color: #f5f5f5;
bottom: 0;
height: 60px;
position: fixed; /*change it*/
width: 100%;
}
Bootstrap comes with its nav elements ready to roll as a footer.
Simply create your element and add these classed navbar navbar-default navbar-fixed-bottom.
<footer>
<div class="navbar navbar-default navbar-fixed-bottom" id="footer">
<div class="container">
<p>this is your footer that sticks to the bottom</p>
</div>
</div>
</footer>
You can then expand on this by splitting the containing div into blocks with something like
<div class="row">
<div class="row">
<div class="col-xs-8 col-sm-6">
Level 2: .col-xs-8 .col-sm-6
</div>
<div class="col-xs-4 col-sm-6">
Level 2: .col-xs-4 .col-sm-6
</div>
</div>
</div>
the above would go inside the container div
as shown here http://jsfiddle.net/showcaseimagery/5y14pqgv/
I'm trying to get my bootstrap carousel acting as the background in a fixed position. In my actual code I've got it to a full width and height that fills the screen, but it only stays in one place. I added 'position: fixed' to a class on my section containing the carousel so it'd float at the front and I was going to z-index it to behind the rest of my content, but it just completely disappears?
I've replicated the problem in this simplified example:
http://jsfiddle.net/v9FMw/4/
HTML
<div class="fill bg-green">
<div>content section (scroll down)</div>
</div>
<div class="fill bg-white">
<div>content section (further x)</div>
</div>
<div class="fill bg-green fixed-section"> <!-- fixed section declared here -->
<-- carousel code -->
</div>
<div class="fill bg-white">
<div>content section</div>
</div>
CSS:
.fill {
width: 100%;
height: 100%;
position: relative;
}
.fixed-section {
position: fixed; /* controls fixed carousel positioning here */
}
You have to give the container top: 0.
.fixed-section {
position: fixed;
top: 0;
}
Updated Fiddle
I have the below HTML in this fiddle http://jsfiddle.net/v6E9a/ .The issue is that the footer is overlapping with the body.If I change the body position to relative then it all lines up correctly but I need to have absolute there to support some other functionality.
I m really not that good with CSS.Can someone please have a look at the html and tell me how i can line the head body and footer correctly.
<div id="s4-workspace" style="width: 1920px; height: 748px; overflow:scroll">
<div id="s4-bodyContainer" style="position:relative">
<div class="headerSection" style="position:relative ;border : 3px solid red">
<div class="globalHeader">
header
</div>
</div>
<div>
<div id="contentRow" style="position:relative">
<div class="fixedWidthMain" style="position:relative">
<div class="fixedWidthMain" style="position:absolute ;border:3px solid blue">
main data
</div>
</div>
</div>
</div>
</div>
<!--PAGE FOOTER SECTION-->
<div class="pageFooterSection" style="clear: both;position:relative ;border:3px solid green">
footer
</div>
</div>
Absolute take up no space, and that's why the footer is on top. There are many ways to work around this. if your main fx, have a fixed height, you can add that value as a margin-top to your footer.
fixed-main height fx 400px
pageFooterSection gets a margin-top of 400px
Below I have some HTML code. Everything is positioned relative apart from contentRow which is positioned absolutely. This is making the footer stick to where the browser window ends and not where the scroll bar ends.
Is there any way I can make the footer go down to the very bottom where the scroll bar ends.
<div id="s4-workspace" style="width: 1920px; height: 748px; overflow:scroll">
<div id="s4-bodyContainer" style="position:relative">
<div class="headerSection" style="position:relative">
<div class="globalHeader">
</div>
</div>
<div>
<div id="contentRow" style="position:relative">
<div class="fixedWidthMain" style="position:relative">
<div class="fixedWidthMain" style="position:absolute">
</div>
</div>
</div>
</div>
</div>
<!--PAGE FOOTER SECTION-->
<div class="pageFooterSection" style="clear: both;position:relative">
</div>
</div>
Theres a few available flavours of the solution for this but they basically go something like this.
EXAMPLE
html {
position: relative;
min-height: 100%;
}
body {
margin: 0 0 100px; /* bottom = footer height */
}
footer {
position: absolute;
left: 0;
bottom: 0;
height: 100px;
width: 100%;
}
a point to remember is that height of elements in html are always passed through the parent. so if you dont define height 100% on a parent the child won't know either. Good luck and let me know if you have any other issues :)
SOURCE
http://mystrd.at/modern-clean-css-sticky-footer/
If I'm understanding correctly, you could make s4-bodyContainer position:relative so that the contentRow is only positioned absolutely within that container. Then footer would go below the bodyContainer.