I have a child div that needs to be positioned fixed with respect to a wrapper which is way up in the DOM hierarchy (instead of the viewport/parent element). I am creating a new stacking context in order to achieve this.
The child div also has some sticky elements in it. And its parent has horizontal scroll.
Am facing an issue when I scroll the parent div. It ends up sliding the sticky elements too, which is the desired behavior, but why do the elements stick to the right edge instead of left?
http://jsfiddle.net/5vhsg1Ln/2/
<div class="wrapper">
<p>
This is some content which is outside of ggparent div. I want the 'child' to be positioned relative to this div.
</p>
<div class='ggparent'>
<p>
This is the great grand parent. This div is vertically scrollable.
</p>
<div class='gparent'>
<p>
This is the grand parent div.
</p>
<div class='parent'>
<p>
Horizontal scroll here... This is the parent div with some text.
</p>
<div class='child'>
<span class='sticky'>
Sticky 1
</span>
<span class='sticky2'>
Sticky 2
</span>
<p>
This is the child. Positioned fixed to wrapper.
</p>
</div>
</div>
<div class='parent2'>
<p>
This is another parent div with some text.
</p>
</div>
</div>
</div>
</div>
div{border:1px solid #ddd;}
.wrapper {
transform: rotate(0deg); /* new stacking context */
overflow-y: hidden;
}
.ggparent {
height: 300px;
width: 400px;
overflow-y: scroll;
}
.gparent{
height: 600px;
width: 300px;
}
.parent, .parent2{
height: 300px;
width: 200px;
white-space: nowrap;
overflow-x: scroll;
position: relative; /* For the sticky element in child */
}
.child {
height: 100px;
width: 200px;
position: fixed; /* gets fixed to wrapper */
top: 225px;
background-color: lightblue;
white-space: normal;
}
.sticky {
position: sticky;
left: 0px;
z-index: 1;
}
.sticky2 {
position: sticky;
left: 50px;
z-index: 1;
}
Any help is appreciated. Thanks in advance!
I am using a card and after the card I put my footer. But the footer is of very large size as compared to the one mentioned in its css.
Image -
Code -
app.component.html -
<div class="card" id="card-css">
<div class="card-body">
//code
</div>
</div>
<hr class="line" color="#f5821f;" />
<div class="footer text-right" style = "height:50px !important" >
<label style="color: black">© 2018 ICICI. API Developer</label>
</div>
app.component.css
html, body {
height: 100%;
}
.footer {
position: relative;
left: 0;
bottom: 0;
width: 100%;
background-color: white;
color: black;
text-align: center; /* .push must be the same height as .footer */
}
If I am getting the question correctly then I think you want your footer at bottom of the page. For this you just need to change your bellow css.
position: relative
to
position: fixed;
margin:10px;
and for text size you can add the below css if you want.
font-size: 25px;
I'm having some trouble with my Pagination nav that is display:none. When I check on inspect element it takes no space, but for some reason, where the pagination nav is, there's an empty space that is not supposed to be there.
I've tried adding overflow:hidden, visibility:none, height:0, but none of it it's working.
Maybe it's something to do with position relative and absolute, I don't understand it very well yet.
themeexp1.tumblr.com
Edit: It's not the 14px margin, it's a much bigger margin
Empty space: http://postimg.org/image/hiixhonoh/
HTML
<div id="content">
<div class="container" id="{postID}">
<div class="container-overlay"></div>
<div class="photo inner">
<a href="{permalink}">
<img src="{block:indexpage}{PhotoURL-500}{/block:indexpage}{block:permalinkpage}{PhotoURL-HighRes}{/block:permalinkpage}" alt="{PhotoAlt}">
</a>
</div>
</div>
<nav id="pagination">
<ul>
{block:PreviousPage}<li>Previous page</li>{/block:PreviousPage}
{block:NextPage}<li><a id="nextPage" href="{NextPage}">Next page</a></li>{/block:NextPage}
</ul>
</nav>
</div>
CSS
#content{
margin: 0 auto;
position: relative;
}
.container{
margin-bottom: 14px;
}
.container-overlay{
width: 100%;
height: 100%;
opacity: 0;
position:absolute;
}
.icons{
opacity: 0;
position: absolute;
left: 50%;
top: 50%;
width: 100%;
text-align: center;
}
#pagination{
display: none;
position: absolute;
}
It's hard to tell what you want without a demo, but there is space at the bottom because your .container div has margin-bottom: 14px;.
Example Fiddle
I want to do exactly the same as this page. http://www.googleventures.com/
It is like a parallax effect when you slide down the lower part of the page comes up. How can I do that with an image as a header? Pure jquery? Is there an onSlide function?
I did an alternate option. You don't even need z-index, since the newer elements are automatically higher in z-index.
HTML
<div class="fixed">
<img src="http://placekitten.com/800/300" />
This is some text that will be static as well
</div>
<div class="scroll">
Lorem ipsum dolor sit amet
</div>
CSS
.fixed{
position: fixed;
}
.scroll{
background: #eee;
height: 700px;
position: relative;
top: 350px;
}
Working example: http://jsfiddle.net/3vxBA/
That just looks like the header has a fixed position and a lower z-index, so when you scroll regularly, the page continues upward but the header stays in the same position behind the main contents.
Sample HTML:
<body>
<div id="header">
some image here
</div>
<div id="pagecontent">
everything else
</div>
</body>
Sample CSS:
body {
padding-top: 100px; /* #header height */
}
#header {
position: fixed;
top: 0px;
z-index: -1;
background-color: #ccccff;
height: 100px;
width: 100%;
}
#pagecontent {
background-color: #ccffcc;
height: 1000px;
width: 100%;
}
Here's this as a working example: http://jsfiddle.net/Nv7Ku/
I've browsed to all question related to "sticky footer" and nothing helped me because my #content div does not always have sufficient content to push the footer to the bottom. Here is the code I've used to achieve this, but apparently I did something wrong:
html, body, div#container { height: 100%; }
body > div#container { height: auto; min-height: 100%; }
div#index_body { padding-bottom: 30px; }
.footer {
clear: both;
position: relative;
z-index: 10;
height: 30px;
margin-top: -45px;
padding-top:15px;
}
.footer {
color: #666;
background-color:#F4F7FA;
border-top:1px solid #E6E7E8;
font-size:95%;
text-align: center;
}
<div id="container">
<div id="index_body">
</div><!--end index_body -->
<div id="index_footer" class="footer">
</div><!--end footer -->
</div><!--end container -->
Some of my attempts work when index body has loads of text images only then the footer goes to the end but when it doesn't have much content let say 2 paragraph tags and an image the footer doesn't stick. Maybe this is not possible with just CSS, because the index_footer height is not fixed? Is there a way to do this with JavaScript? Or what is the right way to do this?
My screen resolution is really big maybe that is the problem its 1680 x 1050
Try moving your footer div outside of the container div. Your technique should then work. The way you have it set at the moment the footer is within the containing div, but positioned relatively. So even though the containing div may have 100% height, the footer div within it is still only to go just below the content in the container.
A quick example of what I mean, (note that an extra div with some padding-bottom is required in order to make sure the footer does not overlap the contents),
<html>
<head>
<title>Sticky Footer Test</title>
<style>
html, body {
height: 100%;
padding: 0px;
margin: 0px;
}
* {
margin: 0px;
}
#container {
min-height: 100%;
height: auto !important;
height/**/: 100%; /* for IE6 */
background: #ddd;
}
#footer {
position: relative;
background: #555;
margin-top: -100px;
height: 100px;
}
#content {
padding-bottom: 100px;
}
</style>
</head>
<body>
<div id="container">
<div id="content">
<p>Hello! I'm some content!</p>
</div>
</div>
<div id="footer">
<p>Hello! I'm a footer!</p>
</div>
</body>
</html>
If you can't move the footer outside of the container (for whatever reason), then you could also try positioning the footer absolutely within the containing div to be at the bottom. position: absolute; bottom: 0px; etc
For example, (again, an extra div with some padding-bottom is required in order to make sure the footer does not overlap the contents),
<html>
<head>
<title>Sticky Footer Test 2</title>
<style>
html, body {
height: 100%;
padding: 0px;
margin: 0px;
}
* {
margin: 0px;
}
#container {
position: relative;
min-height: 100%;
height: auto !important;
height/**/: 100%; /* for IE6 */
background: #ddd;
}
#footer {
position: absolute;
bottom: 0px;
width: 100%;
background: #555;
margin-top: -100px;
height: 100px;
}
#content {
padding-bottom: 100px;
}
</style>
</head>
<body>
<div id="container">
<div id="content">
<p>Hello! I'm some content!</p>
</div>
<div id="footer">
<p>Hello! I'm a footer!</p>
</div>
</div>
</body>
</html>
I know this doesn't answer your exact question, but the work done by Ryan Fait has worked very well for me across multiple browsers. You might want to give this a try (or take a look at what he did compared to what you are doing and see if you can determine a fix).
I believe the root of the problem is that the footer element in the HTML needs to be outside of the #container div. Also, I noticed after I removed that, issues with margin and padding on the body tag. Finally, the border-top on the .footer makes the height of the footer 46px, not 45px...
The corrected CSS:
/* FOOTER FIX */
html, body, div#container { height: 100%; }
body > div#container { height: auto; min-height: 100%; }
div#index_body { padding-bottom: 30px; }
body{margin:0;padding:0;}
#container{ margin-bottom: -46px; }
.footer {
clear: both;
position: relative;
z-index: 10;
height: 30px;
padding-top:15px;
color: #666;
background-color:#F4F7FA;
border-top:1px solid #E6E7E8;
font-size:95%;
text-align: center;
} /* END FIX */
The corrected HTML:
<html>
<body>
<div id="container">
<div id="index_body">
</div><!--end index_body -->
</div><!--end container -->
<div id="index_footer" class="footer">
</div><!--end footer -->
</body>
</html>
It's actually easy, here's the minimum required template:
<!doctype html>
<html lang="en">
<head>
<title>SO question 1980857</title>
<style>
html, body {
margin: 0;
height: 100%;
}
#container {
position: relative;
min-height: 100%;
}
* html #container {
height: 100%; /* This is min-height for IE6. */
}
#footer {
position: absolute;
bottom: 0;
}
#footer, #pushfooter {
height: 50px; /* Both must have the same height. */
}
</style>
</head>
<body>
<div id="container">
<div id="content">Content</div>
<div id="pushfooter"></div>
<div id="footer">Footer</div>
</div>
</body>
</html>
Making the container relative and giving it a min-height will actually stick the footer to its bottom all the time regardless of the content's actual height, which was your major concern as understood from comments.
Going off Harmen, i have tested this and it works, with the footer in the container. altho it is a little hackish
CSS
html, body, div#container { height: 100%; }
body > div#container { height: auto; min-height: 100%; }
div#index_body {
min-height: 100%;
margin-bottom: -46px;
}
.footer, .push {
height: 30px;
}
.footer {
clear: both;
position: relative;
z-index: 10;
margin: 0px;
}
.footer {
color: #666;
background-color:#F4F7FA;
border-top:1px solid #E6E7E8;
font-size:95%;
text-align: center;
} /* END FIX */
html
<body>
<div id="container">
<div id="index_body">
<div class="push"></div><!--Used to force the footer down to avoid overlap of footer and text -->
</div><!--end index_body -->
<div id="index_footer" class="footer">
</div><!--end footer -->
</div><!--end container -->
</body>
In order to realize a sticky footer, that is a footer placed in a fixed position at the bottom of the webpage that doesn't move when your scroll the page you can use this css code:
#footer{
position:fixed;
clear:both;
}
position:fixed makes the footer sticky anyway there could be floating problems if you used float:left or float:right in your code before, so using also clear:both it clears the floating and ensures that the footer is at the bottom under other divs and not on the left or right of the precedent div.
This will work, no matter what the height of the #container is:
CSS:
html, body {
height: 100%;
}
#container {
min-height: 100%;
height: auto !important;
height: 100%;
margin-bottom: -50px;
position: relative;
}
#index_footer {
height: 50px;
line-height: 50px;
position: relative;
background: #CCC;
}
#push {
height: 50px;
}
HTML:
<div id="container">
<div id="index_body">
test
</div>
<div id="push"> </div>
</div>
<div id="index_footer" class="footer">
test
</div>