In Microsoft's homepage (http://www.microsoft.com/en-us/default.aspx) you see the white background stretch all the way to the bottom and the sides in grey?
How do you that in an HTML/CSS? I mean, I've been trying but the DIV won't go all the way down...
Help?
Well, their page has enough content to force the page to scroll. Like this
If you don't have enough content, you can set the height of the div to 100%. The important thing to note here is that it will be 100% of its parent's height. That's why you have to set the html and body heights to 100% as well. DEMO
html, body {
height: 100%;
}
#contentDiv {
height:100%;
}
HTML
<body>
<div id="contentDiv">my content here</div>
</body>
You must make sure that the body and html file has 100% height aswell, cause 100% is what it gets from the current height of the parent element
so if you set, and html's parent is the window(document) that's why you get a full height
html,body{
height:100%;
width:100%;
background:gray;
}
div{
height:100%;
width:100%;
background:red;
}
you will get a red page
Set the height to %100 and sometimes setting the parent element to position:relative will set things straight. Post your html and css and we could help you better.
Related
In css when i give my div height a percentage value the div completely disappears, heres what im doing
<html>
...
...
<div id="logcontainer">
<div><div>
<div></div>
</div>
this is not the actual html but it sums up what im trying to do, heres my CSS
#logcontainer {
width:100%;
min-height:100%;
margin: 0px;
padding: 0px;
background-color: #7f7f7f;
}
whenever the height has a percentage value the div disappears, the width works but no height?, when I use ems or rem it works perfectly, any ideas?
I think all you need is html, body { height: 100% }, if i'm understanding your question correct
Set height of body 100%, then it will work. Since you need to set a 100% height on your parent element, in this case your body. The div tag is a container, but it is contained in the body tag... the body tag, unfortunately is not treated the same on all browsers... in some it is sized to fit the browser's available space... in some browsers the body tag is sized to fit the minimum height required to fit the current contents.... So a div tag set to 100% would size differently on each...in fact if empty, the div tag might not even show up on some browsers, since an empty body would be, potentially, 0px high...
html, body
{
height: 100%;
width: 100%;
margin: 0;
}
Here is the solution :
html, body { height: 100%; }
but it just a solution you need to understand why is happened , this happened because your element is a block level element which wrap up your whole content width and height width as a 100%
but this is not the case with height you need to specify the related to content to give a height in percentages like as above body has given 100%
enter link description here
HTML CODE
<p>overflow:auto</p>
<div class="auto">This adds the scroll bar based on you content.Here only vertical scroll bar needed so that is added n visible</div>
CSS CODE
div.auto
{
background-color:#00FF00;
width:100px;
height:100px;
overflow:auto;
}
OUTPUT
When I change my HTML code to
CHANGED HTML CODE
<p>overflow:auto</p>
<div class="auto">content less than div height </div>
my output will be
NEW OUTPUT
So I want to use overflow:auto property. So that after some minimum height scroll-bar will appear, but when content is less than height of div then I do not want to use whole height of div.height should be equal to content's height.Please help.
You simply need to change height: 100px; to max-height: 100px; and it will be automatic below that to the height of the content.
You want to use max-height instead of height.
http://tinker.io/bbf56/1
try this,
div.auto
{
background-color:#00FF00;
width:100px;
max-height:100px;
overflow:auto;
}
ha realised that the height:auto is default anyway, so you can just remove height altogether.
I do not understand why a <footer> element in my code is not located at the very bottom of it's page.
Here is a fiddle:
http://jsfiddle.net/Kd5Xx/
I've set the position of both the footer and its parent, and i also gave it a specific height. HTML and body are set to height: 100%.
So why does this not work?
you have to make position:absolute; http://jsfiddle.net/Kd5Xx/1/
footer {
position:absolute;
}
I have a #container div that is set to height:100%; width:100%; of the document body. Inside the #container is div#box2 that is set to height:100%; width:200px;. When I add lots of content to div#box2 the div height overflows the document body and a scroll bar appears.
How can I make div#box2 100% the height of the #container (and thus 100% of document body) and not overflow with a document scrollbar when content is added?
See this fiddle: http://jsfiddle.net/aDdTe/
Essentially, div#box2 should get the scroll bar, not document body.
update
I've edited my fiddle to better represent my actual dev scenario. The new fiddle is here: jsfiddle.net/Nszjv and is working as expected in safari however firefox does not render the scrollbar for some reason.... any ideas on this?
You need to use overflow property in your css.
#box1{
display:table-cell;
}
#box2{
overflow:scroll;
display:block;
height:500px;
width:200px;
}
Here is the code on jsFiddle:
http://jsfiddle.net/gDKKr/
I've been working on a website with a pretty standard layout, header, content, footer, each being a DIV with a 900px width inside of a page-wide DIV, just like the one described in this question:
Full width background, without a wrapper
Now the problem itself is that whenever the browser window becomes less wide than the specified DIV width (900px) the background of the wrapper seems to disappear, showing the background color of the website itself. This also happens while using the code in the aforementioned question.
This is the CSS code:
#headerwrapper {
height: 229px;
background: url(imagenes/header.gif);
background-repeat: repeat;}
#header {
width:900px;
height:229px;
padding:0px;
margin:0 auto;
}
And this one is the HTML code:
<div id="headerwrapper">
<div id="header">
Content goes here.
</div>
</div>
Any suggestions are appreciated.
you probably can't see the background in the scrollarea. You need to set min-width: 900px; or max-width: 900px; so that the background will be shown in the scrollarea.
If you do not specify width for the #headerwrapper, browser makes it 100% of parent container (div or body). So if width of view area is less than 900px - #header becomes wider than #headerwrapper, so background is not showed for overlapped part. You may add overflow:auto; to #headerwrapper so scrollbars will appear, but i do not think that is a solution. So it is better to add background for the #header or add min-width for #headerwrapper.
P.S. Specifying
min-width:900px;
width:auto !important;
for #headerwrapper should do the trick.