I have a set height footer div that fills the bottom of the screen, 100px wide, with a black background it sits over a body Back ground image. There are a few pages with not a lot of content. The footer rises up the page and because it has a fixed height, under the footer you see the body BG image. How would I go about using CSS to make sure that the whole screen below the raised footer is black, without having to extend the set height of the footer div?
You can give "min-height" to the pages that .So, although content is little, the footer will be same.Since content area has "min-height"
You can have a look at here for "min-height"
And here is sample code;
.content {
min-height: 600px;
}
There are some published solutions to this. The core of them all seems to be applying minimum heights (including some hacks for earlier versions of IE) to a block-level element that wraps all non-footer content and has a padding equal to the footer's height. The footer then has its height and negative top margin set explicitly (to the same value as the wrapper's bottom-padding.
Code example from the CSS Sticky Footer solution.
HTML:
<body>
<!--[if !IE 7]>
<style type="text/css">
#wrap {display:table;height:100%}
</style>
<![endif]-->
<div id="wrap">
<div id="main">
</div>
</div>
<div id="footer">
</div>
</body>
CSS:
html, body {height: 100%;}
#wrap {min-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;/
}
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 have a main div at the center of the screen at the shape of the touch pad.
Within it I have another div in which I want to display output. However, the pad itself is set on % to react on different resolutions.
See the pic below, yellow window is the whole pad and the red window is the content screen.
Now I want to make that red window exactly as the pad's screen is set on % so it could adapt on different resolutions, is there a simple way of doing that?
Yellow's css:
#mainWindow{
margin-left:auto;
margin-right:auto;
background-image:url("../images/mainWindow.png");
background-size:100% 100%;
height:100%;
width:80%;
position: relative;
border-style:solid;
border-width:3px;
border-color:yellow;
}
The red one doesn't really have anything.
I hope you understood me. Thanks beforehand.
EDIT:
html code for the screens:
<div id='mainWindow'>
<div id='screen'>
</div>
</div>
In order for a DIV to have 100% height, you need to make its parents 100% height as well:
body, html {height:100%}
Slightly confusing prompt, but see if this works for you:
http://jsfiddle.net/T3MHZ/
HTML snippet:
<html>
<head></head>
<body>
<div id='mainWindow'>
<div id='screen'></div>
</div>
</body>
</html>
CSS styles:
html, body{
width:100%;
height:100%;
margin:0;
}
#mainWindow{
margin:0;
height:100%;
width:100%;
/* SET THE PADDING TO THE PX MEASURE OF THE TABLET BORDER */
padding:50px 40px 50px 40px;
/* box sizing will make sure that the usable content size is minus the padding value */
box-sizing:border-box;
position: relative;
border:1px solid black;
}
#screen{
width:100%;
height:100%;
border:1px solid red;
}
By using a combination of measured padding on #mainWindow to account for the tablet border, and box sizing of border-box to assure exact fit of the #screen content, this should give you the flexible layout you're looking for.
Don't forget your viewport meta tag! ;)
I'm not sure if I'm understanding what you want correctly, but try
height: 100%;
on red.
min-height:100%;
You have no content, it's going 100% of it's parent content. Diodeus's answer would work as well for the same reason, if the body, html are 100% window height then the divs inside will look at that as content.
http://jsfiddle.net/calder12/Jq7xR/
<body>
<div class="container">
<div class="outside">
<div class="inside"></div>
</div>
</div>
</body>
.container{height:250px;width:400px;}
.outside{border:1px solid red; min-height:100%; height:100%;}
.inside{border:1px solid green; min-height:82.5%; margin:5%}
To be honest even my brain is struggling with the 82.5% height to get the margins to work right =/ But I do believe that is what you're after.
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>
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;
}
Im not too great at CSS but hopefully someone on here can help. I have the following mockup. (i have stripped out my content to make it easy to view)
<body>
<div id="container">
<div id="header"></div>
<div id="body">
<div id="navBar"></div>
<div id="mainContent"></div>
</div>
<div id="footer"></div>
</div>
</body>
my CSS is as follows:
html,
body {
margin:0;
padding:0;
height:100%;
}
#container {
min-height:100%;
position:relative;
}
#header {
background:#ff0;
padding:10px;
}
#body {
padding:10px;
padding-bottom:60px; /* Height of the footer */
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px; /* Height of the footer */
background:#6cf;
}
now im unsure as to how to get the "navBar" to be the page height. I've tried adding height: 100% but that doesnt work.
Thanks,
Matt
Giving an element height: 100% will give it a height equal to that of its containing element, which in your case is #body. Since body in your example is only as big as it needs to be to hold its content, #navBar will be 100% of that height.
To fix this, you can make #container and #body height:100% to make them as tall as tho body tag, which takes up the whole page:
#container {
height:100%
}
#body{
height:100%;
}
In the interest of completeness, you could also set the top and bottom of #navBar:
position: absolute;
top: 20px;
bottom: 60px; /* height of footer */
To understand the difference, play around with This JS Fiddle. Mess around with the height and top, bottom, position properties to see how your changes affect the layout; just don't use both positioning methods at once!
Your issue appears to be that each parent DIV all the way up to the BODY tag must explicitely have a height of 100% for #navBar to have 100% height. This means you would also have to set the height of #body to 100% as well, since it is the parent container of #navBar.
Have a look at this site - I assume you want a two column layout - this site will show you how to do what you want. Hope it helps.