I assumed until now that by default, according to the normal layout behavior, the <body> element filled up 100% of the height of the container <html> element even when position: static was set.
However, a simple experiment proved my assumption wrong and I was shocked.
I do understand that in the normal layout behavior, block elements' heights are elastic and stretch to fill their entire contents. However, for some reason, I thought this did not apply to the <body> element.
So, in my simple experiment, I have the following HTML:
html {
background-color: white;
}
body {
width: 50%;
background-color: gray;
margin: 0 auto;
min-height: 100%;
height: 100%;
/* position: absolute;
left: 22%; */
}
<h1>Nice sounds</h1>
<p>Zoo zoo zoo</p>
<p>Koo koo koo</p>
<p>Boo boo boo</p>
<p>Poo poo poo</p>
If I leave the position: absolute; commented as it is just now, then by default, in the static layout, the body behaves just like any other block element and is only as tall to fill up its contents, ignoring the rules height: 100%; and min-height: 100%. It looks like the picture below.
If, however, I change the positioning to absolute, i.e. if I uncomment the following:
position: absolute;
left: 22%;
Then of course, it obeys the height: 100%; min-height: 100% rules. It then fills up the entire height of the browser like so:
Is this the normal behavior? Does the <body> element behave just like any other block element with respect to its layout rules, esp. with respect to its height?
TL;DR: Yes, this is the normal behaviour.
However.
Once upon a time, there was an older standard where body did have the height of the viewport by default. Long ago.
Also, some obscure features of HTML may confuse matters. If you do not set the background-color property of the html element, the background of body will be "inherited" by html, so that the whole window has this background, making it look as if the body takes up the whole window, which isn't the case!
When it's static it has a parent which is html and when you use static positioning in that case it thinks within the parent. html by default as any other block has height: auto so if you change that to 100% it becomes as you expected.
body has a parent html and build its sizes according to its parent.
Related
A simple question that might help me to ask a more complicated problem that I will not explain here now.
Do you know why the red color does not take all the background of the page?
https://stackblitz.com/edit/angular-hp237w?embed=1&file=src/app/app.component.html
Of course in my problem I do not want to modify the files 'index.html' and 'style.css'
Thank you in advance, have a nice day
Your background-color: red only applies to your div, which has a height of whatever total height of the elements within it by default. In order to take place of the entire page you just need to set the height to 100vh
.back {
height: 100vh;
background-color: red;
}
The parent block element, in this case <body>, does not have a 100% height. It also has by default a certain margin. The body element's block parent also has no height set. This is the <html> tag. You can fix this in two ways if you don't want to edit a global css file:
Add this in your component css, which is pretty ugly and so much frowned upon
::ng-deep body,
::ng-deep html {
height:100%;
margin: 0;
}
.back {
height: 100%;
}
Another way is to make the position absolute. This work because the relative parent of the element is the <html> element viewport:
.back {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
I am having trouble understanding why when i am using percentages, i have no appearance on my screen, but when i use pixels i do.
this is my code:
<body>
<div class="container-content"></div>
</body>
body{
width: 100%;
height: 100%;
}
.container-content{
width: 50%;
height: 50%;
margin: 0 auto 0 auto;
background-color: green;
}
if i occupy my div with some content it will not have the affect i want.
if i change the position to absolute or fixed it will have the affect i want (just a box).
if i only change instead of percentages to pixels it will also have the affect i want (just a box).
what am i getting wrong here?
thanks
In cases like these, both the html/body elements need a height of 100%. In doing so, it should work.
Example Here
html, body {
height: 100%;
}
The reason it wasn't working was because the html element had an initial height of 0. Since all the children elements were using percentage based values, 100% of 0 is also 0 - thus nothing was appearing.
this is all over the stackoverflow,but it doesn't work for me.
using twitter bootstrap 3, i need to set the jumbotron class div to full display height.
this is my test site:
http://test.ulkas.eu/
i read i shall include
html {
height: 100%;
}
body {
min-height: 100%;
padding-top: 50px;
}
but it still doesn't work. maybe i got some syntax error somewhere?
In order to apply 100% height property to inner divisions you need to mention the same property to all the parent divs. So add
body{height: 100%;min-height:100%;padding-top:50px;}
.jumbotron{height:100%;}
to your body as well as to jumbortron class
The height of your html / body will always only be the height of your content - those tags behave slightly different to standard div / block tags. To get something to be truly 100% high your best bet is to remove it from the standard flow of the page using position: absolute / fixed, then set your div to be 100% high. Something like this:
.fullheight {
position: absolute;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
z-index: 2;
}
I think it's always worth setting a z-index on anything I position outside the normal page flow, allows you to control which parts appear on top of others.
I need my content column to expand to the bottom of the page when it's content is shorter than the viewport, but still expand when the content is longer. The column has to come down a little ways from the top of the page.
Here is the HTML for what I described:
<html>
<body>
<div id="content">
<p> asdf ghjkl </p>
</div>
</body>
</html>
Here is the CSS
#content {
min-height: 100%;
margin: 100px 0 0;
}
The issue with this method though is that min-height: 100%; does not take padding into account so the page is always bigger than what I want.
This is the behavior I am seeking:
Is there any way to accomplish this without using Javascript?
Absolute positioning can do this for you:
First remove your min-height and margin then apply this rule to your CSS.
#content {
position: absolute;
top: 100px;
bottom: 0;
}
In CSS3, you can use box-sizing
By setting it to border-box, you can force the browser to instead render the box with the specified width and height, and add the border and padding inside the box.
Ok blokes and birds, here's what I ended up doing. Instead of solving the problem directly, I added a few fixer divs.
First off, here are a few observations:
We know that when #column is longer than the viewport, the length of #column needs to specify the height of <body>.
If #column is shorter than the viewport, the height of the viewport needs to specify the height of <body>.
The column needs stretch to the bottom of the page under all circumstances, regardless of how long it's content is.
For the first criteria we need to make sure that height: auto is set on <body>. Height defaluts to this if it's not set. We also need to make sure that #column has height: auto; and overflow: hidden; so that it expands to the size of it's content.
For the second criteria we need to set position: absolute; and min-height: 100%; on <body>. Now the length of <body> will expand when #column is longer than it, but won't go shorter than the viewport. This next part is where the fix comes in.
For the third criteria, the trick is to add some extra divs and give them some special css. In my HTML I added two divs right outside of #column.
<div id="colhack-outer">
<div id="colhack-inner">
</div>
</div>
<div id="column">
...
</div>
For the outside div you postiion it absolutely and set it's height to 100%, force it to use an alternative box model and shift it's content area using padding. You apply all your column styling (background color, border radius, shadow, etc.) to the inner div. Here is the CSS I applied to them:
#colhack-outer {
height: 100%;
padding: <where you want to shift the column to>;
position: absolute;
width: 50%;
}
#colhack-inner {
height: 100%;
width: 100%;
background-color: #303030;
}
You also have to make your actual content container use that special box model and shift it with padding too:
#contentbox {
position: relative;
padding: <where you want to shift the column to>;
width: 50%;
color: #EEEEEC;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
Live example here: http://nerdhow.net/
post a comment if you have questions or if something wasn't clear.
You can achieve it by using Absolute positioning and adding extra block (if you need a solid background under you column).
So, when you'll have a little content, you'll get http://jsfiddle.net/kizu/7de7m/
And if you'll have a lot of content, you'll get http://jsfiddle.net/kizu/7de7m/3/
Try this jsFiddle: http://jsfiddle.net/8R4yN/. It seems to work the way you want. I took some tips from: http://www.tutwow.com/htmlcss/quick-tip-css-100-height/. It looks like the overflow is causing the hiding, and the #content inside there is also not helping out :).
So, I am trying to set an image to be 100% of the height and width of the html element (really the browser window is what I'm going for). I have the CSS set as
html{
width: 100%;
height: 100%;
}
img{
width: 100%;
height: 100%;
z-index: 0%;
}
And the width behaves right, but the height does not change. I tried setting it to height: 2% and it stayed the same height. I don't want to use px to set the height because I want this to work on mobile devices, but HEIGHT, Y U NO WORK?
You also need to set height: 100% on body.
Going with your exact example, you could do:
html, body, img {
width: 100%;
height: 100%;
}
However, it looks like you're possibly trying to get a fullscreen background image (because you used z-index - by the way z-index does not use %, just a plain number).
In that case, you should instead use one of the methods from here:
http://css-tricks.com/perfect-full-page-background-image/
That is because the image element is not the direct child of the html element. You have to specify the height for the body element also, and any other element containing the image element.