I am designing a website, inside which I want to have a toolbar at the top, no matter how the scroll acts, the toolbar div will always be at the top. This is what I have so far:
http://jsfiddle.net/RjHMH/85/
<div class="stuckpart">
<button type="button">this button is fixed</button>
</div>
<div id="table_div"></div>
I am using google table js library to attach a table within the table_div, but When I scroll down the table, the button at the top is overlapped by the table. How to fix this?
To be more specific: what I want is like this what w3school did, they have a toolbar always at the top.
How would I implement something like this? A small demo in jsfiddle would be cool.
.stuckpart{
position:fixed;
padding-bottom: 200px;
z-index:100
}
z-index will solve your issue of overlapping.
#nav_bar {
position: fixed;
background-color:blue;
height:50px;
width:100%
}
#content {
background-color:lightgreen;
overflow-y:auto;
height:200px;
position:relative;
width:100%;
top:50px;
}
http://jsfiddle.net/oa7mfcmb/6/
This will move your nav bar to the top of the page and keep it there while you scroll through the page.
<body>
<div id='nav_bar'>
</div>
</body>
#nav_bar {
position: fixed;
top: 0px;
//the rest of your nav bar style
}
HTML:
<div class="menu"></div>
CSS:
.menu {
background-color: #000000;
width: 500px;
height: 50px;
position: fixed;
margin-top: 0px;
}
Position fixed is important.
Related
[Link to the Code][1]
[1]: https://codepen.io/muhammad-shahzeb-raza/pen/mdRbXqX?editors=1100
I am trying to make my navigation stay at one point during the scroll using Position = fixed but it does not work.
This will most likely be down to your HTML structure. Consider moving the the navigation HTML outside of your wrapper. For example:
body {
margin:0;
}
.menu {
overflow: hidden;
position: fixed;
top: 0;
width: 100%;
height:40px;
box-sizing:border-box;
border-bottom:1px solid #d9d9d9;
position:fixed;
background:white;
}
.content {
width:100%;
height:3000px;
background:#f1f1f1;
margin-top:40px;
}
<div class="menu"> Menu </div>
<div class="content"> Content </div>
You can move .header__nav just above your #section-header, and make sure it has position: fixed and z-index bigger than 3, like this: https://codepen.io/cmarius/pen/JjEPZQy
&__nav{
z-index: 4;
border-bottom: .1rem solid $color-light;
position: fixed;
}
However, it's worth mentioning you header element should only contain header data.
I have a DIV that needs to be aligned to the bottom of a search result page, problem is whenever there is no search result or less rows of search result displayed on the page, the DIV goes up from the bottom of the page.
but it should be placed like this
and whenever there are more rows and the page can be scrolled down, the DIV should be place like this.
My currrent code looks like this
<div id="bottom-stuff>
<div id="bottom">
// DIV stuff
</div>
</div>
#bottom-stuff {
padding: 0px 30px 30px 30px;
margin-left:150px;
position: relative;
}
#bottom{
position: absolute; bottom: 0px;
}
Right I think I know what you mean so lets see....
HTML:
<div id="con">
<div id="content">Results will go here</div>
<div id="footer">Footer will always be at the bottom</div>
</div>
CSS:
html,
body {
margin:0;
padding:0;
height:100%;
}
div {
outline: 1px solid;
}
#con {
min-height:100%;
position:relative;
}
#content {
height: 1000px; /* Changed this height */
padding-bottom:60px;
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px;
}
This demo have the height of contentheight: 1000px; so you can see what it would look like scrolling down the bottom.
DEMO HERE
This demo has the height of content height: 100px; so you can see what it would look like with no scrolling.
DEMO HERE
So this will move the footer below the div content but if content is not bigger then the screen (no scrolling) the footer will sit at the bottom of the screen. Think this is what you want. Have a look and a play with it.
Updated fiddles so its easier to see with backgrounds.
Try position:fixed; bottom:0;. This will make your div to stay fixed at the bottom.
WORKING DEMO
The HTML:
<div id="bottom-stuff">
<div id="search"> MY DIV </div>
</div>
<div id="bottom"> MY DIV </div>
The CSS:
#bottom-stuff {
position: relative;
}
#bottom{
position: fixed;
background:gray;
width:100%;
bottom:0;
}
#search{height:5000px; overflow-y:scroll;}
Hope this helps.
It's a quick fix, I hope it helps.
<div id="content">
content...
</div>
<footer>
content footer...
</footer>
css:
#content{min-height: calc(100vh - 100px);}
100vh is 100% height of device and 100px is height of footer
If the content is higher than height of device, the footer will stay on bottom.
And the content is shorter than height of device, the footer will stay on bottom of screen
Simple 2020 no-tricks method:
body {
display: flex;
flex-direction: column;
}
#footer {
margin-top: auto;
}
Finally I found A good css that works!!! Without position: absolute;.
body {
display:table;
min-height: 100%;
}
.fixed-bottom {
display:table-footer-group;
}
I have been looking for this for a long time! Hope this helps.
Nathan Lee's answer is perfect. I just wanted to add something about position:absolute;. If you wanted to use position:absolute; like you had in your code, you have to think of it as pushing it away from one side of the page.
For example, if you wanted your div to be somewhere in the bottom, you would have to use position:absolute; top:500px;. That would push your div 500px from the top of the page. Same rule applies for all other directions.
DEMO
My Objective: To have a home page, that has a fixed, static footer. The easiest way to explain this is looking at this website, http://www.foxtie.com/. I'm trying to do something like what they have done with the fox, sticking with the footer, only, I'm wanting the entire footer to not ever move from the bottom of the actual screen.
My Code: I've changed, and unchanged, and re-changed it all. So I may be 20 steps farther than I was an hour ago. Here is what I have. (Bear with me, first post here, and I'm very rusty on the html/css).
Any help is appreciated.
The HTML:
<html>
<body>
<div id="container">
<div id="nav"></div>
<div id="content"></div>
<div id="footer">
<div id="imginthefooter"></div>
</div>
</div>
</body>
</html>
The CSS:
body {
height: 100%;
margin: 0px;
}
html {
background-color: #999;
margin: 0px;
height: 100%;
}
#container {
min-height: 100%;
background-color: #666;
position: relative;
}
#content {
overflow: auto;
background-color:#333;
}
#footer {
background-color:#000;
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
height:100px;
overflow: hidden;
}
#imginthefooter {
background: url(Images/Elk.png);
width:100px;
height:300px;
z-index:300;
bottom: 0px;
top: -108px;
right: -150px;
position: relative;
}
The link that Mr. Alien provided in his comment is for sticky footers. This is useful if you want the footer to appear at the bottom of the screen regardless of the amount of content on the page. What I think that you actually want is for the footer to always appear at the bottom of the page. Meaning that if you scroll down, the footer stays in place. If this is the case, you want the following code:
#footer {
position:fixed;
bottom:0;
left:0;
right:0;
width:100%;
height:100px;
}
The fixed positioning will place the footer at the bottom of the screen permanently. To add a fixed image within the footer, you will need both a relative div and absolute div. The following code is will get you what you want.
<div id="footer">
<div id="footerContainer">
<div id="imginthefooter"></div>
. . . Any additional footer elements go here . . .
</div>
</div>
#footer {
position:fixed;
bottom:0;
left:0;
right:0;
width:100%;
height:100px;
}
#footerContainer {
position:relative;
width:100%;
height:100px;
}
#imginthefooter {
background: url(Images/Elk.png) no-repeat;
width:100px;
height:300px;
top: -108px; /* Position element */
right: 150px; /* Position element */
position: absolute;
}
The relative container within the fixed element will allow you to position the elk image relative to that container.
I am absolutely positioning a footer at the bottom of the browser window, using the following code:
HTML
<html>
<body>
<div id="content">
Content
</div>
<div id="footer">
Footer
</div>
</body>
</html>
CSS
#content {
margin-bottom: 20px;
background: red;
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 20px;
background: blue;
}
This works just as intended, however when I make the browser window smaller the footer will eventually cover the main content. What is the most efficient way of preventing this?
Thanks in advance.
You need a Sticky Footer.
Demo
Here is another example using pseudo-elements. You may have some issues with old versions of IE, but it allows you to forgo un-semantic elements.
Try this:
#content {
padding-bottom: 20px;
background: red;
}
#footer {
position:fixed; //Changed to fixed
bottom:0px;
width:100%;
height: 20px;
}
Hi all I am having trouble getting my footer to stick to the bottom of the page. I have followed all the usual advice but my left column seems to expand beyond it's container div, which consequently pushes the footer off the bottom of the page. I have a fairly complicated layout since I have a fair amount of collapsible panels via jQuery but I'll give you the basic structure.
Basic HTML:
<html>
<head></head>
<body>
<div id="container">
<div id="content_header"> <!-- collapsible top panel -->
</div>
<div id="show_content_header"> <!-- tab shown to expand top panel when minimized-->
</div>
<div id="content_left_panel"> <!-- collapsible left panel -->
</div>
<div id="show_left_panel"> <!-- tab shown to expand left panel when minimized -->
</div>
<div id="main_content">
</div>
</div>
<div id="footer">
</div>
</body>
</html>
And the CSS:
body
{ height: 100%;
margin:0;
padding:0;}
html, body, #container { height: 100%; }
body
#container { height: auto; min-height: 100%; }
#content_header
{ position:fixed;
width:100%;
left:0;
height:200px;
background:url(../images/image.png) repeat-x;
border:1px solid #000;
z-index: 100; }
#show_content_header
{ position:fixed;
z-index:2;
display:none;
width:100%;
height:40px;
top:40px;
left:0; }
#content_left_panel
{ position: absolute;
top: 235px;
left: 0px;
width: 200px; /*Width of frame div*/
height: auto; /*usually 100%*/
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
z-index:0;}
#show_content_left_panel
{ position:fixed;
left:0;
float:left;
padding-top:5px;
display:none;
width:0px;
height:30px;
cursor:pointer;
top:90px;}
#main_content
{ position: relative;
margin-left:210px;
margin-top: 235px;
margin-right:10px;
margin-bottom: 100px;
height: 100%;
overflow: hidden;
z-index:0;}
#footer {
position: relative;
z-index: 100;
height: 100px;
margin-top: -100px;
width:100%;
background:url(../images/image.png) repeat-x;
clear: both;}
As I said my footer remains at the bottom of page when the 90% of the time, but as soon as the #content_left_panel exceeds the height of the main content then the footer no longer remains at the bottom of the page, rather it is rooted to the bottom of the container div. I am confused as the #content_left_panel is breaking out of the container I am guessing it is something to do with it being a float!
Any help is much appreciated!
Cheers
I don't really understand what kind of layout you want but #content_left_panel has position:absolute; rule, so
It is removed from the normal flow entirely
(http://www.w3.org/TR/CSS2/visuren.html#absolute-positioning)