please check this:
i am doing responsive web design and i have 100% with image slider. if i re-size my browser slider image height will change.
both slider and navigation wrap in my header, so i need to get header height when i responsive.
and also i need to both (navigation , and slider ) top:0px;
i think you can get some idea what i try to say.
<header>
<nav> <!-- my header main menu goes here --> </nav>
<div class="slider">
<!-- slider images goes here -->
</div>
</header>
<div class="content">
</div>
<footer>
</footer>
do this in css:
html,body{
height:100%;
}
header{
background:blue;
height: 100%;
/*padding-bottom: 120px;*/ //<---remove this
}
nav{
position:relative;
top: 0;
width: 960px;
margin: 0 auto;
z-index: 2;
background: red;
height: 50px;
}
.slider{
width:98%
position:absolute;
top: 0;
margin: 0 auto;
z-index: 1;
background: green;
height: 100%;
}
Try this
Related
This question already has answers here:
How do you get the footer to stay at the bottom of a Web page?
(32 answers)
Closed 7 years ago.
How to make a footer that sticks to the bottom when content is shorter than screen height and float to bottom of the content when content is longer than screen height ?Now I am doing like this.
html
<body>
<div class='container'>
</div>
<footer>
</footer>
</body>
CSS
.container{
position:relative;
min-height:500px;
}
footer{
height:200px;
background-color:black;
position:absolute;
bottom:0px;
}
This code is fine when the content is shorter than the screen size or very short. But my issue is when the content is very much longer(eg.twice of the screen size), footer sticks to the bottom when it first loads the page. But when I scroll down, the footer is stacked to the top of the new scrolled content.
$(document).ready(function(){
var containerHeight = $('.container').outerHeight(true);
var windowHeight = $('window').height();
if(containerHeight < windowHeight ){
$('footer').css('position','fixed');
}
});
Please follow the structure to get the result.
<div class="container">
<div class="page-header">page-header</div>
<div class="page-content">page-content
<br/>
<div id="more-cont"></div>
<input type ="button"value="Add More Content" id="add-more">
</div>
<div class="footer">footer</div>
</div>
html,
body {
margin:0;
padding:0;
height:100%;
}
.container {
min-height:100%;
position:relative;
}
.page-header {
background:#ededed;
padding:10px;
background-color:green;
color:white;
}
.page-content {
padding-bottom:100px; /* Height of the footer element */
}
.footer {
background:#ffab62;
width:100%;
height:100px;
position:absolute;
bottom:0;
left:0;
}
Please see the demo
Demo
css code:
#footer {
position: fixed;
width: 100%;
clear: both;
bottom: 0;
padding: 0;
margin: 0;
height: 30px;
background: #333;
}
You can easily do this by adding a min-height and padding to body and setting the footer as absolutely positioned relative to it.
Here's a JSfiddle or you can use the Run code snippet button to view the result.
body {
min-height: 100%;
padding-bottom: 200px;
position: relative;
}
footer {
position: absolute;
bottom: 0;
height: 200px;
left: 0;
right: 0;
}
/* just for demo */
.container {
height: 1000px;
border: 1px solid green;
}
footer {
border: 1px solid blue;
}
<body>
<div class='container'>
container stuff
</div>
<footer>
footer stuff
</footer>
</body>
I'm trying to insert the left and right controllers on the two ends of my slideshow div via the DOM such that they are on the opposite ends of the slideshow div
So far I've only gotten them either to display in the top corners of the browser window (Using top: 0; left: 0 and top: 0; right: 0 for the right and left controller id's style formatting) or where the left controller displays where it should, but the right controller displays directly below the left controller rather than on the opposite side of the slideshow div (I did this by changing the right and left controller styles to float in place of the previous formatting that I just mentioned)
I feel like it might have something to do with the styling, but I could be horribly wrong.
Anyone have any ideas?
HTML:
<div id="pageContainer">
<!-- Slideshow HTML -->
<div id="slideShow" style="border-style: solid; border-color: red; border-width: 1px;">
<div id="slidesContainer" style="border-style: solid; border-color: yellow; border-width: 1px;">
<div class="slide">
<h2>Web Development With PHP</h2>
<p><img src="newphp.JPG" alt="Screen capture of PHP built website" width="215" height="145" /></p>
</div>
<div class="slide">
<h2>Database Design with MySQL Workbench</h2>
<p><img src="Patient_Database_Snapshot.JPG" width="215" height="145" alt="MySQL Workbench Database Design Snapshot" /></p>
</div>
<div class="slide">
<h2>Web Design With CSS and HTML</h2>
<p><img src="webdesign.JPG" width="215" height="145" alt="Screen capture of Brian Houlhan's CSS webpage" /></p>
</div>
</div>
</div>
<!-- Slideshow HTML -->
</div>
CSS:
/*
* Slideshow style rules.
*/
#slideShow {
margin:0 auto;
width:640px;
height:263px;
background:transparent url(bg_slideshow.jpg) no-repeat 0 0;
position:relative;
}
#slideShow #slidesContainer {
margin:0 auto;
width:560px;
height:263px;
overflow:auto; /* allow scrollbar */
position:relative;
}
#slideShow #slidesContainer .slide {
margin:0 auto;
width:540px; /* reduce by 20 pixels of #slidesContainer to avoid horizontal scroll */
height:263px;
}
/**
* Slideshow controls style rules.
*/
.control {
display: block;
width: 39px;
height:263px;
text-indent:-10000px;
position: absolute;
cursor: pointer;
}
#leftControl {
float: left;
/*
top: 0;
left: 0;
*/
background:transparent url(control_left.jpg) no-repeat 0 0;
}
#rightControl {
float: right;
/*
top: 0;
right: 0;
*/
background:transparent url(control_right.jpg) no-repeat 0 0;
}
Javascript (Running in HTML document):
// Insert controls in the DOM
$('#slideShow')
.prepend('<span class="control" id="leftControl">Clicking moves left</span>')
.append('<span class="control" id="rightControl">Clicking moves right</span>');
This should work just fine:
#slideshow{
position:relative;
}
#leftControl{
float:none;
top:0;
left:0;
}
#rightControl{
float:none;
top:0;
left:0;
}
of course you dont need to add the float none, you could just simply remove the float:left and float:right that is currently on those elements.
When the controls are positioned with absolute positioning -
.control {
display: block;
width: 39px;
height:263px;
text-indent:-10000px;
position: absolute;
cursor: pointer;
}
#leftControl {
top: 0;
left: 0;
background:#ff0000;
}
#rightControl {
top: 0;
right: 0;
background:#ffcc00;
}
I am not seeing an error in how it is being displayed. If you look here http://jsfiddle.net/CERFY/ it looks correct. Is there some other markup that could be affecting this, that maybe you had a live example to show?
want that the navigation menu moves up & content moves left when the sidebar is moved (slide) using jquery ?
i am making a structure for my web page and using jquery to slide navigation & sidebar but the content & footer remains where it is and the removed portion is empty, so how to make it interdependent ?
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#slidesidebar").click(function(){
$("#sidebar").slideToggle("slow");
});
});
</script>
<style type="text/css">
nav {
position: fixed;
left:15%;
top: 0;
width: 100%;
height: 6%;
background: #555;
}
#content {
position: relative;
top:auto;
width:85%;
top:6%;
margin: 0 0 auto auto;
background:black;
}
#main {
}
#sidebar{
position: fixed;
left:0;
width:15%;
color: white;
background:green;
}
footer {
width: 100%;
position: fixed;
opacity:0.8;
bottom: 0;
height:5%;
left:0;
background:red;
}
</style>
</head>
<body>
<div id="sidebar">
Sidebar Content
Sidebar Content
</div>
<nav>
Navigation Menu
</nav>
<div id="content">
<div id="main" align="center">
Content
</div>
<footer>
<button style="font-size: .8em;" id="slidesidebar">Flip Side-Search</button>
Footer
</footer>
</div>
</body>
</html>
You can pass a function to the slideToggle to be called when the animation is complete. There you can manipulate the content how ever you like.
$("#sidebar").slideToggle("slow", function(){
$("#content").css({width:"100%", float:"left"});
});
Or you could have the content grow at the same time:
$(document).ready(function(){
$("#slidesidebar").click(function(){
$("#sidebar").slideToggle("slow");
$("#content").animate({width:"100%"});
});
});
If this doesn't do the trick, try playing with the "float" parameter of content.
I have recently noticed, that in some versions of Google Chrome the classic css-only sticky footer solution used by compass do not work, when contents is generated by script. The footer just cover the contents instead of moving down. The layout will change to correct one when you resize your window. The css/html in compass is based on solution provided on http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
}
.footer, .push {
height: 4em;
}
With following html:
Any ideas, how to fix this?
<html>
<head>
<link rel="stylesheet" href="layout.css" ... />
</head>
<body>
<div class="wrapper">
<p>Your website content here.</p>
<div class="push"></div>
</div>
<div class="footer">
<p>Copyright (c) 2008</p>
</div>
</body>
</html>
I think you should add clear:both
.footer, .push
{
clear:both;
height: 4em;
}
or try this link
http://css-tricks.com/snippets/css/sticky-footer/
I had this problem as well. A dynamic table was getting overlapped, but none of my other pages. This solution worked for me.
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto; /*!! margin: 0 auto -4em; !!*/
}
html,body {
margin:0;
padding:0;
height:100%;
}
p {
margin-top:0;
}
.push{
height:4em;
}
.wrapper {
position:relative;
z-index:1;
margin:0 auto;
min-height: 100%;
height: auto;
}
.footer{
position:relative;
z-index:2;
height: 4em;
margin-top:-4em; /*!!!*/
}
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>