I'm trying to achieve a fixed sidebar where the footer should not interfere with the fixed sidebar.
<body>
<div>
<div class="sidebar"> <!-- Fixed sidebar -->
</div>
<div class="content">
<!-- Long article -->
</div>
</div>
<div class="footer">
</div>
</body>
You can use this code to fixate elements to viewport.
.sidebar {
position: fixed;
top: 100px; /* below the header */
height: calc(100% - 200px); /* substract the height of the header and footer */
}
You should have a look at this answer for the CSS3 calc-function: https://stackoverflow.com/a/14101451
If you inspect Google's code for this page, you'll see that the element is set to position: fixed once you've scrolled a certain amount as well as a top value set to the header's height.
It's max-height is lowered as the window's height lowers.
If you're satisfied with its browser support you could try position: sticky although I would advise not too as it's still only truly compatible with Firefox & Safari's latest versions.
You'll have to set your sidebar to position: fixed and adjust its position values using JavaScript on scroll. Or set it to fixed from the get-go and use z-index on your footer to cover it.
Related
I'm trying to make a dashboard frame (in Bootstrap 5, but I don't think it makes any difference) that works like in these two pictures:
This is basically my current situation:
<html>
<body>
<div class="pretoolbar">pretoolbar (non-essential information, to be hidden when scrolling)
</div>
<div class="sticky-toolbar"> sticky toolbar</div>
<div class="container-fluid">
<div class="sidebar col-3">
[tall sidebar content]
</div>
<main class="col-9">
[also tall content]
</main>
</div>
<body>
</html>
CSS:
.pretoolbar{
background-color: #555;
color:white;
height:32px;
}
.sticky-toolbar{
background-color: black;
color:white;
height:56px;
position:sticky;
top:0;
}
.sidebar{
background-color: white;
position: sticky;
top: 56px;
overflow: hidden auto;
max-height: calc(100vh - 56px);
height: 100%;
}
I'm trying several approaches but it doesn't seem working. What I'm trying is of course position: sticky on the main sticky toolbar and on the sidebar. But due to the different available vertical space (scrolled-top vs scrolled-middle), after declaring a height for the sidebar (calc(100vh - 56px), 56px is the height of the toolbar) it results in the bottom part of the sidebar and its scrollbar to fall out of the viewport bottom. I'm considering flexbox, position:fixed, position:absolute... cannot find a way to get it through.
I also discovered a strange behavior (in Chrome at least) when you place a position:sticky inside a position:fixed
My goal would be to avoid JavaScript, I basically need a sidebar that changes its height after the sticky-state of the toolbar and sticky searchbox. (Or, to say it in other words, the top-edge of the sidebar should behave like position:sticky while the bottom-edge should behave like position:fixed;bottom:0).
Can you think of a way of achieving this without using JavaScript?
Please let me know if I am understanding your situation. First I would suggest getting rid off of the *pre-toolbar bar. Otherwise, the desired behavior is impossible without js. And since you mentioned the information there is not essential, you can put it anywhere.
However, if you still want it to be on top, then sticky of position fixed the toolbar and the sidebar. Do not use calc() It is better to use height 100vh and put it behind the toolbar so it seems to be shorter. Then, place a pre-toolbar on top (z-index) of your toolbar and animated it to disappear after some seconds.
Here is a codepen https://codepen.io/oscontrerasn/pen/WNpxJwV
I've got the following div structure of my content window, using BS4 framework:
<div class="container-fluid">
...
<div class="row">
...
<div class="container">
...
<div class="row row-grid">
...
<div class="col-8"> <!-- my left sided content, long block of cards-->
...
<div class="col-4"> <!-- my right sided card-block that I need to be sticky and follow the left as user scrolls down-->
I see in the docs that the nav-bar has a .sticky-top class - but when I try to use this in my example here things get wonky.
How can I just get my col-4 div to stick to the top of the browser window, when the user scrolls to see the content in the col-8 div?
Clarification
My right and left content divs live under other static content, like the navbar and a header block. So on page load, the right (sticky) div should be in it's native position, and only stick to the top of the window when scrolling beyond it's visibilty. I've updated the fiddle to show kind of what I mean.
Fiddle
Use position: fixed css property
CSS
.fixed-div{
position : fixed;
top: 0;
right: 0;
}
You're basically after position: sticky;; unfortunately, browser support is still somewhat lacking. If you only care about browsers that support it, the syntax is similar to:
.sticky // or whatever selector you want to use
{
position: -webkit-sticky;
position: sticky;
top: 75px;
}
See the MDN article for position for a better explanation, but, to put it simply, the value of top is the distance from the top of the viewport (or the nearest positioned container) where the element switches from static to fixed positioning. It's the same affect that the Affix plugin provides in Bootstrap 3.
I have a box which displays the contents of a chosen file using jquery.
The code for the box is
<div class="lightbox">
<div class="lightbox-content"></div>
<div id="close-lightbox">Close</div>
</div>
I want the close-lightbox div to be always at the bottom of the box.So the css for it is
#close-lightbox{color:red;position:absolute;bottom:0;padding-left:30%;}
Div lightbox has overflow:auto.
Now, what happens is that if the lightbox-content is not big and it fits the fixed size of lightbox then there is no scrolling and the close-ligthbox does appear at the bottom as I wanted.
But if the lightbox-content is big and doesn't fit the fixed size of lightbox then there is scrolling but the close-lightbox appears at the bottom of the lightbox BEFORE that scrolls down which means it appears on the middle of the lightbox-content.
Any suggestions how I can fix that?
.lightbox{
height:auto;
overflow:hidden;
}
.lightbox-content{
height:270px;
overflow:auto;
}
Change the height of this based on your needs of your lightbox.
You could wrap lightbox in its own wrapper, and position the close-lightbox relative to it.
HTML
<div class="lightbox-wrapper">
<div class="lightbox">
<div class="lightbox-content"></div>
<div id="close-lightbox">Close</div>
</div>
</div>
CSS
.lightbox-wrapper {
position: relative;
}
#close-lightbox {
position: absolute;
bottom: 5px;
left: 30%;
}
Take a look at this fiddle - http://jsfiddle.net/joplomacedo/4chu6/
EDIT Ohgodwhy's solution is actually cleaner if you're able to move lightbox's overflow:auto to lightbox-content -> While I was at it, I made fiddle with his solution - http://jsfiddle.net/joplomacedo/4chu6/2/
I have a #wrapper div that is 100% height. Inside of that I have several content divs, each are displayed as inline-block and have a bottom margin. The problem is that this bottom margin is somehow being collapsed.
The problem can be seen with very simple code:
<div id="wrapper">
<div id="content">
<!-- lots of content here that will fill the browser window -->
</div>
</div>
I've created an example which can be seen here: http://jsfiddle.net/Y6tJw/
I have a feeling this is a webkit issue as both Firefox and IE render the page with the proper margin. Any help?
Don't ask me why it works, but this will work http://jsfiddle.net/Y6tJw/2/
Style
#wrapper { height: 100%; background: blue; }
#innerwrap { padding-bottom:300px; background: blue;}
HTML
<div id="wrapper">
<div id="innerwrap">
<div id="content">
<!-- lots of content here that will fill the browser window -->
</div>
</div>
</div>
this is happening because you gave your body a height of 100% with the min-height. Try giving height:auto; this'll work
I'm using this solution, which has worked for me before:
http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
I'm currently working on a site, and it's not working. I think it's because I'm using absolute position on some divs on the page. Instead of sticking to the bottom of the page, the footer shows up under the header, on top of the absolutely positioned divs. How can I get sticky footer to work in this situation?
<div id="wrap">
<div id="container">
<div id="myDiv">
...content...
... this div is absolutely positioned
</div><!-- END aboutText -->
</div><!-- END container -->
<div class="push"></div>
</div><!-- END wrap -->
<div id="footer">
...footer content
</div>
Actually it's working now. Not sure why - one of those CSS mysteries. Here's a related question though - How do you set a minimum browser height, so that when someone is resizing the browser (making it smaller), the footer stops moving up and covering the content?
Edit - here's the CSS. The footer sticks to the bottom fine, but it covers the content divs on the page if the browser window is small.
html, body {
height: 100%;
}
#wrap{
width:950px;
margin: 0 auto -80px;
min-height: 100%;
height: auto !important;
height: 100%;
}
.push {
height: 80px;
}
#footer{
height: 80px;
background-image:url(../images/img.jpg);
}
#container{
position:relative;
}
#someDivWithinTheContainer{
position:absolute;
left:230px;
top:300px;
}
The correct answer is position fixed, except that IE6 does not support that property.
Here's what I use for sticking the footer at the bottom. With this method, the footer never overlaps the content, no matter how small the window gets. If you edit it, make sure the padding-bottom on the #body div is greater than the height of the #footer div - this is what prevents overlap. I don't have any pages with absolutely-positioned content, so I don't know how it behaves with that; for floated content, naturally you need to have a clearing block after it, otherwise the #body div shrinks down.
CSS:
html, body {margin:0;padding:0;height:100%;}
#container {min-height:100%;position:relative;}
#body {padding:10px;padding-bottom:2em;zoom:1;}
#footer {position:absolute;bottom:0;width:100%;height:1em;}
html:
<body>
<div id="container">
<div id="body">
(body contents)
</div><!-- #body -->
<div id="footer">
<p>(footer text)</p>
</div><!-- #footer -->
</div><!-- #container -->
</body>
And then to fix IE6, I add a conditional comment:
<!--[if lt IE 7]>
<style type="text/css">
#container {height:100%;}
</style>
<![endif]-->
It's also important to have a doctype declaration so IE will be in standards mode, not quirks mode.
Fixed positions an element relative to the window frame, ignoring whatever scrolling happens within the body of the page.
People will sometimes use absolute because it is similar, but different.
One of the biggest misconceptions about "absolute" is that it is absolutely positioned within a page (at least based on all the people I've interviewed recently). It's not. Absolute means the element is positioned absolutely within its closest containing "positioned" element-- any element that doesn't have "position: static" (the default). If you don't position anything else, then it's the body, as you expect. Once you start using position, you will change what the element is relative to.
I suspect this is what you have run into.