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.
Related
I have a div that is set to 100% the height of my window, and a max-width of 66% of the window's width. html and body are set to 100% and overflow:none, so there's no scrolling permitted/possible.
I want to be able to scale an arbitrary <img> to fill as much as the space as possible. I'd prefer not to use background images, due to existing JS code that interacts with the <img> element.
This seems like an obvious starting point:
<img style="height:100%;max-width:66%">
But the max-width seems to come from a percentage of the browser's HEIGHT, rather than its width. And it won't keep its aspect ratio, which is definitely an undesired effect!
I could use JS to accomplish this task, but would prefer a CSS solution if there is one? It seems like it should be simple, but I have a feeling it's not...
If the img is within the div, then it's using 66% of the width of the div, which is already 66% of the width of body if I understand correctly. You can also make images resize automatically and maintain their aspect ration by setting img {width: auto; max-width: 100%;} within your CSS, leaving the height unchanged.
When setting percentage-based widths on an element, the width is typically calculated based on the width of the element's parent, which is why your image may have looked smaller than you expected.
I found an answer that I like over here:
https://stackoverflow.com/a/26648877/1058739
Quoted in case his answer disappears:
Here's a hackish solution I discovered:
#image {
max-width: 10%;
max-height: 10%;
transform: scale(10);
}
This will enlarge the image tenfold, but restrict it to 10% of its final size - thus bounding it to the container.
Perfect for my needs, I think.
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
Should we always try to not to give "height" to elements in XHTML through CSS?
if yes the i think min-height would be better idea instead of fixed height.
What cross browser, W3C valid css, non-javascript "min-height" method in css for browser which do not support min-height?
if i add min-height to any tag example <div> then in future in more content comes in then will we have to change height of div or if min-height is defined then no need.
Should i use min-height always in place of height?
What cross browser, W3C valid css, non-javascript "min-height" method in css for browser which do not support min-height?
My workaround usually is to insert an element that does not disturb the rest of the content, and is min-height pixels high.
Should i use min-height always in place of height?
There are instances when you want a height to be fixed, for example with a container whose contents are to overflow: auto, so I would say no, definitely not.
No. There are plenty of times when it is sensible to use height. (Those times aren't when there is variable height content (including any kind of text) in elements without overflow set to non-default, but they exist).
What cross browser, W3C valid css, non-javascript "min-height" method in css for browser which do not support min-height?
The only browser that people really care about which falls into that group is IE6, and it has a bug in which it treats height and min-height for overflow: visible content anyway. So:
#foo {
height: 10em;
min-height: 10em;
}
html>body #foo {
height: auto;
}
… or use conditional comments.
I set a div to height:100px; width:50px, but when the content of the div is changing dynamically, I want to let the height adapt to the change.
What should I do?
Easiest way is to do
min-height: 100px;
this will set the minimum height of the div to 100px but allow it to grow as the content grows.
Like others have said min-height and min-width is what you need. It's a css rule and applied like this:
#someDivName {
min-height: 100px;
min-width: 50px;
}
Now your div will be 100px by 50px but if the content inside is bigger, it will adapt to the change. Like others before me have mentioned, min properties do not work in IE6 but who cares about IE6 anymore anyway. Even major sites like youtube has discontinued support for it.
min-height is a good practice. Also, rather than expressing the height in "px," use "em" which will scale with the current font.
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%;
}