This question already has answers here:
How do you get the footer to stay at the bottom of a Web page?
(32 answers)
Closed 4 years ago.
At this page I have the navigation menu .slider-btm underneath the head image ("Branding, Print, Websites & Movies, Displays & Signage") with:
.slider-btm {
position: absolute;
width: 100%;
bottom: 0;
height: 60px;
z-index: 10;
}
and parent:
<div class="slider-outer-wrapper" style="position:relative">
yet the navigation menu .slider-btm is not at the bottom of the screen. I see the following:
I wish to have this menu at the bottom like the menu at the bottom of brand.insightdesign.com.au
Help appreciated.
In an ultra-basic way, that website (that you have removed from your question) would have the container measure the height of your window and attach the height of the window to the header(container) and then absolute position the menu to the bottom of this container (see code for a very rough example)
.container {
background:red;
position:relative;
height:100vh;
}
li {
list-style:none;
float:left;
}
.menu {
position:absolute;
bottom:0;
width:100%;
background:green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<div class="container">
<div class="menu">
<ul>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</div>
</div>
<h1>This is more content</h1>
If you need anything further explaining, let me know.
--- UPDATE ---
Instead of using JavaScript to work out the height of your browser window, simply add height:100vh to the container height. This will match the container height to the browser height, give you the same outcome (just through CSS rather than JavaScript - with the added positive of that this you won't have to assign this to an on resize in case the user resizes their screen). I have updated the code above.
--- FURTHER UPDATE ---
Thanks, by moving .slider-btm out of .slider-outer-wrapper container, this should resolve your issue so that .slider-btm can sit at the bottom of your container which is 100vh.
You want to have the bar fixed at the bottom of the screen, also while scrolling?
Use position: fixed
.slider-btm {
position: fixed;
width: 100%;
bottom: 0;
height: 60px;
z-index: 10;
}
i think the issue is the the different screen resolution of the devices , add this line to the "slider-outer-wrapper" class
.slider-outer-wrapper{
position: relative;
height: 100%;
}
you have added max-height property , please remove it
after removing
Related
I have created simple webpage using html5 and css.
I have created sticky footer with 4 columns and each column have vertical navigation menu.
Here is my code:
<footer>
<div id="footer">
<div class="footer-column" id="footer_column1">
Home
</div>
<div class="footer-column" id="footer_column2">
about us
</div>
<div class="footer-column" id="footer_column3">
contact us
</div>
<div class="footer-column" id="footer_column4">
Blogs
</div>
</div>
</footer>
and this is for css:
#footer {
position:absolute;
clear:both;
bottom:0;
color:#000;
width:100%;
height: 50px;
background:#fff;
left:0;
}
.footer-column {
float: left; /* Push the div as far up-left as it can be put */
width: 25%; /* Make sure to subtract the padding */
padding: 10px; /* We want padding on all sides to make things look nice */
text-align:center;
}
Now page looks like : s22.postimg.org/l0l6y85o1/Untitled_1_copy.png
If i increase the height of footer, it will be hidden background of slideshow.
Can anyone help me, how to fix this. Thanks in advance.
You have given absolute positioning to footer so it will stay there, now your page is basically overlapping it. You should use relative layout for your page.
I would suggest you to use bootstrap for this. Here is a simple example or this.
Regarding z-index - If you will give higher z-index to your footer say 999999 then it will be on top (higher than other elements on page).
Z-index will not actually help you with positioning. Always something will be hidden. If you want your footer to be right at bottom of the page then do not use absolute positioning and it will be pushed down.
Try:
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 100px;
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 100px;
}
So I have a fluid layout with a fixed nav. I have: the fixed nav itself, and a div containing four other divs that Im looking to fill the space beneath the fixed nav completely. I cant seem to make this happen without having some kind of scrolling of either the nav or the divs.
The nav is set to position:fixed
The div containing the content div is set to position:absolute height:100% width:100%
The four content divs themselves are set to float:left height:50% width:50%
Im not even certain this can be handled with css alone, if it can that would be awesome, if not, ill entertain other possibilities. Any help, as always, is greatly appreciated.
Development area:
http://riverhousegolf.icwebdev.com
Maybe there is solution with CSS only, but here is jQuery solution. Content below menu will fill rest of space, without scroll bars.
HTML markup will be:
<div id="menu">SOMETHING IN MENU</div>
<div class="content">
<div class="part1"></div>
<div class="part2"></div>
<div class="part3"></div>
<div class="part4"></div>
</div>
CSS:
body,html{padding:0; margin:0;height:100%;width:100%;}
#menu {
position: fixed;
top: 0;
background: blue;
height: 50px;
width: 100%;
}
.part1 {
width:50%;
height: 50%;
float: left;
background: purple;
}
.part2 {
width:50%;
height: 50%;
float: left;
background: red;
}
.part3 {
width:50%;
height: 50%;
float: left;
background: green;
}
.part4 {
width:50%;
height: 50%;
float: left;
background: silver;
}
.content{
width: 100%;
position: relative;
}
jQuery:
var height = $(document).height();
var menu_height = $("#menu").height();
var content_height = height - menu_height;
$(".content").css("height", content_height);
$(".content").css("top", menu_height);
DEMO
Most important part is jQuery. First, we need to get height of document (html), then height of menu. Then, we substract menu height from document height, and result is content height. Same result we will apply to top position of content, to avoid overlaping.
Remove the "overflow-y: scroll;" attribute from your "html" selector in your style sheet.
edit:
I think if you are to use pure CSS you are going to have a scroll bar. I made a fiddle to show how to at least stop the nav from cutting off th top of the other divs. I used a
<div class="spaceTaker" >
that bumps the rest of the page down.
http://jsfiddle.net/Dtwigs/XRJ8n/
Edit2:
Try keeping all of the widths the same. But remove all of the heights where they are set to a percentage. The html element should have height: 100% but your tiles, etc. should not. Now put this jquery on your page.
$( function () {
var pHeight = $("html").height() - $("nav").height();
$(".tile").height(pHeight / 2);
});
Also make your nav position relative.
http://jsfiddle.net/Dtwigs/XRJ8n/
This is the page I am working on right now: http://jsfiddle.net/0xsven/hycRx/
I want the page to expand vertically to fill the whole screen so that the footer is always at the very bottom. I am not searching for a sticky footer! I want the page to expand to the bottom like in this picture.
Any idea if this is possible?
Update
I used some confusing words so I am trying to clarify my question:
I want my page to always fill out the viewport vertically, even if there is not enough content. As soon as there is enough content to even extend the viewport the page should be scrollable. In my tests a sticky footer always stays at the bottom of the viewport covering other elements, which I don't want to happen.
One solution I came up with is manipulating/resizing the paddings/margins with jquery so it fits the viewport. But I dislike using javascript for such things.
You can experiment with the position attribute, like this:
#footer{
background-color: #222;
position: relative;
bottom: 0;
}
#footer{
position: fixed;
bottom: 0;
}
The behaviour you're trying to emulate is that of the conventional CSS Sticky Footer.
Here's a simple example:
HTML
<div id="wrap">
<div id="main">
</div>
</div>
<div id="footer">
</div>
CSS
html, body {height: 100%;}
#wrap {min-height: 100%; *display:table; *height:100%}
#main {overflow:auto; padding-bottom: 150px;} /* must be same height as the footer */
#footer {
position: relative;
margin-top: -150px; /* negative value of footer height */
height: 150px;
clear:both;
}
/*Opera Fix*/
body:before {
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;/
}
Goal:
A CSS two column layout with main content in the flow first followed by left nav (see example code). This is probably easier than I think but I could not find any clear cut example here or online. The left nav has to have a fixed width.
I would like to position the left nav and main content areas as you would expect (left nav then main content). This is for SEO purposes to place the content as high up in the flow as possible then position it appropriately. I need to have this work in IE6 as well. The main content area needs to expand with the browser window. With my current version the left nav is absolute positioned and overlaps the main content container. Thanks in advance for all you CSS gurus!!! Hopefully this can be of use to others as well.
<style>
.clearly {clear: both; font-size: 1px;}
.contentContainer {border:1px solid; width:800px;}
.leftNav {width:200px;background-color:#CCC;position:absolute;}
.mainContent { position:relative;left:200px;width:100%;float:left;background-color:#A6C9FF;}
</style>
<div class="contentContainer">
<div class="mainContent">
Relative Main Content - Width 100%
</div>
<div class="leftNav">
Absolute Left Nav<br />
Absolute Left Nav<br />
Absolute Left Nav<br />
</div>
<div class="clearly"> </div>
</div>
Drop the containing div.
html, body { width: 100%; height: 100%; overflow: hidden; margin:0; padding: 0; }
.mainContent
{
position: absolute;
left: 200px;
right: 0;
top: 0;
bottom: 0;
overflow: auto;
}
.leftNav{
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 200px;
}
http://jsfiddle.net/hFAaZ/
P.S. this has an advantage over the other answer in that any backgrounds applied to either nav or content areas will always fill the page. This is usually what is expected from the designer.
Edit
Just noticed that you need a fixed width on the container. Add .container to the html,body list above, then also add another rule to ste it's width to 100%;
Is this what you are after:
http://jsfiddle.net/Mutant_Tractor/8uws6/
Simple semi-fluid + fixed layout:
Fluid column:
padding-left: 170px;
Fixed:
width:150px;
float:left;
background:red;
position:absolute;
Can two floats be side by side no matter what the width is?
basically I have this below:
#container { height: 100%; width: 100%; overflow: auto; background-color: #F6F9FF; }
#navigation { height: 100%; width: 300px; float: left; overflow: auto; background-color: green;}
#content { float: left; background-color: blue;}
<div id="container">
<div id="navigation">
<ul>
<li>1. nav stuff </li>
<li>1. nav stuff </li>
<li>1. nav stuff </li>
</ul>
</div>
<div id="content">
<p>Lorem ipsum snip....ultricies.</p>
</div>
<div>
I want the navigation and the content to always be side by side. The navigation has an initial width of 300px, however you can close it using jquery and then it only takes up 15pxs. I want the content to always fill the remaining portion of the container. Right now I keep getting it so when the width gets small, the content gets bumped down below the navigation.
Here is a link to jsfiddle to help show what i'm talking about.
http://jsfiddle.net/M9sZd/2/
This is very generic. There are many ways to achieve this, and I'll tell you how I'd do it (with JavaScript, of course). There are two situation: 1. nav extended and 2. nav collapsed. I'd use position: absolute for the navigation, and the corresponding width, while having a padding on the container to accommodate the width of the navigation, and add a class to the container depending on the situation.
#navigation { position: absolute; left: 0; top: 0; width: 300px; }
#navigation.collapsed { width: 15px; }
#container { position: relative; padding-left: 300px;}
#container.nav-collapsed { padding-left: 15px; }
The only risk is that the navigation is higher than the content, and will get trimmed. You can prevent that by using a min-height on the container.
Side by side floating can be tricky sometimes depending on the browser. (I have found issues with IE and using up 100%)
I changed the navigation and content areas to use %-based widths - (20%/80%) and that seemed to easily fit them next to each other.
Link with %-Based Widths
Have you considered using something like a "splitter" to separate the content and navigation and make them adjustable?
jQuery Splitter
I used something like that recently and it really worked for what I was trying to accomplish. You could possibly adjust the widths of the areas explicitly - when you alter the navigation width with something similar to below:
var containerWidth = $("#container").width();
onChange()
{
$("#navigation").css("width", 15px);
$('#content").css("width", containerWidth - 15);
}
Pardon the pseudo-code, it was off the cuff.
Anyways - I hope something here you were able to use :)