I have a background image on the body of my web page. I have used background-size:cover so that the image stretches across the body whilst maintaining the aspect ratio of the image. I would like this to be the same for IE7 + IE8.
I have looked around and seen the following code:
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='AutumnWinter_4.jpg',
sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='AutumnWinter_4.jpg',
sizingMethod='scale')";
But this doesn't preserve the aspect ratio, which is really bad for the website we are aiming at.
Is there any way to do this? Without hitting up jQuery?
What's the reason of not using jQuery? You could load it in conditional comments for IE<8 only, so that for every other modern browser jQuery is not loaded.
Also consider that IE7 has a very low market share (2,52%, April 2012) so it can be acceptable to load ~ 25kb extra for that specific browser if this feature is so important for your site/application.
So, I've found this plugin for jQuery: https://github.com/louisremi/jquery.backgroundSize.js
A jQuery cssHook adding support for "cover" and "contain" to IE6-7-8, in 1.5K
See Github project page for more info.
backgroundSize.js will not actually stretch the bg image in IE7, it seems to just center it at the original size. See their demo and click on 'Check what IE6-7-8 users would normally see.'
#danRhul
I have read that backstretch will work in IE7+
Good luck!
You could just fake a background image with an actual image. It's a bit more HTML editing and certainly not ideal, but since when has handling IE ever been ideal?
<body>
<img id="mainBG" src="mainBG.jpg" />
<div id="content">
[ ... ]
Then style it accordingly
body{
position:relative;
}
#mainBG{
width:100%
position:absolute;
top:0px;
left:0px;
}
Should be cross-browser if I'm not mistaken.
I've used the following (http://css-tricks.com/perfect-full-page-background-image/) and it works well in ie7.
HTML:
<body>
<img class="bg" src="filename">
</body>
CSS:
.bg {
/* Set rules to fill background */
min-height: 100%;
min-width: 1024px;
/* Set up proportionate scaling */
width: 100%;
height: auto;
/* Set up positioning */
position: fixed;
top: 0;
left: 0;
}
#media screen and (max-width: 1024px) { /* Specific to this particular image */
img.bg {
left: 50%;
margin-left: -512px; /* 50% */
}
}
I know this is now an old question, but I thought I'd share a solution I came up with for anyone else who finds this question on google, like I did.
I was trying to get an image to cover a site's background and came across this question, however none of the solutions worked for me. I came up with this instead:
HTML: move the background image to an <img />, make it the first thing in your <body>.
<html>
<body>
<img class="background" src="kitty.jpg" />
<div class="content">
...
CSS: make the background appear under the content, set it's min-width/height to 100%.
html {
height: 100%
}
body .background {
position: absolute;
z-index: -1;
min-height: 100%;
min-width: 100%;
}
It's the min-height and min-width here that does the magic. Do not give the image a width and height in the HTML or CSS, or the aspect ratio will change.
The above will work for IE7 and IE8. If you would like to support IE6, you could set a centered image fallback like this:
CSS: If IE6, don't display the image, use a background image instead.
body {
_background: url("kitty.jpg") 50% top no-repeat;
}
body .background {
_display: none;
}
(N.B. If you don't like the underscore hack to target IE6, you could use conditionals instead – that's what the HTML5 Boilerplate does.)
After much trial and error, the best solution was guessing it!
The following worked for me.
body {
background-size:100%;
}
You have two options to achieve this with just CSS:
Use Object-fit: cover. The only problem with this is that it will not work in all browsers
If you want cross browser support, you can follow primitive CSS approach:
Position the image inside the container with absolute and then place it right at the centre using the combination:
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
Note:
Since transform ONLY works from IE9, you can make use of filters. Here is an answer for this.
Once it is in the centre, you can do,
// For vertical blocks (i.e., where height is greater than width)
height: 100%;
width: auto;
// For Horizontal blocks (i.e., where width is greater than height)
height: auto;
width: 100%;
This makes the image get the effect of Object-fit:cover.
Here is a demonstration of the above logic.
https://jsfiddle.net/furqan_694/s3xLe1gp/
Unfortunately, most solutions to this kind of problem either depend on css3 or ignore the native functionality of "cover" that preserves the original aspect ratio of the image. https://github.com/louisremi/background-size-polyfill is supposed to preserve ratio, but I could never get it to work completely when stretching the browser in certain ways (operator error, I'm sure :-) ). To solve this problem, I wrote a jquery script that I've tested on safari, chrome, ff and ie8+. You'll notice that you will have to use an img positioned absolutely instead of css background-image. Just add the bgImg as an id in the tag in html.
CSS:
.container { height: auto; overflow:hidden; position:relative;}
.container #bgImg { position:absolute; z-index:-1;}
You're image selector will have to be positioned absolutely to get it to sit behind the content. That means that you're parent container has to have position: relative and then overflow: hidden so that whatever overflows from the image (since you're maintaining ratio, some pieces of it inevitable will) is hidden. Be aware also that certain display tags in the parent container will break the hiding of the overflow.
JQUERY:
$(window).load(function () {
// only do this once and pass as function parameters, because chrome
// and safari have trouble not only with document.ready but window.resize
var img = new Image();
img.src = $("#bgImg").attr('src');
var $width_orig = img.width;
var $height_orig = img.height;
resizeBGImage($width_orig, $height_orig);
$(window).resize(function () {
resizeBGImage($width_orig, $height_orig);
});
});
function resizeBGImage($width_img_orig, $height_img_orig) {
// get dimensions of container
var $width_container = $('.container').outerWidth();
var $height_container = $('.container').outerHeight();
// calculate original aspect ratio and ratio of the container
var $imageratio = $width_img_orig / $height_img_orig;
var $containerratio = $width_container / $height_container;
var $wdiff = $width_container - $width_img_orig;
var $hdiff = $height_container - $height_img_orig;
// original size, so just set to original
if (($wdiff == 0) && ($hdiff == 0)) {
$("#bgImg").css('width', $width_img_orig);
$("#bgImg").css('height', $height_img_orig);
}
// if container is smaller along both dimensions than the original image,
// set image to container size
else if (($wdiff < 0) && ($hdiff < 0)) {
$("#bgImg").css('width', $width_img_orig);
$("#bgImg").css('height', $height_img_orig+1); // adding one because chrome can't do math
}
// if container is wider than long relatiave to original image aspect ratio
// set width to container width and calculate height
else if ($containerratio > $imageratio) {
$("#bgImg").css('width', $width_container);
// calculate height using orig aspect ratio and assign to image height
$("#bgImg").css('height', (($width_container * $height_img_orig) / $width_img_orig) + 1); // adding one because chrome can't do math
}
// else container is taller than long relatiave to original image aspect ratio
// set height to container height and calculate width
else {
// set the image height to container height
$("#bgImg").css('height', $height_container + 1); // adding one because chrome can't do math
// calculate width using orig aspect ratio and assign to image width
$("#bgImg").css('width', (($height_container * $width_img_orig) / $height_img_orig));
}
$("#bgImg").css('left', (($width_container - $("#bgImg").width()) / 2).toString() + 'px');
};
Note the use of $(window).load() instead of $(document).ready(). Chrome and safari seem to have issues with the latter since in those browsers, the background image may not be fully loaded when the DOM is. Using $(window).load() ensures all window elements are in place before the script runs.
Sounds like you need a 'shim' or 'polyfill' like Modernizer:
http://modernizr.com/docs/#html5inie
Related
I'm making my first website and my meta tag just defines a constant width instead of taking the device width, because I am having fun with CSS animations and wanted to avoid making it dynamic. Most of it looks fine on mobile except things that need to be centered. When I center it based on percentages, it centers based on the width I set (my viewport) as opposed to the width of the device. This is not a bug, of course, but I was wondering if there was a way for me to get the width of the device even if I don't set it as the viewport, so I can just calculate the left attribute to center it. Any ideas? Thanks!
I didn't put code because there really aren't any issues, it is more of a how-to question.
To find the current width of your html body (device), you can try this javascript code window.innerWidth;
Try running this code and resize your windows to different widths:
function myFunction() {
var wid = window.innerWidth;
document.getElementById("display").innerHTML = "Width: " + wid;
}
<button onclick="myFunction()">Show</button>
<div id="display"></div>
ps: click on Run Code and then click on full page so you can resize your browser and test my snippet. It will show you the current width.
Sometimes some users do not maximize their browsers when it comes to desktop devices. But you can try taking the "body" width of your application by creating a variable. Something more advanced is to check if there is any positive variation of that value during navigation. On mobile devices that value would be a bit more precise, unless the screen is rotated.
your_var_name = document.body.clientWidth
I recommend flex css attribute.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
html
<div class="wrapper">
wrapper
<div class="inner"> inner </div>
</div >
css
.wrapper {
display: flex;
justify-content: center;
width: 200px;
}
.wrapper .inner {
width: 50px;
}
or
Using absolute and relative
wrapper {
position: absolute;
width: 200px;
}
wrapper parent {
position: relative;
width: 50px;
left: calc( 100% - 25px );
}
I want to make body have 100% of the browser height. Can I do that using CSS?
I tried setting height: 100%, but it doesn't work.
I want to set a background color for a page to fill the entire browser window, but if the page has little content I get a ugly white bar at the bottom.
Try setting the height of the html element to 100% as well.
html,
body {
height: 100%;
}
Body looks to its parent (HTML) for how to scale the dynamic property, so the HTML element needs to have its height set as well.
However the content of body will probably need to change dynamically.
Setting min-height to 100% will accomplish this goal.
html {
height: 100%;
}
body {
min-height: 100%;
}
As an alternative to setting both the html and body element's heights to 100%, you could also use viewport-percentage lengths.
5.1.2. Viewport-percentage lengths: the ‘vw’, ‘vh’, ‘vmin’, ‘vmax’ units
The viewport-percentage lengths are relative to the size of the initial containing block. When the height or width of the initial containing block is changed, they are scaled accordingly.
In this instance, you could use the value 100vh - which is the height of the viewport.
Example Here
body {
height: 100vh;
padding: 0;
}
body {
min-height: 100vh;
padding: 0;
}
This is supported in most modern browsers - support can be found here.
If you have a background image then you will want to set this instead:
html{
height: 100%;
}
body {
min-height: 100%;
}
This ensures that your body tag is allowed to continue growing when the content is taller than the viewport and that the background image continues to repeat/scroll/whatever when you start scrolling down.
Remember if you have to support IE6 you will need to find a way to wedge in height:100% for body, IE6 treats height like min-height anyway.
If you want to keep the margins on the body and don't want scroll bars, use the following css:
html { height:100%; }
body { position:absolute; top:0; bottom:0; right:0; left:0; }
Setting body {min-height:100%} will give you scroll bars.
See demo at http://jsbin.com/aCaDahEK/2/edit?html,output .
After testing various scenarios, I believe this is the best solution:
html {
width: 100%;
height: 100%;
display: table;
}
body {
width: 100%;
display: table-cell;
}
html, body {
margin: 0;
padding: 0;
}
It is dynamic in that the html and the body elements will expand automatically if their contents overflow. I tested this in the latest version of Firefox, Chrome, and IE 11.
See the full fiddle here (for you table haters out there, you can always change it to use a div):
https://jsfiddle.net/71yp4rh1/9/
With that being said, there are several issues with the answers posted here.
html, body {
height: 100%;
}
Using the above CSS will cause the html and the body element to NOT automatically expand if their contents overflow as shown here:
https://jsfiddle.net/9vyy620m/4/
As you scroll, notice the repeating background? This is happening because the body element's height has NOT increased due to its child table overflowing. Why doesn't it expand like any other block element? I'm not sure. I think browsers handle this incorrectly.
html {
height: 100%;
}
body {
min-height: 100%;
}
Setting a min-height of 100% on the body as shown above causes other problems. If you do this, you cannot specify that a child div or table take up a percentage height as shown here:
https://jsfiddle.net/aq74v2v7/4/
Hope this helps someone. I think browsers are handling this incorrectly. I would expect the body's height to automatically adjust growing larger if its children overflow. However, that doesn't seem to happen when you use 100% height and 100% width.
html, body
{
height: 100%;
margin: 0;
padding: 0;
}
A quick update
html, body{
min-height:100%;
overflow:auto;
}
A better solution with today's CSS
html, body{
min-height: 100vh;
overflow: auto;
}
What I use on the start of literally every CSS file I use is the following:
html, body{
margin: 0;
padding: 0;
min-width: 100%;
width: 100%;
max-width: 100%;
min-height: 100%;
height: 100%;
max-height: 100%;
}
The margin of 0 ensures that the HTML and BODY elements aren't being auto-positioned by the browser to have some space to the left or right of them.
The padding of 0 ensures that the HTML and BODY elements aren't automatically pushing everything inside them down or right because of browser defaults.
The width and height variants are set to 100% to ensure that the browser doesn't resize them in anticipation of actually having an auto-set margin or padding, with min and max set just in case some weird, unexplainable stuff happens, though you probably dont need them.
This solution also means that, like I did when I first started on HTML and CSS several years ago, you won't have to give your first <div> a margin:-8px; to make it fit in the corner of the browser window.
Before I posted, I looked at my other fullscreen CSS project and found that all I used there was just body{margin:0;} and nothing else, which has worked fine over the 2 years I've been working on it.
Hope this detailed answer helps, and I feel your pain. In my eyes, it is dumb that browsers should set an invisible boundary on the left and sometimes top side of the body/html elements.
Here:
html,body{
height:100%;
}
body{
margin:0;
padding:0
background:blue;
}
You can also use JS if needed
var winHeight = window.innerHeight ||
document.documentElement.clientHeight ||
document.body.clientHeight;
var pageHeight = $('body').height();
if (pageHeight < winHeight) {
$('.main-content,').css('min-height',winHeight)
}
I would use this
html, body{
background: #E73;
min-height: 100%;
min-height: 100vh;
overflow: auto; // <- this is needed when you resize the screen
}
<html>
<body>
</body>
</html>
The browser will use min-height: 100vh and if somehow the browser is a little older the min-height: 100% will be the fallback.
The overflow: auto is necessary if you want the body and html to expand their height when you resize the screen (to a mobile size for example)
CSS Height That Works in Both Modern and Legacy Browsers
Most of the other solutions posted here will not work well in legacy browsers! And some of the code people posted will cause a nasty overflow of text beyond 100% height in modern browsers where text flows past background colors, which is bad design! So please try my code solution instead.
The CSS code below should support flexible web page height settings correctly in all known browsers, past and present:
html {
height: 100%; /* Fallback CSS for IE 4-6 and older browsers. Note: Without this setting, body below cannot achieve 100% height. */
height: 100vh;/* Overrides 100% height in modern HTML5 browsers and uses the viewport's height. Only works in modern HTML5 browsers */
}
body {
height: auto; /* Allows content to grow beyond the page without overflow */
width: auto; /* Allows content to grow beyond the page without overflow */
min-height: 100%; /* Starts web page with 100% height. Fallback for IE 4-6 and older browsers */
min-height: 100vh;/* Starts web page with 100% height. Uses the viewport's height. Only works in modern HTML5 browsers */
overflow-y: scroll;/* Optional: Adds an empty scrollbar to the right margin in case content grows vertically, creating a scrollbar. Allows for better width calculations, as the browser pre-calculates width before scrollbar appears, avoiding page content shifting.*/
margin: 0;
padding: 0;
background:yellow;/* FOR TESTING: Next add a large block of text or content to your page and make sure this background color always fills the screen as your content scrolls off the page. If so, this works. You have 100% height with flexible content! */
}
NOTES ON THE CODE ABOVE
In many older, as well as newer browsers, if you do not set 100% height on the <html> selector, body will never achieve 100% height! So that is critical here.
The new viewport units ("vh") are redundant on the body selector and not necessary as long as you have set html selector to a height of either 100% or 100vh. The reason is the body always derives its values from the html parent. The exception is a few very old browsers from the past, so its best to set some height value for the body.
Some modern browsers using the body selector will not know how to inherit the viewport height directly. So again, always set your html selector to 100% height! You can still use "vh" units in body to bypass the parent html value and get its property dimensions directly from the viewport in most modern browsers, however. But again, its optional if the parent or root html selector has 100% height, which body will always inherit correctly.
Notice I've set body to height:auto, not height:100%. This collapses the body element around content initially so it can grow as content grows. You do NOT want to set body height and width to 100%, or specific values as that limits content to the body's current visual dimensions, not its scrollable dimensions. Anytime you assign body height:100%, as soon as content text moves beyond the browser's height, it will overflow the container and thus any backgrounds assigned to the original viewport height, creating an ugly visual! height:auto is your best friend in CSS!
But you still want body to default to 100% height, right? That is where min-height:100% works wonders! It will not only allow your body element to default to 100% height, but this works in even the oldest browsers! But best of all, it allows your background to fill 100% and yet stretch farther down as content with height:auto grows vertically.
Using overflow:auto properties are not needed if you set height:auto on the body. That tells the page to let content expand height to any dimension necessary, even beyond the viewport's height, if it needs to and content grows longer than the viewport page display. It will not break out of the body dimensions. And it does allow scrolling as needed. overflow-y:scroll allows you to add an empty scrollbar to the right of the page content by default in every web browser. The scrollbar only appear inside the scroll bar area if content extends beyond 100% height of the viewport. This allows your page width, and any margins or paddings to be calculated by the browser beforehand and stop the pages from shifting as users view pages that scroll and those that do not. I use this trick often as it sets the page width perfectly for all scenarios and your web pages will never shift and load lightning fast!
I believe height:auto is the default on body in most UA browser style sheets. So understand most browsers default to that value, anyway.
Adding min-height:100% gives you the default height you want body to have and then allows the page dimensions to fill the viewport without content breaking out of the body. This works only because html has derived its 100% height based on the viewport.
The two CRITICAL pieces here are not the units, like % or vh, but making sure the root element, or html, is set to 100% of the viewport height. Second, its important that body have a min-height:100% or min-height:100vh so it starts out filling the viewport height, whatever that may be. Nothing else beyond that is needed.
STYLING HEIGHT FOR LEGACY BROWSERS
Notice I have added "fallback" properties for height and min-height, as many browsers pre-2010 do not support "vh" viewport units. It's fun to pretend everyone in the web world uses the latest and greatest but the reality is many legacy browsers are still around today in big corporate networks and many still use antiquated browsers that do not understand those new units. One of the things we forget is many very old browsers do not know how to fill the the viewport height correctly. Sadly, those legacy browsers simply had to have height:100% on both the html element and the body as by default they both collapsed height by default. If you did not do that, browser background colors and other weird visuals would flow up under content that did not fill the viewport. The example above should solve all that for you and still work in newer browsers.
Before modern HTML5 browsers (post-2010) we solved that by simply setting height:100% on both the html and body selectors, or just min-height:100% on the body. So either solution allows the code above to work in over 20+ years of legacy web browsers rather than a few created the past couple of years. In old Netscape 4 series or IE 4-5, using min-height:100% instead of height:100% on the body selector could still cause height to collapse in those very old browsers and cause text to overflow background colors. But that would be the one issue I could see with this solution.
Using my CSS solution, you now allow your website to be viewed correctly in 99.99% of browsers, past and present rather than just 60%-80% of browsers built the past few years.
Good Luck!
Try
<html style="width:100%; height:100%; margin: 0; padding: 0;">
<body style="overflow:hidden; width:100%; height:100%; margin:0; padding:0;">
Please check this:
* {margin: 0; padding: 0;}
html, body { width: 100%; height: 100%;}
Or try new method Viewport height :
html, body { width: 100vw; height: 100vh;}
Viewport:
If your using viewport means whatever size screen content will come full height fo the screen.
If you don't want the work of editing your own CSS file and define the height rules by yourself, the most typical CSS frameworks also solve this issue with the body element filling the entirety of the page, among other issues, at ease with multiple sizes of viewports.
For example, Tacit CSS framework solves this issue out of the box, where you don't need to define any CSS rules and classes and you just include the CSS file in your HTML.
html {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
min-height: 100%;
}
html body {
min-height: 100%
}
Works for all major browsers: FF, Chrome, Opera, IE9+. Works with Background images and gradients. Scrollbars are available as content needs.
For the true purists, this one respects the default margins of the browser, and prevents the undesired scroll generated by the other methods, besides growing if the content grows. Tested in Chrome, Safari and Firefox. The backgrounds are just for show...
html {
display: flex;
flex-direction: column;
height: 100%;
background: red;
}
body {
flex:1;
background: green;
}
Only with 1 line of CSS… You can get this done.
body{ height: 100vh; }
all answers are 100% correct and well explained,
but i did something good and very simple to make it responsive.
here the element will take 100% height of view port but when it comes to mobile view it don't look good specially on portrait view ( mobile ), so when view port is getting smaller the element will collapse and overlap on each other. so to make it little responsive here is code.
hope someone will get help from this.
<style>
.img_wrap{
width:100%;
background: #777;
}
.img_wrap img{
display: block;
width: 100px;
height: 100px;
padding: 50px 0px;
margin: 0 auto;
}
.img_wrap img:nth-child(2){
padding-top: 0;
}
</style>
<div class="img_wrap">
<img src="https://i.pinimg.com/originals/71/84/fc/7184fc63db0516a00e7d86900d957925.jpg" alt="">
<img src="https://i.pinimg.com/originals/71/84/fc/7184fc63db0516a00e7d86900d957925.jpg" alt="">
</div>
<script>
var windowHeight = $(window).height();
var elementHeight = $('.img_wrap').height();
if( elementHeight > windowHeight ){
$('.img_wrap').css({height:elementHeight});
}else{
$('.img_wrap').css({height:windowHeight});
}
</script>
here is JSfiddle Demo.
I style the div container - usually the sole child of the body with the following css
.body-container {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
height: 100%;
display: flex;
flex-direction: column;
overflow-y: auto;
}
Over 20 answers later and none seem to have mentioned the factor that I found was the most crucial - the markup.
After trying basically every answer in this question and a few others, I restructured my markup to something like the following:
<body>
<div class="section1">
<nav>
</nav>
...
</div>
<div class="section2">
</div>
</body>
Essentially, it requires two different outer containers. The first container is for the purpose of containing the navbar and extending the background colour/image all the way to the height of the browser, and the second one for containing everything "below the fold" - including the second background colour/image.
This solution allows the first container's background to expand all the way to the bottom while keeping the second container free to take up as much space as it needs.
From this point on, the only CSS needed to get the result both I and the original question wanted is the following:
body {
height: 100%;
}
.section1 {
height: 100%;
background: black; /* for demo purposes */
}
.section2 {
background: white; /* for demo purposes */
}
Here Update
html
{
height:100%;
}
body{
min-height: 100%;
position:absolute;
margin:0;
padding:0;
}
About the extra space at the bottom: is your page an ASP.NET application? If so, there is probably a wrapping almost everything in your markup. Don't forget to style the form as well. Adding overflow:hidden; to the form might remove the extra space at the bottom.
CSS3 has a new method.
height:100vh
It makes ViewPort 100% equal to the height.
So your Code should be
body{
height:100vh;
}
I was wondering if it was a way to prevent resizing after the page has loaded. I have a header coded like this:
header {
position: fixed;
top: 0%;
left: 0%;
height: 60px;
width: 100%;
margin: 0% auto;
}
Can I prevent the width from resizing after the page has loaded, so that if someone zooms or resize their webpage, the header will remain at the 100% it was set to when the page was loaded?
Thanks in advance!
You will have to use some JS to set the width of the header element to a specific width so that re-size and zoom do not affect it.
Here is a jQuery solution using width.
<div>
<header class="to-fixed">Header</header>
</div>
div {
min-height: 250px;
background-color: #CCC;
}
header {
height: 50px;
background-color: yellow;
}
var $to_fixed = $( '.to-fixed' );
$to_fixed.width( $to_fixed.width() );
JSFiddle: https://jsfiddle.net/w9psx3t7/1
What happens here is we use JavaScript to tell us how wide the element is in pixels when it is at 100% width. Then we apply that width directly to the element via the style attribute. The width() method of jQuery allows us to retrieve and set the element's width. Since the width is set directly on the element it will override the default width value set by the CSS.
Notice that once the page has loaded the our JS has set the value and when you re-size the <header> element maintains it's width.
If you mean prevent the user from zooming in, then that's answered here: Prevent zoom cross-browser
And if you want to stop users from resizing their browser window (and generally keeping it the same size at all times) you can do something like:
window.addEventListener('resize', function() {
window.resizeTo(width, height);
});
Both are these are advised against though. I can't really see why you'd want this behaviour.
I don't know of a way to do this in CSS if you're setting the width to 100%. The simple way to do this in Javascript would be doing the following on page load:
var width = document.getElementsByTagName("header")[0].offsetWidth;
document.getElementsByTagName("header")[0].style.width = width;
I would like to know if there is a CSS only solution to make sure that a relatively positioned div would be exactly square under any circumstances; I have a script that would allow a user to upload an image which would apply it to the background image property.
The problem is that the system needs to support images of all sizes, so I can't just set a specific height and width.
Step 1
Simply give the div padding-bottom of 100% to create an intrinsic ratio, which means the div will always be square, no matter the width. Then use position: relative/absolute to position a child element that strechtes the whole container.
This is a common CSS only technique to embed videos at certain aspect ratios, but it's not limited to that specific content type.
I created a fiddle to see it in action. Please note: I used SuitCSS' flex embed component here, but you are in no way bound to using it.
http://jsfiddle.net/mlnmln/tfm6q/1/
HTML:
<div class="FlexEmbed FlexEmbed-ratio">
<div class="UserImage FlexEmbed-content"></div>
</div>
CSS:
/*
* FlexEmbed component from suit-css.
* #see: https://github.com/suitcss/components-flex-embed/blob/master/lib/flex-embed.css
* #see: http://suitcss.github.io/components-flex-embed/test/
* #see: http://alistapart.com/article/creating-intrinsic-ratios-for-video
*/
.FlexEmbed {
display: block;
overflow: hidden;
position: relative;
}
/**
* The aspect-ratio hack is applied to an empty element because it allows
* the component to respect `max-height`. Default aspect ratio is 1:1.
*/
.FlexEmbed-ratio {
display: block;
padding-bottom: 100%;
width: 100%;
}
/**
* Fit the content to the aspect ratio
*/
.FlexEmbed-content {
bottom: 0;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
Step 2
Find a method to resize image to fit/fill its container. I would suggest the following solutions.
Backend: Crop the image through an image manipulation library like GDlib or ImageMagick. That way users will only have to download the data they need.
CSS: Use background-size: cover if your don't care about legacy browser support and don't have access to server side image manipulation.
.UserImage {
background-size: cover;
background-image: url(http://placekitten.com/200/400);
}
3: JS: Position and crop the image container using DOM manipulation. This is basically the same Math as using a server-side image library, with the disadvantage that you place the load on the client (bandwidth and processing).
Hoping to help.
I want to make body have 100% of the browser height. Can I do that using CSS?
I tried setting height: 100%, but it doesn't work.
I want to set a background color for a page to fill the entire browser window, but if the page has little content I get a ugly white bar at the bottom.
Try setting the height of the html element to 100% as well.
html,
body {
height: 100%;
}
Body looks to its parent (HTML) for how to scale the dynamic property, so the HTML element needs to have its height set as well.
However the content of body will probably need to change dynamically.
Setting min-height to 100% will accomplish this goal.
html {
height: 100%;
}
body {
min-height: 100%;
}
As an alternative to setting both the html and body element's heights to 100%, you could also use viewport-percentage lengths.
5.1.2. Viewport-percentage lengths: the ‘vw’, ‘vh’, ‘vmin’, ‘vmax’ units
The viewport-percentage lengths are relative to the size of the initial containing block. When the height or width of the initial containing block is changed, they are scaled accordingly.
In this instance, you could use the value 100vh - which is the height of the viewport.
Example Here
body {
height: 100vh;
padding: 0;
}
body {
min-height: 100vh;
padding: 0;
}
This is supported in most modern browsers - support can be found here.
If you have a background image then you will want to set this instead:
html{
height: 100%;
}
body {
min-height: 100%;
}
This ensures that your body tag is allowed to continue growing when the content is taller than the viewport and that the background image continues to repeat/scroll/whatever when you start scrolling down.
Remember if you have to support IE6 you will need to find a way to wedge in height:100% for body, IE6 treats height like min-height anyway.
If you want to keep the margins on the body and don't want scroll bars, use the following css:
html { height:100%; }
body { position:absolute; top:0; bottom:0; right:0; left:0; }
Setting body {min-height:100%} will give you scroll bars.
See demo at http://jsbin.com/aCaDahEK/2/edit?html,output .
After testing various scenarios, I believe this is the best solution:
html {
width: 100%;
height: 100%;
display: table;
}
body {
width: 100%;
display: table-cell;
}
html, body {
margin: 0;
padding: 0;
}
It is dynamic in that the html and the body elements will expand automatically if their contents overflow. I tested this in the latest version of Firefox, Chrome, and IE 11.
See the full fiddle here (for you table haters out there, you can always change it to use a div):
https://jsfiddle.net/71yp4rh1/9/
With that being said, there are several issues with the answers posted here.
html, body {
height: 100%;
}
Using the above CSS will cause the html and the body element to NOT automatically expand if their contents overflow as shown here:
https://jsfiddle.net/9vyy620m/4/
As you scroll, notice the repeating background? This is happening because the body element's height has NOT increased due to its child table overflowing. Why doesn't it expand like any other block element? I'm not sure. I think browsers handle this incorrectly.
html {
height: 100%;
}
body {
min-height: 100%;
}
Setting a min-height of 100% on the body as shown above causes other problems. If you do this, you cannot specify that a child div or table take up a percentage height as shown here:
https://jsfiddle.net/aq74v2v7/4/
Hope this helps someone. I think browsers are handling this incorrectly. I would expect the body's height to automatically adjust growing larger if its children overflow. However, that doesn't seem to happen when you use 100% height and 100% width.
html, body
{
height: 100%;
margin: 0;
padding: 0;
}
A quick update
html, body{
min-height:100%;
overflow:auto;
}
A better solution with today's CSS
html, body{
min-height: 100vh;
overflow: auto;
}
What I use on the start of literally every CSS file I use is the following:
html, body{
margin: 0;
padding: 0;
min-width: 100%;
width: 100%;
max-width: 100%;
min-height: 100%;
height: 100%;
max-height: 100%;
}
The margin of 0 ensures that the HTML and BODY elements aren't being auto-positioned by the browser to have some space to the left or right of them.
The padding of 0 ensures that the HTML and BODY elements aren't automatically pushing everything inside them down or right because of browser defaults.
The width and height variants are set to 100% to ensure that the browser doesn't resize them in anticipation of actually having an auto-set margin or padding, with min and max set just in case some weird, unexplainable stuff happens, though you probably dont need them.
This solution also means that, like I did when I first started on HTML and CSS several years ago, you won't have to give your first <div> a margin:-8px; to make it fit in the corner of the browser window.
Before I posted, I looked at my other fullscreen CSS project and found that all I used there was just body{margin:0;} and nothing else, which has worked fine over the 2 years I've been working on it.
Hope this detailed answer helps, and I feel your pain. In my eyes, it is dumb that browsers should set an invisible boundary on the left and sometimes top side of the body/html elements.
Here:
html,body{
height:100%;
}
body{
margin:0;
padding:0
background:blue;
}
You can also use JS if needed
var winHeight = window.innerHeight ||
document.documentElement.clientHeight ||
document.body.clientHeight;
var pageHeight = $('body').height();
if (pageHeight < winHeight) {
$('.main-content,').css('min-height',winHeight)
}
I would use this
html, body{
background: #E73;
min-height: 100%;
min-height: 100vh;
overflow: auto; // <- this is needed when you resize the screen
}
<html>
<body>
</body>
</html>
The browser will use min-height: 100vh and if somehow the browser is a little older the min-height: 100% will be the fallback.
The overflow: auto is necessary if you want the body and html to expand their height when you resize the screen (to a mobile size for example)
CSS Height That Works in Both Modern and Legacy Browsers
Most of the other solutions posted here will not work well in legacy browsers! And some of the code people posted will cause a nasty overflow of text beyond 100% height in modern browsers where text flows past background colors, which is bad design! So please try my code solution instead.
The CSS code below should support flexible web page height settings correctly in all known browsers, past and present:
html {
height: 100%; /* Fallback CSS for IE 4-6 and older browsers. Note: Without this setting, body below cannot achieve 100% height. */
height: 100vh;/* Overrides 100% height in modern HTML5 browsers and uses the viewport's height. Only works in modern HTML5 browsers */
}
body {
height: auto; /* Allows content to grow beyond the page without overflow */
width: auto; /* Allows content to grow beyond the page without overflow */
min-height: 100%; /* Starts web page with 100% height. Fallback for IE 4-6 and older browsers */
min-height: 100vh;/* Starts web page with 100% height. Uses the viewport's height. Only works in modern HTML5 browsers */
overflow-y: scroll;/* Optional: Adds an empty scrollbar to the right margin in case content grows vertically, creating a scrollbar. Allows for better width calculations, as the browser pre-calculates width before scrollbar appears, avoiding page content shifting.*/
margin: 0;
padding: 0;
background:yellow;/* FOR TESTING: Next add a large block of text or content to your page and make sure this background color always fills the screen as your content scrolls off the page. If so, this works. You have 100% height with flexible content! */
}
NOTES ON THE CODE ABOVE
In many older, as well as newer browsers, if you do not set 100% height on the <html> selector, body will never achieve 100% height! So that is critical here.
The new viewport units ("vh") are redundant on the body selector and not necessary as long as you have set html selector to a height of either 100% or 100vh. The reason is the body always derives its values from the html parent. The exception is a few very old browsers from the past, so its best to set some height value for the body.
Some modern browsers using the body selector will not know how to inherit the viewport height directly. So again, always set your html selector to 100% height! You can still use "vh" units in body to bypass the parent html value and get its property dimensions directly from the viewport in most modern browsers, however. But again, its optional if the parent or root html selector has 100% height, which body will always inherit correctly.
Notice I've set body to height:auto, not height:100%. This collapses the body element around content initially so it can grow as content grows. You do NOT want to set body height and width to 100%, or specific values as that limits content to the body's current visual dimensions, not its scrollable dimensions. Anytime you assign body height:100%, as soon as content text moves beyond the browser's height, it will overflow the container and thus any backgrounds assigned to the original viewport height, creating an ugly visual! height:auto is your best friend in CSS!
But you still want body to default to 100% height, right? That is where min-height:100% works wonders! It will not only allow your body element to default to 100% height, but this works in even the oldest browsers! But best of all, it allows your background to fill 100% and yet stretch farther down as content with height:auto grows vertically.
Using overflow:auto properties are not needed if you set height:auto on the body. That tells the page to let content expand height to any dimension necessary, even beyond the viewport's height, if it needs to and content grows longer than the viewport page display. It will not break out of the body dimensions. And it does allow scrolling as needed. overflow-y:scroll allows you to add an empty scrollbar to the right of the page content by default in every web browser. The scrollbar only appear inside the scroll bar area if content extends beyond 100% height of the viewport. This allows your page width, and any margins or paddings to be calculated by the browser beforehand and stop the pages from shifting as users view pages that scroll and those that do not. I use this trick often as it sets the page width perfectly for all scenarios and your web pages will never shift and load lightning fast!
I believe height:auto is the default on body in most UA browser style sheets. So understand most browsers default to that value, anyway.
Adding min-height:100% gives you the default height you want body to have and then allows the page dimensions to fill the viewport without content breaking out of the body. This works only because html has derived its 100% height based on the viewport.
The two CRITICAL pieces here are not the units, like % or vh, but making sure the root element, or html, is set to 100% of the viewport height. Second, its important that body have a min-height:100% or min-height:100vh so it starts out filling the viewport height, whatever that may be. Nothing else beyond that is needed.
STYLING HEIGHT FOR LEGACY BROWSERS
Notice I have added "fallback" properties for height and min-height, as many browsers pre-2010 do not support "vh" viewport units. It's fun to pretend everyone in the web world uses the latest and greatest but the reality is many legacy browsers are still around today in big corporate networks and many still use antiquated browsers that do not understand those new units. One of the things we forget is many very old browsers do not know how to fill the the viewport height correctly. Sadly, those legacy browsers simply had to have height:100% on both the html element and the body as by default they both collapsed height by default. If you did not do that, browser background colors and other weird visuals would flow up under content that did not fill the viewport. The example above should solve all that for you and still work in newer browsers.
Before modern HTML5 browsers (post-2010) we solved that by simply setting height:100% on both the html and body selectors, or just min-height:100% on the body. So either solution allows the code above to work in over 20+ years of legacy web browsers rather than a few created the past couple of years. In old Netscape 4 series or IE 4-5, using min-height:100% instead of height:100% on the body selector could still cause height to collapse in those very old browsers and cause text to overflow background colors. But that would be the one issue I could see with this solution.
Using my CSS solution, you now allow your website to be viewed correctly in 99.99% of browsers, past and present rather than just 60%-80% of browsers built the past few years.
Good Luck!
Try
<html style="width:100%; height:100%; margin: 0; padding: 0;">
<body style="overflow:hidden; width:100%; height:100%; margin:0; padding:0;">
Please check this:
* {margin: 0; padding: 0;}
html, body { width: 100%; height: 100%;}
Or try new method Viewport height :
html, body { width: 100vw; height: 100vh;}
Viewport:
If your using viewport means whatever size screen content will come full height fo the screen.
If you don't want the work of editing your own CSS file and define the height rules by yourself, the most typical CSS frameworks also solve this issue with the body element filling the entirety of the page, among other issues, at ease with multiple sizes of viewports.
For example, Tacit CSS framework solves this issue out of the box, where you don't need to define any CSS rules and classes and you just include the CSS file in your HTML.
html {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
min-height: 100%;
}
html body {
min-height: 100%
}
Works for all major browsers: FF, Chrome, Opera, IE9+. Works with Background images and gradients. Scrollbars are available as content needs.
For the true purists, this one respects the default margins of the browser, and prevents the undesired scroll generated by the other methods, besides growing if the content grows. Tested in Chrome, Safari and Firefox. The backgrounds are just for show...
html {
display: flex;
flex-direction: column;
height: 100%;
background: red;
}
body {
flex:1;
background: green;
}
Only with 1 line of CSS… You can get this done.
body{ height: 100vh; }
all answers are 100% correct and well explained,
but i did something good and very simple to make it responsive.
here the element will take 100% height of view port but when it comes to mobile view it don't look good specially on portrait view ( mobile ), so when view port is getting smaller the element will collapse and overlap on each other. so to make it little responsive here is code.
hope someone will get help from this.
<style>
.img_wrap{
width:100%;
background: #777;
}
.img_wrap img{
display: block;
width: 100px;
height: 100px;
padding: 50px 0px;
margin: 0 auto;
}
.img_wrap img:nth-child(2){
padding-top: 0;
}
</style>
<div class="img_wrap">
<img src="https://i.pinimg.com/originals/71/84/fc/7184fc63db0516a00e7d86900d957925.jpg" alt="">
<img src="https://i.pinimg.com/originals/71/84/fc/7184fc63db0516a00e7d86900d957925.jpg" alt="">
</div>
<script>
var windowHeight = $(window).height();
var elementHeight = $('.img_wrap').height();
if( elementHeight > windowHeight ){
$('.img_wrap').css({height:elementHeight});
}else{
$('.img_wrap').css({height:windowHeight});
}
</script>
here is JSfiddle Demo.
I style the div container - usually the sole child of the body with the following css
.body-container {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
height: 100%;
display: flex;
flex-direction: column;
overflow-y: auto;
}
Over 20 answers later and none seem to have mentioned the factor that I found was the most crucial - the markup.
After trying basically every answer in this question and a few others, I restructured my markup to something like the following:
<body>
<div class="section1">
<nav>
</nav>
...
</div>
<div class="section2">
</div>
</body>
Essentially, it requires two different outer containers. The first container is for the purpose of containing the navbar and extending the background colour/image all the way to the height of the browser, and the second one for containing everything "below the fold" - including the second background colour/image.
This solution allows the first container's background to expand all the way to the bottom while keeping the second container free to take up as much space as it needs.
From this point on, the only CSS needed to get the result both I and the original question wanted is the following:
body {
height: 100%;
}
.section1 {
height: 100%;
background: black; /* for demo purposes */
}
.section2 {
background: white; /* for demo purposes */
}
Here Update
html
{
height:100%;
}
body{
min-height: 100%;
position:absolute;
margin:0;
padding:0;
}
About the extra space at the bottom: is your page an ASP.NET application? If so, there is probably a wrapping almost everything in your markup. Don't forget to style the form as well. Adding overflow:hidden; to the form might remove the extra space at the bottom.
CSS3 has a new method.
height:100vh
It makes ViewPort 100% equal to the height.
So your Code should be
body{
height:100vh;
}