There are similar questions on stack with some suggested answers (some don't work in IE7 like settings display:table), others don't have answers so I'm hoping someone can explain why browsers render the following HTML as they do and what the proper approach is.
You can see the working sample at the following fiddle: http://jsfiddle.net/wDeCg/1/
The HTML:
<div class="bottom-background-image">
<div class="site-width">asdfasdfasdf</div>
</div>
The CSS:
body {
background-color:beige;
margin: 0;
}
.bottom-background-image {
background-color:green;
}
.site-width {
margin: 0 auto;
width: 1024px;
}
Here's the unwanted result, which is that the parent DIV with a green background doesn't stretch the full width as expected. It seems to only take up the available screen width. Since the inner DIV is setting the width surely the outer DIV with no explicit width set should adopt the inner DIVs width? :
Similar questions:
DIV background not stretching properly
Stretch parent node to its content width
Define your css in you body min-width:1024px;
body{min-width: 1024px;}
Demo
try this
http://jsfiddle.net/wDeCg/3/
.bottom-background-image {
background-color:green;
min-width:1024px;
}
Try this:
body {
background-color:beige;
margin: 0;
width:100%;
}
.bottom-background-image {
background-color:green;
width:100%;
clear:both;
overflow:auto;
}
.site-width {
margin: 0 auto;
width: 1024px;
}
Related
What I am trying to do:
Set the <body> tag as display:table and my header/content/footer as display:table-rows. I also want <body> to be the size of the screen, the child elements will show scrollbar if needed.
I do this by setting
body{
display:table;
height:100%
}
This works in chrome, but in firefox the height of the body is the height of the screen. Is this as expected or is this a firefox issue? Is there a way to achieve this while using table? It used to work without table, but I need the footer to not appear on occasion, so I need my content to grow as needed, and it seems to work nicely in chrome.
You can see this on my (alpha) site at sportmenow.com
I've provided two solutions below, the first is more structured, the second follows your design pattern.
Demo Fiddle
Why not implement more structured HTML which follows a more semantically correct pattern and structure of table->row->cell:
<header>
<section></section>
</header>
<article>
<section></section>
</article>
<footer>
<section></section>
</footer>
CSS:
html, body {
height:100%;
width:100%;
margin:0;
padding:0;
}
body {
display:table;
}
header, footer, article {
display:table-row;
width:100%;
height:100%;
}
header, footer {
height:50px;
background:black;
}
section {
display:table-cell;
width:100%;
}
section:nth-child(2) {
height:100%;
}
However.. If you dont care about this so much, you can simply use display:table on your body element and then the below- the limitation being that each section will collapse unless it has content (even only nbsp;)
Demo Fiddle
HTML
<header>headerContent</header>
<article>mainContent</article>
<footer>footerContent</footer>
CSS
html, body {
height:100%;
width:100%;
margin:0;
padding:0;
}
body {
display:table;
}
header, footer, article {
display:table-row;
width:100%;
height:100%;
}
header, footer {
height:50px;
background:black;
}
You can specify the height of a display:table element in firefox. However, to use the full browser window, you may have to specify the height of the html element too:
html { height:100%; }
fiddle
Following this bug report, https://bugzilla.mozilla.org/show_bug.cgi?id=26617#c14, it seems when the element is using display: table-row, Firefox treat height as min-height, that's why you only found problem in Firefox.
On the other hand, if you already know the height of your header / footer before hand, you could use position: fixed with fix value in top and bottom attribute to layout your page instead.
In short, please try replace your CSS on your .body and .footer like this.
.body {
display: block;
position: fixed;
width: 100%;
top: 60px;
bottom: 92px;
padding: 6px;
}
.footer {
display: block;
position: fixed;
height: 70px;
width: 100%;
bottom: 0;
text-align: center;
border: 1px solid #CCCCCC;
background: #FFFFFF;
}
This will work consistently on both Firefox and Chrome.
However, when you hide your footer, you will need to use javascript to update CSS attribute "bottom" to 0 on your .body element.
$('.body').css({'bottom':'0'});
To set any element to 100% of its parent's height, the parent element must have a defined, non-percentage height (px, em, etc.), or it an all ancestor elements must be 100% height. For example, if your element was the first child of the body, you could set it to 100% height with the following CSS:
html, body, #my_element {
height: 100%;
}
If you were to set a parent to a specific height, then the target element to 100%, the target element would be that height as well. Imagine you had an element with an ID of element_parent, that contained your target element:
#element_parent {
height: 500px;
}
#my_element {
height: 100%;
}
In the above example would mean that my_element would expand to the full 500px that its parent is set to.
I have this layout:
http://jsfiddle.net/spadez/BN9KJ/2/
It works by having an optional left column. How can I get the column colour extend all the way down the page even if there isn't enough content to fill it.
I was thinking it would be something like this:
height: auto;
But that doesn't seem to work
add the following css
html,body{
height:100%;
}
and then apply height: 100% for the divs
working fiddle
The Logic: setting the height of the body,html element,because it is the parent element..!!
BUT why should we give both html and body --> height:100% ??
the answer is https://stackoverflow.com/a/6654996/2967572
Body looks to its parent (HTML) for how to scale the dynamic property,
so the HTML element needs to have it's height set as well.
just give
#left_column {
width: 250px;
background-color: orange;
float: left;
height:100%; //added
}
along with
html,body{
height:100%;
}
DEMO
BUT
However the content of body will probably need to change dynamically.
Setting min-height to 100% will accomplish this goal.
it will be good alternative to give min-height
#left_column {
width: 250px;
background-color: orange;
float: left;
min-height:100%; //added
}
DEMO with Min-height
I have the following example: http://jsfiddle.net/4EpRv/
and another here: http://jsfiddle.net/4EpRv/1/
Both show two images (one taller than wide, and the other wider than tall). The code SHOULD be making the images align in the middle (horizontal and vertically) and fill the space of the screen until the image hits its maximum width or height and should have 72px of padding around them (at a minimum, depending on the image size and aspect ratio)
The first example works fine on all screen sizes, but the second example breaks on portrait screens as the image appears off-canvas at the bottom.
See screenshots for the second example: http://dev.driz.co.uk/gallery/ipad1.png (not working on portrait) and http://dev.driz.co.uk/gallery/ipad2.png (working on landscape).
And see screenshots for the first example (that work): http://dev.driz.co.uk/gallery/ipad2.png and http://dev.driz.co.uk/gallery/ipad3.png
The HTML is as follows:
<div class="gallery">
<div class="gallery-background">
<img src="http://dev.driz.co.uk/gallery/halo.jpg" />
</div>
</div>
and the CSS:
.gallery {
bottom: 0;
height: 100%;
left: 0;
position: fixed;
right: 0;
top: 0;
width: 100%;
}
.gallery-background {
background: none repeat scroll 0 0 #333333;
bottom: 0;
left: 0;
padding: 72px;
position: fixed;
right: 0;
text-align: center;
top: 0;
}
.gallery-background:before {
content: ' ';
display: inline-block;
vertical-align: middle;
height: 100%;
}
.gallery-background img {
max-height: 100%;
max-width: 100%;
vertical-align: middle;
}
Any ideas why the second example breaks on portrait screens if the image is wider than taller?
And how I could fix this?
Update: Media Queries might be an option if I can apply a different rule if the screen is portrait and need to do something slightly different.
Update 2: The :before declaration is important, as it's what centers the image vertically, see here for an example without it: http://jsfiddle.net/4EpRv/2/ so removing that isn't an option, unless I can find an alternative. And here is proof that removing it causes the image to NOT be centered in the middle vertically: http://dev.driz.co.uk/gallery/NotWorking.png
Update 3: Using JavaScript has been the best solution so far, as by NOT using padding and instead positioning the element centrally I can handle all the issues: http://dev.driz.co.uk/gallery/2/landscape.php but can this be done in pure CSS?
I retyped the post with a solution to your problem. Hope it helps.
CSS
html{
width:100%;
height:100%;
margin:0;
}
body{
width:100%;
height:100%;
margin:0;
}
.gallery{
position:relative;
}
.gallery-background {
width:100%;
height:100%;
display:table-cell;
background-color:#333;
text-align:center;
vertical-align:middle;
padding:0;
margin:0;
border:0;
}
.gallery-background img {
display:block;
max-width:100%;
margin:0 auto;
max-height:100%;
}
JavaScript
$(function(){
$('.gallery-background').css('height',$('body').innerHeight())
$('.gallery-background').css('width',$('body').innerWidth())
window.onresize = function(event) {
$('.gallery-background').css('height',$('body').innerHeight())
$('.gallery-background').css('width',$('body').innerWidth())
}
})
HTML
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<div class="gallery">
<div class="gallery-background">
<img src="http://dev.driz.co.uk/gallery/halo.jpg" />
</div>
</div>
I have added the solution on here. I believe it is almost impossible to do without some fixed height. I have added JavaScript in to assist you.
Edit: I have fixed the question you asked with the use of JavaScript also adjusts on window resize. http://jsfiddle.net/4EpRv/9/
Edit: Fixed Scrollbar http://jsfiddle.net/4EpRv/11/
Here is a PEN I created for a similar answer. There are 3 ways to vertically align your content. I think table-cell method or translate() method will suite you best.
Sorry but I can't get this to work. Should be a quick answer.
My html is laid out like so:
<html>
<header>
...
</header>
<body>
<div class = "background"></div>
<div class = "content">
...
</div>
<body>
</html>
The I want the background div to simply place a 1000px background colour down the entire length of the page. The content is then padded 40px on each side, inside this background colour.
The css is like so:
body {
width:1000px;
margin-left:auto;
margin-right:auto;
}
.background {
position:absolute;
top:0px;
width:1000px;
height:100%;
}
.content {
min-height:100%;
padding-left:40px;
padding-right:40px;
}
I thought it worked like so... The body div would expand to hold the min-height of the .content div. This means that 100% height of the .background div would fill the entire body and so the length of the page. However it does not. It only fills the window height. Where am I going wrong?
Thanks
As topek guessed, this will do it:
html, body{
height:100%
}
The reason this works is because percentage CSS heights only work if the parent element has a height defined on it. By adding the above, you're giving .background's parents a height.
Update: based on OP's comment, here's how you would get the .background div to always appear to fill the viewport:
html, body {
height: 100%;
padding: 0;
margin: 0;
}
/* Fixed element that takes up entire viewport */
.background {
position: fixed;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* Content that stacks above .background */
.content {
position: relative;
z-index: 2;
}
As .content grows larger than the viewport and the user scrolls, the fixed position of .background will keep it always in view.
And of course, a handy example.
All you need is:
body, html {
height:100%
}
Then specify height:100%; any DIV you want to have full height.
BTW - 1000px wide is a bad unit to use. People with 1024 wide screens will get horizontal scrollbars. Better to stick to 980 or less. 960 is good because it can be divided by many factors.
I think this is what you're looking for.
http://jsfiddle.net/sg3s/GxRcp/
The key in this little example is the position: fixed; for .background so that it is kept in the screen while scrolling.
If you don't really want to do this and want the background to expand ARROUND the content just make it a normal / relatively positioned element, and wrap it arround .content...
If you give a more acurate description of the layout you're trying to create (and maybe why in such a way) we may be able to help you better.
Btw, in your example html there is an error, header should be head.
You should put bg into html or body elements as the first choices.
html { background: url("bg.jpg") no-repeat top center; }
or
body { background: url("bg.jpg") no-repeat top center; }
Fixed:
background: url("bg.jpg") no-repeat top center fixed; /* And bg will stay in fixed position */
I would like to align my container div to center vertically just like it is aligning himself horizontally because of margin: auto;. I've searched some time on google on how to do that but it does not seem to be working for me. Maybe there is some kind of universal way to do that, as easy as margin: auto; method for horizontal centering? Because it seems for me very strange that we live in 2011 year and there is still no simple css command for doing this task...
#container
{
margin: auto;
width: 960px;
height: 640px;
background-color: brown;
}
There are tons of tutorials for vertical alignment, especially for IE, which needs special care. One of them: Vertically center content with CSS. Also another answer here.
Can it be even simpler...
html, body {
overflow:hidden
}
#container {
width:960px;
height:640px;
position:absolute;
top:50%;
left:50%;
margin-top:-320px;
margin-left:-480px;
background:brown
}
The overflow:hidden is to hide the scrollbar that appears (html for IE6 and body for IE5). I don't know why this happens.
But if you want to keep it scrollable if the browser window is smaller, just make the height 639px and remove the overflow:hidden.
If your div has a fixed height, you can align it vertically by adding another div (with a float) with a negative margin (half the height of the main div) and then alter your div's CSS (adding the clear).
Also don't forget to specify the 100% height of the html and body, without that it doesn't work.
Like this:
CSS:
html {
overflow: auto;
}
html, body {
margin:0;
padding:0;
height:100%;
}
#alignDiv {
float:left;
height:50%;
margin-bottom:-320px; /* half the centered div */
width:1px;
}
#container
{
margin: 0 auto;
width: 960px;
height: 640px;
background-color: brown;
clear:left; /* without the clear it won't center */
}
html:
<div id="alignDiv"></div>
<div id="container"></div>