If a div is 100% width, should I still put in width: 100%;? I look at a lot of code and it's always in there even though by default a div is 100%.
No, doing so can actually cause problems. 100% is not the same as auto. width refers to the width of the content, excluding borders, padding and margins. auto automatically computes the width such that the total width of the div fits the parent, but setting 100% will force the content alone to 100%, meaning the padding etc. will stick out of the div, making it larger than the parent.
See this for an example
I'm not sure if the children elements will adapt themselfs with procentual values if their parent doesn't have a width attribute. Otherwise it's just semantic and good practice to put width: 100%; if the div is supposed to span 100% of it's parent container.
nope, pretty useless I think to give it a 100% width unless you have a background-color or image or something in this div.
Related
I'm confused as to what making a html element "height: 100%;" does exactly.
I've made both html and body 100% height
I've added a few 100% height sections inside
The content displays correctly.
But then I looked at the page with Inspect Elements and I noticed that even though the contents displayed are above 100vh, the html, the body and the wrapper are all exactly 100vh.
Is this normal behaviour? Should I refrain from changing the height of the html and body element unless I want a site that's strictly 100vh?
height is always relative to its parent.
If you have html's height as 100vh, and then body as height: 100%, then body will also be 100vh, because body's parent is html, and the height is always relative to its parent.
The 100% is covering 100% of the parent. What the % corresponds to is determined by what modifier it is included with. If a height is set to 100% it will scale linearly with vh. If a width is set to 100% it will scale with vw. So yes, it is normal to see 100% height correspond to 100vh;
The vh unit means "Viewport Height". Setting the html or body height to 100vh is essentially redundant since a page will always want to fit within the height of the viewport in the first place.
Should I refrain from changing the height of the html and body element
unless I want a site that's strictly 100vh?
I can't think of any scenario where you'd want to set the html or body height at all. It is much more common to set the height of elements "within" the body, not the body itself.
I added a min-height on a div in a flex layout parent. It seems that the min-height impacts the div if its real height is greater than min-height.
Take below code as an example:
https://codepen.io/zhaoyi0113/pen/ejwJGM
I set 100px as min-height on the div but it gets overlay each other if its real height is greater than 100. In above case, I expect the div shows hello world in one block but it doesn't. If you inspect the dom structure you will find that the <p> doesn't extend its parent div height. How can I fix it?
Since you've set height 200px on the .div1 flex box tries to fit all the child elements inside 200px, but the min-height prevents it to fit all children within the 200px.
Depending on what you want to achieve you might want to change the height on the .div1 or add flex-shrink: 0 on .div2
try changing the height of the paragraph to inherit.
p {
height: inherit;
}
this will make it inherit the height from its parent.
see the result here
Alternative solution is to add display: table; to your div2.
There is an inline-block element with 100% height and width :
<div style="width: 100%; height: 100%; background: red; display: inline-block">Y</div>
Why doesn't this div take up whole height, but takes up full width?
An auto width on a block box causes it to be as wide as its containing block allows. An auto height, on the other hand, causes it to only be as tall as its contents.
The block box in question is body, and by extension, html. Neither element has an intrinsic height (even though the initial containing block does), so the height of both elements defaults to auto.
The 100% width and height of the inline-block respect the used width and height of its containing block, which in this case is body. If you specify any arbitrary height on body, or height: 100% on both html, body, then the inline-block will be adjusted accordingly.
Note that because an inline-block is essentially the same as a block box except laid inline, percentage width and height are calculated the same way as if the element were block-level.
It takes height of its parent
try:
html,body {
height: 100%;
}
That's because a div by default takes full width, unless specified otherwise.
Making it inline-block, just allows it to be inline, but preserving its block nature such as setting width and height, top and bottom margins and paddings.
And the height of every element(not-null) in html markup is same as height of a line.. which can be changed by line-height property.
And if you wish it to take all-height, follow the above answers.
Because your html and body tags don't take full height.
Unless specified otherwise, block elements take full width, but only as much height as needed - it is only natural, since HTML was originally meant as a way to format text documents. You wouldn't want, say, a paragraph to take the full window height.
You must set their height to 100% to get it work - stretch them to the window height:
html, body {
margin: 0;
padding:0;
height:100%;
}
http://jsfiddle.net/gdyLs/1/
You need to specify height to html and body then only that div will take 100% height
html, body{
height: 100%;
}
I'm building some tests around height:100%.
On the THIS page you can notice the blue area doesn't stretch its height with the page content, even though it is assigned to have the CSS style of:
height:100%;
Any help on solving or trying to understand this behaviour?
Set height: auto on your body element,
body {
width: 100%;
font-family: sans-serif;
height: auto;
}
Update
Ok, wasn't aware it needs to be 100% despite lesser content.
What you can do is,
give your body some height (say 1000px). And then the 100% on your section will expand to 1000px.
PS: min-height won't work. You'll need to provide a height in px or em.
Although, I'm not very sure on why elements cant figure out 100% of 1000px and NOT 100% of 100%
If you want that section to always be 100% height, you could use min-height: 100% instead of height: 100%. If not, you'll have to give the parent a height (like the html), and then use height: 100%.
the theory behind the behaviour is that if you want to have an element filling the 100% height of a window, you have to make sure that parents of such element also fill 100% of the browser window .
The idea is clear, if you are setting 100% height, you have to ask: 100% of what exactly?
The answer is of a parent.
Of course, this applies to elements without the position: absolute or position: fixed which are not in the "flow" of the document.
An illustration of the problem is very clearly seen in my fiddle: http://jsfiddle.net/AVKnJ/
I hope it enlightens a bit.
EDIT:
is this the desired behaviour?
you indeed have to use height: 100% for containers (html, body) and min-height: 100% for the elements you expect to exceed the height of the window.
http://jsfiddle.net/7jDFD/15/
I gave the #header 82px height in CSS, but even though the #logo is its child, it doesn't get the 82px height. Should I just give #logo 82px height in CSS too?
Code: HTML & CSS
And also, I guess there's something wrong with HTML. I use Sublime Text and although all the other divs look colorful, the #header at line 10 looks pale. What's wrong with him?
By default, an element's height is not inherited, it is automatic. That means the height will be automatically determined based on the content inside it.
You can explicitly set the child's height to inherit (height: inherit) and it will inherit whatever height you specify on the parent as well. See this jsFiddle example.
unless you give a child div a height, it will wrap it's content. If you want to have the same height as the parent, set the child's height to height:100%