I do not understand the basic concept of giving body and html a height of 100%. Why do we give 100% to our parent?
<body style="height:100%"> and the <html style="height:100%">.
What happens when I give 100% height to my html and body, and why do we give it?
Giving 100% height to body and html isn't an must-do. But assuming you want to use percentage values on your site you have to assign 100% height to both.
Why?
Refering to Mozilla Developer Network:
Many CSS properties can take percentage values, often to define sizes in terms of parent objects.
That means: If you assign height:20% to header (assuming html>body>header), the browser will calculate that 20% in terms of the parent (body) and the height of the body in terms of its parent (html).
But height has an initial value of auto. When you take a look into the Developer Tools of Chrome etc., you'll see that the body has a calculated height of 0 (zero) by default. Consequently the headers height isn't calculated correctly.
That's why it makes sense to define a line like the following in a reset.css or something alike:
html,
body {
height:100%;
width:100%;
}
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.
However the content of body will probably need to change dynamically. Setting min-height to 100% will accomplish this goal.
Look here
Make body have 100% of the browser height
Related
Trouble setting container as a percentage
Yes, I know, the parent of object has to have extremely set height in pixels.
It's a DIV and it's child of <body> and I really need to have it set with percent height.
Is there way to bypass it, except defining ultimate height in <body> by pixels?
Setting up the body height within the .css file to 100%.
Then set the containing elements to a percentage of that body height.
I've been playing with front-end web design the past couple of days, mainly using floats/clearfix to position my content. I've been marking up the width of the content using % and that has worked perfectly.
However, if I try to define the height as a percentage of the overall page, it fails to work, more accurately it seems to just wrap around what ever content is there and I have to define the height as a px value.
Is there a reason for this? Is there a workaround where I can use a percentage value and it actually divides up the page?
To define the property height in % you need a previous definition on the parent height. Then if you have a parent with fixed height on px you can work with %; but if you want to work % in relation to the window or other % values you need to set a value for all parents.
Then if you want to work with the window % you need this:
HTML like:
<body>
<div id="container">My div with 100% height</div>
</body>
CSS like:
/*Need to set all parents to 100%*/
html, body {
height:100%;
}
/*Then set the container*/
#container {
height:100%;
}
please try this:
give the HTML tag in CSS 100% and then you should try to set the body element in CSS to
display:block;
and give it
min-height:100%
see this topic too:
min-height does not work with body
br paulq
I'm looking to construct min-height: 100% sections and it seems the general consensus is :
html{
height: 100%;
}
body {
min-height: 100%;
}
and direct children have min-height: 100% as well. The problem I can't wrap my head around is if HTML has fixed height 100% while body may be allowed to grow, hasn't it shot out of the page and the document is not very semantic, i.e. html < body. Also, if your section is wrapped up in several other divs, all parents will require min-height: 100% as well. This seems a little unconventional.
What would be the most elegant approach to it? I know height:100vh is the best approach if it were supported by all browsers. Would it be better to use javascript to obtain the viewport and set all interested sections' height property?
The "unconventional" issue is actually very true and conventional. You see, browsers only calculate "horizontal" layout, not vertical unless explicitly set. So if you want an item to have a height of 100%, then you'll need to set some height explicitly to all it's ancestors so that the browser can calculate the dimensions.
Hii,
I am using .net 2008. When i designing the page in HTML, i have given the height of the outer table to 100%, but it is not taking to the full height of the window
It's not so simple with 100% height.
Why Percentage Height Fails
Okay, to begin, maybe I should explain
exactly why 100% height fails.
Contrary to popular opinion, it is not
because the browser ignores the
invalid HEIGHT attribute. The real
reason it fails is that the browser
does not expand the HTML and/or BODY
(depending on the browser) to fill the
browser viewport. The browser is in
almost all cases, in fact, rendering
the table as 100% high. The problem is
that it is 100% of the containing
element (HTML and BODY), which may not
be as high as the browser's veiwport.
The HTML and BODY tags represent block
elements that automatically expand to
fill the width of their container,
which is the browser's viewport. They
do not expand vertically. That can be
fixed.
This article will help you with your table: http://apptools.com/examples/tableheight.php
Add this to your CSS:
html, body {
min-height: 100%;
}
<html>
<head>
<style type="text/css">
div {
border:1px solid #000;
min-width: 50%;
}
</style>
</head>
<body>
<div>This is some text. </div>
</body>
</html>
I believe the div should be 50 percent of the page, unless, for some reason, the text inside the div makes it larger. However, the border around the div stretches across the entire page width. This occurs in both IE and Firefox.
Suggestions?
I believe the div should be 50 percent of the page, unless, for some reason, the text inside the div makes it larger.
min-width does not set a minimum starting width from which your block will grow; rather it limits how far the block can shrink.
In min-width: 50%;, the 50% is in reference to the containing block. I've never used percentages with min-width, but I find it can be useful with other units. For example if I have a block (like a column of text) that I want to be full width, but I don't ever want it to go below a minimum width, I could use something like {width: 100%; min-width: 250px;}.
Note the caveats on IE support mentioned by others.
If you provide absolute positioning to the element, it will be 50% in Firefox. However, IE doesn't like the min-width or min-height attributes, so you will have to define width as 50% also for it to work in IE.
Without min-width, your div will take whole page width, that is how display:block elements behave. Adding min-width cannot make it smaller.
Changing display property to absolute or float property to left will make the element to shrink to fit contents. Then, min-width start to make sense.
To add to what Chris Serra said, in IE < 7 (and in 7? I can't keep track these days, but definitely < 8), width behaves exactly like min-width is supposed to behave.
You are telling it that the minimum width is 50%. Since there is nothing else taking up the space, it will take all of it (except for margins).
If you give it a max-width of say 75%, firefox should constrain it to that. IE6 will still ignore it.
As David Kolar already said, many of us typically do not use percentages for min-width.
You may want to try an IE specific style-sheet and include and expression like:
print("width:expression(document.body.clientWidth < 1024? "50%" : "100%");");
This will change the width setting based on the width of the browser window at load time. I personally like to use px as the unit measurement, but you need to try it with your specific setup.