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%
Related
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.
I am trying to achieve the fade-in and fade-out effect as mentioned here Jquery replacewith fade/animate, but I would like to avoid content below it moving up and down. So I define a container with fixed height.
<div class="container">
<div id="foo"></div>
</div>
<h1>content below</h1>
If I set the height of container using px, "content below" will not move up and down during the animation.
.container {
height: 475px;
}
But if I set "height: 90%;", then it will. Why?
I prefer to use percentage, so how to in this case?
Percentages are relative and pixels are absolute. The computer knows what 400 pixels is. However when the measurement is relative, the final absolute output must have a relation with some other measurement. 400px is 50% of 800px.
If example you have no content in your <body>, the page collapses and it has no height.
If you set <body>'s height to 100%, it still has no height because its parent <html> has no height. However by setting <html>'s and <body>'s heights to 100% you will fill the viewport (html's "parent").
This applies to other block elements like divs.
Pixels are an absolute unit of measure. Percents are relative to some other value.
Each have valid use cases, neither is "better".
Reference : More detail here
Here is the prototype I am trying to implement
Here is what I have right now.
I learned from my previous question Side to Side How to align the column of options with the picture - using display inline block attribute- Display.
Now I am trying to align the picture so the picture doesn't stretch past the entertainment option like in the prototype. Here is JSFiddle
Seeing that a block element like div "occupies the entire space of its parent element" - Block Element, the Css Height attribute made the most sense to me to use here.
Here is my code for setting height in both the image and the div containing the image
The div
.sidebar {
display:inline-block;
vertical-align:top;
width:70%;
height:3%;
}
The image
#laptop {
width:100%;
height:3%;
vertical-align: bottom;
}
The 3% was just a hardcoded test value but in both instances, the height of the image didn't change. I saw another thread on this - Height Thread but that one said to adjust height as well.
Does anyone know to scale the height of the image in this situation?
How I solved this issue was I realized that by definition, a div is a block element that "will expand naturally to fit its child elements".
So going off that, I played around with the css width and height attributes and found a height that would cause the image to line up with the entertainment component.
If anyones curious, here is my final img html tag code(height of 240 pixels)
<img id="picture" align="middle" src="zoom-39988392-3.JPG" height = "240" width ="90" />
Taking a shot in the dark without looking at all the code. How are you creating your image, in an <img src=""/> tag or as the background of a div via the css attribute background:url("image.png");? The height and width percentages reference the dimensions of that elements parent element. I'm going to assume that your image has no parent element/container, or that the parent/element container is not set to specified height. Therefore your element is referencing the Viewport who's height attribute is automatically set to auto. Set your HTML and Body elements height attribute to 100%.
html,body{
height:100%;
}
I have some questions regarding the following css that I found:
html, body {
height:100%;
min-width:100%;
position:absolute;
}
html {
background: none repeat scroll 0 0 #fff;
color:#fff;
font-family:arial,helvetica,sans-serif;
font-size:15px;
}
is it necessary to have height and min-width to 100% on the html and body? What's the benefit?
what is the reason for using position absolute?
why did they set the background/color/font on the html and not the body? Is there a difference? Or is it just preference?
It's usually unnecessary. However, there are a few times where you may need it. For example, maybe your base/site-wide website css file specifies the size to be different (you know those sites where the sides are just borders, usually blogs? Those widths have been resized down). Note that when you have percent it's of the parent container. So Div A may have width: 100% but if it's parent container has width: 500px Div A will have 100% of 500px.
There is no reason for position: absolute on the html + body that I can think of. One side effect of absolute positioning is that the element nolonger "floats inline" with the rest of the elements (not sure how you would describe/word this).
For example, position: relative ignores absolutely positioned elements. So if you had Image A (absolute) and Image B (relative) and B had left: 10px;, Image B would be offset from the left of the parent, instead of where A would have been. Hopefully I'm making sense here.
So sometimes I just set "position: absolute" whenever I have a background image. If it's the first child, it everything will show up on top of it (since the new elements are "added on top" and ignore the absolute-positioned element).
The body will inherit those properties, and so yes it's just preference.
Setting the width or height of an element to 100% only works when its parent element is also at 100% of that dimension. Which means that if the body or even html tag isn't, for some reason, at 100% of either height or width, an element inside it with those properties will have 0 height or width.
For example: http://jsfiddle.net/KZaum/
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.