I've set up my problem here.
I have 2 divs, each outlined with a black border. One is my content div (containing text), with height set to 600px; The other div, containing a banner image, I'd like to use as my page's footer. I am able to do this in absolute positioning by simply marking the div with "bottom: 25px." However, what I'm hoping to do is to make the footer div "stop" when it collides with the content div as you shrink the size of your browser window.
Any ideas? Thanks much in advance!
Here's how I do it. Got the technique from http://ryanfait.com/sticky-footer/. He adds an extra "push" div but I used the wrapper's padding bottom to serve the same function (no need for empty DIVs).
Here's an example (you can view it at http://ve.savantcoding.com/example.html)
<html>
<head>
<title>sample footer</title>
<style type="text/css">
* {
margin: 0;
}
html, body {
height: 100%;
}
#wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -200px; /* bottom margin is negative footer height */
}
#content {
padding-bottom: 200px /* bottom padding is footer height */
}
#footer {
height: 200px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="content">your content</div>
</div>
<div id="footer">your banner</div>
</body>
</html>
Related
Sorry if this has already been asked, but I wasn't sure of the correct wording, so I couldn't search it up. I have an image that is very large width-wise, and I want it to go off of the browser window when using a smaller resolution, and if you have a bigger resolution, it will show more of the image (width wise ONLY, height needs to remain the same), this way it won't matter what resolution you're browsing at, the image will still be the same height, so the page content will stay mostly the same. Just putting it in with img tags adjusts the whole picture to fit the browser window, changing the height in the process. Below is a very crude diagram of what I want to happen.
The simple option is to add overflow: hidden; to the image container. E.g. http://codepen.io/pageaffairs/pen/Etikh
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
.wrap {width: 60%; margin: 0 auto; background: ##e7e7e7; padding: 20px;}
.container {overflow: hidden;}
</style>
</head>
<body>
<div class="wrap">
<div class="container">
<img src="http://placehold.it/1024X600" alt="">
</div>
</div>
</body>
</html>
Use this code:
CSS:
.container {
width:100%;
height:100%;
position:fixed !important;
top:0;
left:0;
background-color:red;
right:0;
bottom:0;
}
.container img {
height:inherit;
width:100%;
}
The container is fixed and it is 100% width and height with its top, left, right, bottom values all set to zero pixels. The img in the container inherits the height set in the container block but the width is 100%.
HTML:
<div class="container">
<img src="http://placehold.it/1024X768">
</div>
JsFiddle:
http://jsfiddle.net/CVNf9/
I think this is what you're looking for:
.image-mask {
margin: 10px;
border: dotted 2px red;
overflow: hidden;
}
.image-mask img {
display: block;
width:1024px;
height:768px;
}
<div class="image-mask">
<img src="http://yourdomain.com/images/yourimage.png">
</div>
If necessary set a max-width on .image-mask (say if it has an actual border you want to display or something) to prevent it getting larger than the image width, or set margin: 0 auto to center it, etc.
Fiddle: http://jsfiddle.net/Aj59Z/2/
As simple as that:
img {
width: 1000px; /* Width of your img */
height: 600px; /* Height of your img */
}
And to avoid horizontal scroll bar, wrap your image with some element and set its overflow attribute to hidden, width to 100%
JSFiddle
http://jsfiddle.net/SVxJ4/1/
I want to create a webpage that has a fixed part at the bottom and, at the top, a part that will be filled dynamically with content, this dynamic part should have a scroll bar should the added content not fit, in order to stay above the fixed part.
style.css:
.action-box{
position: fixed;
bottom: 15px;
margin-top: 10px;
width: 100%;
}
index.html:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div>
<!-- this will be filled with content -->
</div>
<div class="action-box">
<!-- this is the fixed part -->
</div>
</body>
</html>
You can see in this fiddle that the two divs overlap.
How can I make the first div scrollable, so that it won't slide over or below the last div?
I'll propose using dynamic resizing, depending on window height:
Here is jQuery example:
function adjustBlocks() {
var winH = $(window).height();
var boxH = $('#action-box').height();
$('#content').height((winH - boxH) + 'px');
}
$(document).ready(adjustBlocks);
$(window).resize(adjustBlocks);
Sample HTML:
<div id="content"></div>
<div id="action-box"></div>
And sample CSS:
#content{
width: 100%;
background: #eee;
overflow-y: scroll;
}
#action-box{
width: 100%;
background: #ffccaa;
}
Of course, you can easily add any margins and mention them in jQuery resizing function.
Oh, and the example on jsfiddle
The easiest way is to apply margin-bottom to the div on top that matches the total height of the fixed div at the bottom, and you have to give the div at the bottom a height along with a background color so the other div doesn't show through.
.action-box{
position: fixed;
bottom: 0px;
height: 20px;
padding-bottom: 10px;
width: 100%;
background-color: white;
}
.content {margin-bottom: 50px}
http://jsfiddle.net/RdGXt/151/
Give it a css class with a fixed height and overflow: scroll;
I've a page with a main scrollable div like this:
<html>
<head>
<style type="text/css">
#mydiv{
overflow: auto;
width: 300px;
}
</style>
</head>
<body>
<div id="mydiv">content</div>
</body>
</html>
How can I have a fixed margin (for example 30px) at the bottom of the page?
The div can have a small or big height (depending on the screen size), but the margin should be fixed.
Thanks in advice
You can create another div either inside your existing or outside depending on how you want your page to layout. Then apply this style to the div #myftr { margin: 30px; }
Something like this.
http://jsfiddle.net/rhoenig/XxuvE/
you can simply define the margin-bottom in your css like this :-
#mydiv{
overflow: auto;
width: 300px;
border:1px solid red;
margin-bottom:30px;
}
or see the demo :-http://jsfiddle.net/XxuvE/4/
I've found 2 different implementations of a CSS sticky footer:
Ryan Fait sticky footer - http://ryanfait.com/sticky-footer/
Steve Hatcher sticky footer - http://www.cssstickyfooter.com/
Could someone explain the difference between how each of them work?
And if there are other known implementations, could you please post a comment or edit this question?
They are pretty similar in terms of function. The first forces a div to the full height of the page and then give it a negative margin the size of the footer.
html, body {
height: 100%; /*set 100% height*/
}
.wrapper {
min-height: 100%; /*content 100% height of page */
height: auto !important;
height: 100%;
margin: 0 auto -142px; /* negative value causes wrappers height to become (height of page) minus 142px, just enough room for our footer */
}
.footer, .push {
height: 142px; /*Footer is the footer, push pushes the page content out of the footers way*/
}
What this does is makes sure that all content within the wrapping div is 100% of the page height minus the height of the footer. So that as long as the footer is the same size as the negative margin it will stick in the gap left and appear at the bottom of the element.
The second also forces the content to be 100% of the height of the page.
html, body {height: 100%;} /*set 100% height*/
#wrap {min-height: 100%;} /* make content 100% height of screen */
It then creates a space at the bottom of the main content the same size as the footer.
#main {overflow:auto;
padding-bottom: 150px;} /* wrapper still 100% height of screen but its content is forced to end 150px before it finishes (150px above bottom of screen) */
Then using position relative and a negative top margin forces the footer to appear 150px above its normal position (in the space it just made).
#footer {position: relative;
margin-top: -150px; /* Make footer appear 150px above its normal position (in the space made by the padding in #main */
height: 150px;
clear:both;}
Note: This only works so long as your page content is kept within .wrapper and #main inside #wrap respectively, and your footer is outside of these containers.
If you didn't understand any part of that leave me a comment and I'll try to answer it.
Edit: In response to user360122
HTML markup for first:
<html>
<body>
<div class="wrapper">
<!--Page content goes here-->
<div class="push">
<!--Leave this empty, it ensures no overflow from your content into your footer-->
</div>
</div>
<div class="footer">
<!--Footer content goes here-->
</div>
<body>
</html>
HTML markup for second:
<html>
<body>
<div id="wrap">
<div id="main">
<!--Page content goes here-->
</div>
</div>
<div id="footer">
<!--Footer content goes here-->
</div>
</body>
</html>
Remember to include the stylesheet and declare doctype .etc (these aren't full html pages).
There is an example in the bootstrap documentation which seems to be very simple: http://getbootstrap.com/examples/sticky-footer/
No wrapper or push needed.
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 60px;
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
background-color: #f5f5f5;
}
I have div that contains 2 divs in it. One of the child divs has static height 2em, and I want the other one to vertically fill the rest of the space of the parent div. How do I do this?
Edit: I need the parent div to fill the screen.
This depends on exactly what you want to achieve. Getting a fixed top and variable bottom where the container is only as large as it needs to be for the two children.
Assuming:
<div id="parent">
<div id="top"></div>
<div id="bottom"></div>
</div>
use:
#top { height: 2em; }
and the bottom div will be as large as it needs to be. You can make the bottom fixed height and achieve the same thing.
But I suspect what you want to do is have the outer div fixed height (say 100%). That gets much harder. The problem is that there is no way in CSS of saying "height of 100% minus 2em" without using an (ill-advised) CSS expression.
One approach is to overlay the top with the bottom.
#outer { position: relative; }
#top { position: absolute; height: 2em; top: 0; left: 0; width: 100%; }
#bottm { height: 100%; padding-top: 2em; }
The top div actually overlays the bottom. This is fine so long as you don't want a border.
You can use Faux Columns if you're using an image for the background or just move the background color back to #parent to give the appearance of filling the screen with the #bottom div. It would fill the page by giving it a 100% height (as long as html and body also get height: 100%).
Example:
<head>
<title>TITLE</title>
<style type="text/css">
html, body { height: 100%; margin: 0; padding: 0; }
#parent { height: 100%; background: #f08; }
#top { height: 2em; background: #80f; }
</style>
</head>
<body>
<div id="parent">
<div id="top">TOP DIV</div>
<div id="bottom">THE REST</div>
</div>
Since CSS is just about styling, giving the appearance of 100% height is the same as having 100% height. Right?