I'm having problems getting my footer to stick to the bottom of the page when there are position absolute elements in the main container. Here's a fiddle to demonstrate.
<div class="content-wraper">
<div class="side-nav"></div>
</div>
<div class="footer"></div>
.content-wraper {
background-color:blue;
min-height:100px;
position:relative;
width:500px;
}
.side-nav {
background-color:red;
height:3000px;
position:absolute;
top:0px;
left:0px;
width:200px;
}
.footer {
background-color:black;
position:absolute;
bottom:0px;
width:200px;
height:50px;
}
Change position: absolute; in .footer to position: fixed;
Updated fiddle
UPDATE
To fix the footer to always be below the absolutely positioned side-nav using jQuery try this:
$(".footer").css("top", $(".side-nav").height());
Example Fiddle
absolute positioning refers to window size, not content size, so if content is higher than window, you won't get the effect you want.
Try different approach:
sticky footer
Related
I'm trying to achieve something that I'm not sure is supposed to be possible at all. Note that I'm looking for a CSS-only solution, I know I can solve this with JS, but I don't want to.
Consider the following pen:
https://codepen.io/fchristant/pen/PjoKOq
The second navigation bar (dark) is sticky, as you scroll down, it will stick to the top of the viewport. The first navigation bar (light) is not sticky, it will simply scroll away.
However, that light navigation bar has a child element that is sticky. The idea is that the parent will scroll away, yet the child sticks, effectively blending with the second navigation bar (which is sticky).
This does not work, however. Hence my question: is it possible at all to have a sticky child element inside a parent that is not sticky?
HTML:
<div class="site_header">
Site header
<div class="site_header_child">
sticky
</div>
</div>
<div class="site_nav">
Site header
</div>
CSS:
.site_header {
display:flex;
position:relative;
width:100%;
padding:10px;
background:#eee;
}
.site_header_child {
border:1px solid red;
margin-left:auto;
position:sticky;
z-index:2;
top:0;
right:20px;
}
.site_nav {
display: block;
position:sticky;
padding:10px;
background:#333;
color:#fff;
position:sticky;
z-index:1;
top:0;
}
It is not possible to use sticky in such case. The same effect can be achieved by other means though. You can simply use "fixed" positioning and the sticky child will stay were it was.
.site_header_child {
position:fixed;
top:10px;
background:#eee;
}
Demo: https://codepen.io/anon/pen/VMWovv
You can try adding display: contents; to the parent to make it act as the parent.
The .site_header_child will only stick for the duration of its parent element's height.
You will need to give the .site_header_child element a fixed position if you want it to appear in the second bar.
try it:
-> instead of top: 0 => top: 10px
.site_header_child {
border:1px solid red;
margin-left:auto;
position:sticky;
top:10;
z-index:2;
right:20px;
}
.site_nav {
display: block;
position:sticky;
top:10;
padding:10px;
background:#333;
color:#fff;
position:sticky;
z-index:1;
}
so here's my problem. I have two divs, and i want to be able to see both of them when i scroll down the page. Both divs are in the same parent container. If i give the parent a position:fixed, the the bottom div get's cut off, because you have to scroll to see it's full height. So i tried this. I gave position:fixed to the top div, and position relative to the bottom one. The fixed one now scrools but the relative doesn't "follow it" or stay beneath it.
Any ideas?
If I understand you correctly, the answer is to position both divs absolutely within the fixed parent.
JSFiddle DEMO
HTML
<div class="parent">
<div class="topDiv"></div>
<div class="bottomDiv"></div>
</div
CSS
.parent {
height:1500px;
width:200px;
border:1px solid grey;
position: fixed;
}
.topDiv {
display:block;
background:silver;
width:100px;
height:100px;
position:absolute;
top:0;
left:0
}
.bottomDiv {
background:red;
width:100px;
height:100px;
position:absolute;
top:130px;
left:0
}
I want to create a full screen css layout.
<div id="divLeft">LEFT is ok</div>
<div id="divRight">
<div id="divTop">TOP is ok</div>
<div id="divCenter">CENTER should have liquid height</div>
<div id="divBottom">BOTTOM should be always bottom</div>
</div>
CSS
html{
height:100%
}
body{
height:100%
}
#divLeft{
float:left;
width:70px;
height:100%;
background:#6c9;
}
#divRight{
margin-left:70px;
height:100%;
background:#999;
color:#fff;
}
#divTop{
background:red;
text-align:right;
}
#divCenter{
background:blue;
text-align:center;
}
#divBottom{
background:green;
text-align:center;
}
Here is jsfiddle
So, problem is with the #divCenter (should have liquid height) and #divBottom (should be always at the bottom of the screen).
You can achieve this easily with the calc() function, though it isn't supported below IE 9 and mobile support is quite bad. All you need to do is give #divCenter a height of 100% minus the 20px + 20px of height from its siblings. To have the footer appear on the bottom, you need to relatively position its containing block and then absolutely position the footer and place it at the bottom (bottom: 0;).
http://jsfiddle.net/gpwD4/6/
Assuming that #divTop and #divBottom have fixed heights, you can do this:
#divRight{
position: relative;
}
#divCenter{
position: absolute;
top: (height of #divTop)
bottom: (height of #divBottom)
left:0;
right:0;
}
#divBottom{
position: absolute;
left:0;
bottom:0;
right:0;
}
LIVE DEMO
This css has been somewhat difficult to figure out...Basically what I want is what is in this picture, but with dynamically changing content.
so I set up my html like this, basically all the elements are piled into the wrapper, the pictures and titles will be dynamically rotating and will be different widths and heights:
<div id="wrapper">
<div id="title"><h2></div>
<div id="image"><img></div>
<div id="leftbutton" class="but"><img></div>
<div id="rightbutton" class="but"><img></div>
</div>
Everything I have tried Hasn't worked out. how should I go about this?
The closest I have got is this, but the title field can change heights and that makes this method not work, since, I have to position the image relatively and its relative position changes with the title element growing and shrinking:
#wrapper{
position:relative;
text-align: center;
}
.but{
z-index:20;
position:absolute;
}
#leftbutton{
left:0px;
}
#rightbutton{
right:0px;
}
#title{
z-index: 3;
display: inline-block;
width:auto;
min-width: 80px;
max-width: 340px;
}
#image{
z-index: 1;
position: relative;
top:-21px;
}
If you mean the Title in the center use this way:
#title {
margin: 0 auto;
width: /* your width */
}
the position should be relative at the wrapper.
JsFiddle UP
I just reorganized the body structure, adding one more div and floating everything.
Then inside the central section I added title and image that you can style to be centered to the relative div.
If you provided some example code we would better be able to assist you. In the meantime, the following code should take care of what you're looking for:
HTML
<div id="wrapper">
<div id="title"><h2>Article Headline</h2></div>
<div id="image"><img></div>
<div id="leftbutton"><img></div>
<div id="rightbutton"><img></div>
</div>
CSS
#wrapper {
background:#6cb6d9;
display:inline-block;
position:relative;}
#title {
position:absolute;
top:0;
width:100%;
text-align:center;}
#title h2 {
background:green;
color:white;
padding:10px 15px 10px 15px;
display:inline-block;
max-width:200px}
#image {}
#image img {
min-width:200px;
height:300px;
width:500px; }
#leftbutton {
position:absolute;
left:0;
top:0;
height:100%;
width:75px;
background:black;}
#rightbutton {
position:absolute;
right:0;
top:0;
height:100%;
width:75px;
background:black;}
Though instead of hardcoding the img size, just remove those lines of CSS to have the div automatically adjust to the default size of the img.
http://jsfiddle.net/b7c7c/
None of these solutions worked correctly, ultimately the way to get it to work is with this trick: How to center absolutely positioned element in div?
Then you just position all elements absolutely within the wrapper and the sub elements relatively as seen in the post
I want to implement 3 DIVs inside a container, just like table rows
top {height = 100px} / middle {height = dynamic} / bottom {height = 100px}
Now the question is what is the best approach to have the middle div's height dynamic and keep the structure correct.
Here's what I've done so far: http://jsfiddle.net/pvPSD/4/
HTML
<div id="notification">
<div id="n-top">
top
</div>
<div id="n-middle">
middle<br /><br /><br /><br /><br />middle
</div>
<div id="n-bottom">
bottom
</div>
</div>
CSS
#notification {
position:absolute;
left:10px;
top:10px;
width:175px;
background: yellow;
}
#n-top {
position:absolute;
left:0px;
top:0px;
width:175px;
height:50px;
background: blue;
}
#n-middle {
position:absolute;
left:0px;
top:14px;
width:175px;
background: red;
}
#n-bottom {
position:absolute;
display:block;
left:0px;
bottom:0px;
width:175px;
height:50px;
background: green;
}
This here worked for me
#notification {
position:absolute;
left:10px;
top:10px;
width:175px;
background: yellow;
}
#n-top {
position:relative;
left:0px;
top:0px;
width:175px;
height:50px;
background: blue;
}
#n-middle {
position:relative;
left:0px;
width:175px;
background: red;
}
#n-bottom {
position:relative;
display:block;
left:0px;
bottom:0px;
width:175px;
height:50px;
background: green;
}
Remember that absolute postitionning removes the element from then normal flow of the page. The way you had it had all the elements placed in absolute postionning. Therefore, they didn't hold their position within the page. Hence, the following elements were bascially looking to be placed at the top. Having the position relative, the location of the element is preserved on the page, and the next one is looking to be place after.
Hope this makes sense.
Just put top and bottom margin to your middle section, add a wrapper with position:relative and top section and bottom section inside the wrapper, with position:absolute and with height equals your margin.
If the top and bottom <div>s are a static height, then you can set the middle <div> to position 0,0 with height 100% and a margin at the top to match the height of the top <div> and a margin at the bottom to match the height of the bottom <div>.
Well it seems to me (I may have understood what you want wrong.) that getting rid of the positioning elements (absolute, top, left, bottom)for the inner div's from your css keeps it looking correct regardless of how big the middle div is. Is there some other reason why you need absolute positioning on those inner elements?