I'm looking for a way to make a div sticky to the bottom, like a footer, but inside a bootstrap grid, so not over the whole width.
Bootstrap has an example of a sticky footer, I tried to tweak it to make it work in my case but couldn't.
This is another approach, but also assumes your sticky div is not nested inside another div.
Below is my code, I need to make .app-footer sticky to the bottom over the width of it's parent div.
<div class="row main">
<div class="col-xs-2 col-md-4 col-lg-5">...</div>
<div class="col-xs-8 col-md-4 col-lg-2">
<div class="app"></div>
<div class="app-footer"></div>
</div>
<div class="col-xs-2 col-md-4 col-lg-5">...</div>
</div>
Edit: the CSS I've tried but doesn't work:
html,
body {
height: 100%;
}
/* Wrapper for page content to push down footer */
.app {
min-height: 100%;
height: auto;
/* Negative indent footer by its height */
margin: 0 auto -60px;
/* Pad bottom by footer height */
padding: 0 0 60px;
}
/* Set the fixed height of the footer here */
.app-footer {
height: 60px;
background-color: #f5f5f5;
}
Edit: Ok, got it. The solution seems to be to add {position: relative; height: 100%} to ALL parent divs. In my case I had the grid wrapped in <div class="row">, when I added it there too it worked.
if you want to make the nested child div positioned to the bottom of the parent div:
add {position:relative} to the css of the the parent div;
add {position:absolute;bottom:0} to the css of the the child div;
the nested div should be the same width as the parent (taknig into account the padding and margins), but you could force it to be by adding width:100% to the child div's css
Use this css to make your app-footer div sticky:
.app-footer {
height: 60px;
background-color: #f5f5f5;
position: fixed;
bottom:0px;
left:0px;
}
You could try this in your CSS:
.app-footer{
position: absoute;
bottom: 0px
width: 100%;
height: 80px;
background-color: red;
}
Related
Is it possible with only CSS to have the following effect:
I have two divs. One follows the other.
Now, if the user starts scrolling down the page (to see other content, more divs if you want..) the second div should "go up" (could also stay fixed and the first div goes down, I mean it would look the same) and overlap the first.
But only overlap for let's say 50px. After that, the behaviour is normal again, meaning that if you scroll further, those divs move out of the browser window eventually.
Have I made myself clear? I can add two coloured boxed to showcase if that helps. I played around a bit and tried parallex/position fixed/sticky mixes, but none seem to work with a given height restriction. I just wonder if this is possible without javascript.
You can get this effect by using position: sticky on both elements. There are a few things that can stop this from taking place, like having overflow: hidden or not having a height set on the parent element.
HTML
<div class="container">
<div class="red-box">This is the red box</div>
<div class="blue-box">this is the blue box</div>
</div>
<!-- needs space to be able to actually scroll on the page -->
<div class="container">
<div class=""></div>
<div class=""></div>
</div>
CSS
/* set the height of the container so that the sticky elements know how far they are meant to scroll */
.container{
min-height: 400px;
}
/* set your position sticky and a attribute that tells it when it should become sticky, in this case right at the top */
.red-box{
height: 400px;
background-color: red;
position: sticky;
top: 0px;
}
.blue-box{
height: 400px;
background-color: blue;
position: sticky;
top: 0px;
}
I have done a quick codepen example so that you can see this working. hope that helps.
https://codepen.io/Domnewmarch/pen/NWzqBde
Solution: I used a combination of negative margin, z-index and position: sticky.
Added margin to the 2nd container to make it more visible.
.sticky-wrapper {
height: 310px;
margin-bottom: -60px;
}
.content {
z-index: -1;
position: sticky;
top: 0;
padding: 0 3%;
height: 250px;
background-color: green;
}
.foo {
margin: 0 50px;
background-color: red;
height: 200px;
}
.next-content {
height: 1000px;
background-color: khaki;
}
<div class="sticky-wrapper">
<div class="content"></div>
</div>
<div class="foo"></div>
<div class="next-content"></div>
I've set img width 100%, so I don't know height of the img. I'm trying to set a div at the end of img using position absolute and top. Can we use calc() ? Or another method.
Note: I've set img position fixed.
<div class="container">
<img class="image" src="https://homepages.cae.wisc.edu/~ece533/images/airplane.png">
</div>
<div class="to-image-bottom">I'm div at the bottom of image</div>
You can use bottom instead of top for positioning elements. Also use wrapper for bottom div for display it outside of image. For example:
/* Container for image and bottom div */
.container{
position: relative;
/* For display content outside of image */
overflow: visible;
}
/* Image Styles */
.container .image{
width: 100%;
}
/* Wrapper for bottom div for align to bottom */
.container .to-image-bottom-wrapper{
position: absolute;
width: 100%;
bottom: 0;
}
/* Bottom Div */
.container .to-image-bottom-wrapper .to-image-bottom{
position: absolute;
top: 0; /* position relative to wrapper */
width: 100%;
background: red;
color: white;
text-align: center;
}
<div class="container">
<img class="image" src="https://homepages.cae.wisc.edu/~ece533/images/airplane.png">
<div class="to-image-bottom-wrapper">
<div class="to-image-bottom">I'm div at the bottom of image</div>
</div>
</div>
Edited for displaying div outside of image
I have a full-height scrollable DIV behind a smaller fixed DIV. The scrollable DIV is scrollable when I have the cursor over it, but it is not scrollable when the cursor is over the fixed DIV.
My question: Is there a way via CSS to allow the scrollable DIV to still be scrollable when the cursor is over the fixed DIV?
Below is an image to show the layout in question.
It should work normally, please see the div structure
<div class="wrapper-div">
<div class="fixed-div">
<div class="text-container">Fixed div</div>
</div>
</div>
<style>
.wrapper-div {
background: #F00;
width: 100%;
height: 120vh;
overflow-y: auto;
}
.fixed-div {
background: #0F0;
position: fixed;
bottom: 5vh;
width:80%;
margin-left: 10%;
height: 200px;
}
.text-container {
padding: 20px;
}
</style>
I am trying to put a position:fixed div inside an another div. I want a fixed div which has a width:100%; so it will be great for mobile and desktop at the same time.
Here is my JSfiddle
SF wants some code:
<div id="container">
<div id="item">This div is good div</div>
<div id="fixed">Right side of this div overflow its parent!!! </div>
</div>
An element with position: fixed; ignores the parent size because it is relative only to the viewport:
MDN:
Fixed positioning is similar to absolute positioning, with the exception that the element's containing block is the viewport.
You can:
Try giving it position: absolute; and set the container to position: relative;.
Use position: fixed; and set the size explicitly.
You can use the calc() method to adapt the viewport size. Just subtract right and left margin from the 100%:
Edit: I added a min-height to the body to see the "fixed-effect" on scrolling
body {
margin: 0;
min-height: 1000px;
}
#container {
margin: 10px;
background: black;
color: white;
}
#item {
height: 50px;
width: 100%;
}
#item {
background: blue;
}
#fixed {
height: 50px;
width: calc(100% - 20px);
background: green;
position: fixed;
}
<div id="container">
<div id="item">Normal div</div>
<div id="fixed">Fixed div</div>
</div>
We want a top bar on our page which is as wide as the browser's width. The problem is, it is inside a container div. If you pull it out of the container we can expand the div to the body width, but when it is inside the container it can only expand to the width of container.
Is there a solution through which we can expand the topbar past the container div.
<div id="container">
<div id="topBar">
<p>The Paragraph</p>
</div>
</div>
You can position the #topBar absolute without making it relative to its' immediate parent
html, body {
height: 2000px;
}
#container {
width: 50%;
margin: auto;
height: 200px;
background: beige;
}
#topBar {
position: absolute;
left: 0;
background: #ccc;
width: 100%;
}
DEMO
The other possibility is to remove it from the document flow with position:absolute. However, you need to know your height of the topBar, and will have to compensate by forcing a top margin on the rest of your content to keep it below your topBar.
For example, you could do:
#topBar {
position:absolute; /* fixed might also work, here */
top:0; left:0;
width:100%;
height:50px;
}
but you'd also have to have:
#container {
margin-top:50px; /* or more */
}
This will break, however, if you need to make #container position:absolute or position:relative.