I want to set a background for the content of a page. The div with the background image has class=history. All the divs above "history" and history itself have height set to 100%. However, the "history" div does not get the correct height.
Below is a sample of the code. I may be missing some relevant details but will add them once the solution is found. See also the live page.
The CSS:
html, body {
height: 100%;
background: url(cream_dust.png) repeat 0 0;
}
The HTML:
<html>
<body class="page page-id-41 page-child parent-pageid-8 page-template-default logged-in admin-bar">
<div class="wrapper-for-footer">
<div id="page" class="hfeed site">
<div id="main" class="site-main">
<div id="primary" class="content-
An element that is set to height: 100% will only take up 100% of the vertical space of its parent. If there's an element somewhere between history and body that doesn't have a height, then it won't be as tall as you're expecting.
The majority of the history element is floated content, so it has collapsed to only contain the non-floated content.
Add a clearfix to the history element.
overflow: hidden
or
.history {
zoom: 1; // fix for IE
}
.history:after {
content: ' ';
display: block;
height: 0;
clear: both;
visibility: hidden;
}
You might need to add position:absolute; to the div you are trying to give 100% height to.
EDIT: you need to add position:absolute; to the history div
Related
I aling divs in through right
{ float: right;}
but end of the page it (when divs become more than 4) the fifth div goes under other divs while page expands to down. I dont want this. I want height of the page become fixed and web page expand left to right always how can i do this.
Use min-width and display:table-cell example in fiddler : http://jsfiddle.net/HarishBoke/c8G7V/
On the top level parent element (presumably a 'body' tag) set the overflow-x property, in CSS, to scroll.
Something along the lines of:
body{
overflow-x: scroll;
}
Note that this possible solution may not be pre-IE8 friendly. As far as keeping the page's height fixed, define the height in CSS and set the overflow-y to be hidden. This will hide any elements exceding the parent element's height, rather than stretching the content.
You need a extra div with large width which contains other div's. This will not allow your body container to add new line when running out of space.
HTML:
<div id="container" class="clearfix">
<div id="wrapper" class="clearfix">
<div id="div1">Div1</div>
<div id="div2">Div2</div>
<div id="div3">Div3</div>
<div id="div4">Div4</div>
</div>
</div>
CSS:
#container {
height: 275px;
overflow-x: auto;
overflow-y: hidden;
max-height: 275px;
}
#wrapper div {
float: right;
border:1px solid black;
width:200px;
height:100px;
display:inline-block;
}
.clearfix:after {
content: " "; /* Older browser do not support empty content */
visibility: hidden;
display: block;
height: 0;
clear: both;
}
To make it more dynamic,you can first calculate the space taken by inner div and then some ettra space on the wrapper div accordingly
Javascript:
var width=0;
$('#wrapper>div').each(function() {
width =width+parseInt($(this).css('width'));
});
wrapperWidth=width+100;
$('#wrapper').css('width',wrapperWidth);
Updated Fiddle: http://jsfiddle.net/ankur1990/mgxk5/3/
I have been banging my head against the wall trying to figure out this problem and I have looked high and low for the answer and came up with similar results.
Synopsis
The problem is that I am building a website using the 960 grid and have three columns that I want to stretch at 100% at all times. Here is a fiddle for your reference: http://jsfiddle.net/Uec7h/1/
Essentially the html is like so:
<div class="contentWrapper">
<div class="container_12">
<div class="grid_2 leftSide clearfix">
Left sidebar content.
</div>
<div class="grid_7 content">
Lots of content loaded from the server.
</div>
<div class="grid_3 rightSide">
Right sidebar content.
</div>
</div>
</div>
with the CSS being like
html, body {
height: 100%;
}
.content {
height: 100%;
}
.leftSide {
height: 100%;
background-color: #000000;
}
.rightSide {
height: 100%;
background-color: #000000;
}
.contentWrapper {
height: 100%;
}
The fiddle isn't completely accurate to what I am seeing on my local version, but it's close. Seems like the left and right sidebars do not want to expand to 100% no matter what I do.
What I've Tried
Most of the answers I have found on SO have suggested to put height: 100% on the html, body elements and everything should work out fine. Adding this attribute and giving both sidebars height: 100% did work a little bit, but if the content in the middle column gets too big, it stops at a certain point and won't continue to stretch.
I have tried adding the clearfix class that comes with the 960 grid but it didn't seem to help at all.
Question
How do I get the left and right side bars height in the fiddle to be 100% no matter what content is in the middle column?
If you add the following CSS to the sidebar elements it will fill the 100% of the height.
display:block;
height:auto;
position:absolute;
top:0px;
bottom:0px;
If you place the sidebar into a wrapper div with relative positioning, the content section will be again in it's right place...
I would also set padding and margin to 0 for the body.
EDIT:
If you add height: 100% to the .container_12 it will get a real height, and children elements can have a 100% height. Notice that the sidebars will be as height as the window itself, but your content at the middle can be taller than 100%... Fiddle
Dont know the 960 grid, the EDITED solution - using visibility: visible; -
HTML
<div id="box">
<div class="vision"> sdfsdfsd </div>
</div>
CSS
#box {
float: left;
border: 2px solid red;
}
.vision {
width: 300px;
height: 600px;
visibility: visible;
}
I have a layout where I need to use height: 100% on html and body (and any wrapper divs I resort to using) to achieve an effect similar to pages, so that the content on my first "page" is centred, scrolling down the content on the second "page" is centred etc.
The html looks like this:
<section class="page" id="p01">
<div class="spacer">
</div>
<div class="outer">
<div class="inner">
Some content
</div>
<div class="inner">
Some content
</div>
</div>
</section>
<section class="page" id="p02">
<div class="spacer">
</div>
<div class="outer">
<div class="inner">
Some content
</div>
<div class="inner">
Some content
</div>
</div>
</section>
and the vertical centring etc. achieved with this styling:
body, .page {height: 100%; margin: 0 auto;}
.spacer {
float: left;
height: 50%;
margin-bottom: -150px;
}
.outer {
height: 300px;
width: 100%;
background-color: #fca;
clear: both;
position: relative;
display: block;
white-space: nowrap;
}
.inner {
width: 41%;
margin: 0 6%;
height: 300px;
background-color: green;
display: inline-block;
vertical-align: middle;
white-space: normal;
}
.inner:first-child {
margin-right: 0;
}
You can see it at work in this fiddle:
http://jsfiddle.net/terraling/3V5rV/
The problem is the body background (here I'm just using color, but on my site it will be an image) leaks out into the body margins, i.e. the body content has a max-width and should be centred with white margins.
I can fix that either by... setting html background-color to white, as per
http://jsfiddle.net/terraling/yM53t/
...but body background becomes cutoff when scrolling into the second page (that wasn't a problem in the first fiddle).
Alternatively I could set the background image on a wrapper div and not on the body. That solves the problem of it leaking into the body margins, but it still has the same problem that it is cut off on scrolling.
(see: http://jsfiddle.net/terraling/3V5rV/1/ )
Any solution that involves removing the height: 100% declaration from any of html, body or wrapper collapses the layout (including replacing with max-height: 100%).
There's a whole lot of problems with this construct and not all of them can be solved, unfortunately.
The background issue
As you have seen yourself the background of body extends to the viewport if html does not have a background. That's solvable.
The float issue
When an element floats it does not contribute to the height of its parent element. So they don't grow (e.g. body does not expand). That can be solved if you can use alternatives. For vertically centering an element you could use display: table-cell e.g., which allows you to vertically center the content.
The height issue
This is where all hope is gone. height: 100% refers to the height of the parent, of course. The parent of body is html which in turn is the child of the viewport. You gave html the size of 100% (= the size of the viewport) and body the size of 100% (= size of html = size of viewport).
So now body has a fixed height and it can't expand meaning the background doesn't expand as well. Now one might have the idea to give body no size so that it can expand. But .page has 100% too. If a parent (in this case body) has no fixed size 100% has no meaning and will be treated as auto, which means as big as the content. And the content has a height of 300px. So the .page elements wouild no longer have the height of the viewport but 300px.
As for the collapse of the CSS, you should either specify the height specifically height:200px; or add padding to the bottom/top of the page so that the content wraps. You can also use min-height:200px; then add the margin-bottom:20px; to separate the pages. I would approach this at a specific height with the wrapper having the specific background-image and bottom-margin.
In order to center your background-image to the <html> you can specify the position as 50%.
This can be done by doing background:url('yourimage.jpg') repeat 0 50%;This will ensure the background is centered.
This should be simple, but I can't figure it out. I have markup like such:
<section id="container">
<article></article>
<article></article>
<article></article>
<article></article>
</section>
How can I get each article to be the full height of the window by using purely CSS, and no JS?
You should make sure that the html, body and #container tags are also at a height of 100%:
html, body, #container {
height: 100%;
}
Example: http://jsfiddle.net/aXPwL/1/
<section id="container" style="height:100%">
<article style="height:100%;"></article>
<article style="height:100%;"></article>
<article style="height:100%;"></article>
<article style="height:100%;"></article>
</section>
All elements starting from html cascading down to the article element need to have 100% height specified, otherwise any child element will always be only as tall as its parent element.
My JSFiddle to show that
html {
height: 100%;
}
body {
height: 100%;
}
section {
height: 100%;
}
article {
background: blue;
width: 100%;
height: 100%;
}
Also note, not sure if this is what you want, but since the articles are not stacked on top of each other, the user will have to scroll down to see all 4 articles, making the actual page height 4x the height of the browser window.
I'm trying to design a web page these days that is a bit hard.
I have three main divs. First one for header, another for footer, and third one for main content. Header and footer must be fixed in top and bottom of the page. Their place mustn't change with resizing of browser window. Third div must be in the blank space between those divs. It can resize to fit the page with window resize.
Height of main div must exactly change, because I want to place a Google Maps in that div, so the height of this div is important.
I tried so many things, but they were not successful. Setting height of the div to 100%(while height of body and html is 100%, too) was not the answer. Using a table (with three rows, two rows with fixed height, one row with variable height, with height="100%") had some problems, too(in IE8, when I declared a doctype, the div in second row (with height:100%) didn't fit the cell anymore!).
Now I have no idea to do this work. What can I do?
Note: I prefer not to use CSS3, because compatibility with old browsers is important for me.
You could try something like this.
HTML
<div id="header"></div>
<div id="body"></div>
<div id="footer"></div>
CSS
#header {
height:50px;
width: 100%;
background: black;
position: fixed;
z-index: 1;
top: 0;
}
#body {
height:100%;
width: 100%;
background: #CCC;
position: absolute;
z-index: 0;
}
#footer {
height: 50px;
width: 100%;
background: #0CF;
position: fixed;
bottom: 0;
}
Here is a fiddle - http://jsfiddle.net/6M59T/
Use a set height for your header, and use sticky footer to keep your footer a set height and aligned to the bottom as well. The space in between should then always be the right height.
You should try the well known Clearfix hack to handle height issues, because you need to "clear" parents elements to get that full 100% height you need.
This is one of the shortcomings of css. You cannot accomplish what you want using just those three divs. You need to use additional divs to offset the height of your header and footer. Here is how to solve this:
<body style="height:100%; margin:0; padding:0;">
<div id="header" style="height:50px; position: relative; z-index: inherit; background-color:lightblue;"></div>
<div id="content" style="height:100%; margin:-50px 0 -70px 0; background-color:wheat">
<div id="header-offset" style="height:50px;"></div>
<div id="footer-offset" style="height:70px;"></div>
</div>
<div id="footer" style="height:70px; background-color:lightblue;"></div>
</body>