<style>
html, body {
height: 100%;
}
img.one {
height: auto;
width: auto;
}
img.two {
height: 50%;
width: 50%;
}
</style>
In the css above, when I take out the height property of body and html something seems to happen but I don't understand what.
What is the purpose of setting the height to 100% for body and html?
Add border to see the differences.
html, body {
height: 100%; /* Ex: Change it 100% to %75 */
border: 2px solid red;
}
When you done you can remove the line.
If you remove the height from html, body then img.two { height: 50%; } has no reference height any more. 50% of what should it then be?
Related
I am pretty new to CSS and I did what I intended to do, which is to make my window width and height 100% for a div so it fills up my window. However, what I am confused about is that I had to add:
.myDiv{
height:100%;
width:100%;
overflow: hidden;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAATklEQVQYV2NkYGAwZmBgOMuAACA+CKCIMSIpADGRNaEYgKwQ3WQUjTCF6CYhWw2WAynEpgjmIpg7jUlSiM0TWK2GWUOUZ7ApxggeogIcABHJFtfoX9tJAAAAAElFTkSuQmCC
) repeat;
}
When I didn't add overflow: hidden;I got a little bit of whitespace above myDiv, which is the first div of my html. To avoid this, I came across overflow:hidden but the idea of overflow: hidden is that the content of the div should be clipped. However, in my case, the content of myDiv is expanded to cover the whitespace after adding overflow:hidden; Why is that so?
margin of body element is set to 8px that is why..
With vw and vh: (not fully supported) see can i use vieuwport units
body {
margin: 0;
}
div {
width: 100vw;
height: 100vh;
background-color: green;
}
<div>MAGIC</div>
with % height is not affected on block elements:
Eumz width is 100% on block element no need to define it again
body {
margin: 0;
}
div {
background-color: green;
}
<div>MAGIC</div>
Edit: final
body {
margin: 0;
}
div {
min-height: 100vh;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAATklEQVQYV2NkYGAwZmBgOMuAACA+CKCIMSIpADGRNaEYgKwQ3WQUjTCF6CYhWw2WAynEpgjmIpg7jUlSiM0TWK2GWUOUZ7ApxggeogIcABHJFtfoX9tJAAAAAElFTkSuQmCC
) repeat;
}
<div>MAGIC</div>
All browsers have set padding or margin around the edge of the web page so as to not have text right next to the screen.
You also don't need to use the overflow: hidden property if you use vw and vh which specify to be 100% of the viewport height/width.
This needs to be reset in your CSS:
html,
body {
padding: 0;
margin: 0;
}
.myDiv {
height: 100vh;
width: 100vw;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAATklEQVQYV2NkYGAwZmBgOMuAACA+CKCIMSIpADGRNaEYgKwQ3WQUjTCF6CYhWw2WAynEpgjmIpg7jUlSiM0TWK2GWUOUZ7ApxggeogIcABHJFtfoX9tJAAAAAElFTkSuQmCC
) repeat;
}
<div class="myDiv"></div>
Viewport Units
Add * { margin : 0; } in the beginning.
Here is the snippet.
* {
margin : 0;
}
.myDiv {
position : absolute;
height: 100%;
width: 100%;
overflow: hidden;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAATklEQVQYV2NkYGAwZmBgOMuAACA+CKCIMSIpADGRNaEYgKwQ3WQUjTCF6CYhWw2WAynEpgjmIpg7jUlSiM0TWK2GWUOUZ7ApxggeogIcABHJFtfoX9tJAAAAAElFTkSuQmCC) repeat;
}
<div class='myDiv'></div>
I have an element with 100% height. If there are a lot of blocks, then they go beyond it.
jsfiddle example: http://jsfiddle.net/yPqKa/
How to fix it?
Thanks in advance.
CSS:
html, body {
height: 100%;
width: 100%;
}
.content-background {
background-color: #000;
height: 100%;
width: 100%;
}
.content {
background-color: #eee;
height: 50px;
width: 100%;
margin-top: 60px;
}
Set a min-height on the body :
html {
height: 100%;
width: 100%;
}
body{
min-height:100%;
}
DEMO
This will allow the body to adapt it's height to the overflowing content.
The problem is that you have set the height of the html and body elements to 100% of their container, which restricts them to be smaller than the elements they contain. If you remove the height: 100%; from the second line, it will work.
I want to set my wrapper to be 100% height. But I am unable to do so despite setting the height to 100%.
Currently, My main_wrapper is empty. It should give me a background color of red.
My aim is to have a footer at the bottom using fixed but that is off topic. But it will be good if someone could give a link for position fixed.
<html>
<head runat="server">
</head>
<body class="body">
<form id="form1" runat="server">
<div id="main_wrapper">
</div>
<div class="clear"></div>
</form>
</body>
</html>
* {
margin: 0; padding: 0;
border: none;
box-sizing: border-box;
-moz-box-sizing: border-box; /* Firefox */
-webkit-box-sizing: border-box; /* Safari */
}
.clear {
clear: both;
}
html {
margin: 0;
width: 100%;
height: 100%;
/* min-width: 640px; min-height: 480px;*/
}
body {
margin: 0; /*Top and Bottom 0, Left and Right auto */
width: 100%;
height: 100%;
}
.body #main_wrapper {
margin: 0;
width: 100%;
height: 100%;
backgroud: #f00;
}
#form1 #main_wrapper {
margin: 0;
width: 100%;
height: 100%;
background:#f00;
min-width: 640px;
min-height: 480px;
}
maybe it's just typo :
.body #main_wrapper {
margin: 0;
width: 100%;
height: 100%;
backgroud: #f00; } <<-- typo
There is nothing wrong with your code.
You are setting your divs height and width correctly but you forget that your div is inside a form, which you are not specifying the height/width.
Just add
#form1{ width: 100%; height: 100%; }
To your css and it will work fine.
EXAMPLE
er, yeah... check out http://jsfiddle.net/5PZcq/2/
#main_wrapper {
position:absolute;
margin: 0;
width: 100%;
height: 90%;
background: #f00;
}
#footer {
position:absolute;
top:90%;
height: 10%;
width: 100%;
background: blue;
}
I think this captures whats going here.
In order to control a div's size with percentages, you have to declare it position:absolute. The clear thing is cool but only works with floating divs. In my example I have the main div (90% tall) and a footer div (10% tall) with opacity less than one I can see entries stuck in the clear, but when the opacity line is removed, the 'clear' div disappears behind the main red div.
So the question is, why do you even need the clear thing at all? Obviously I can't tell the complete scope of your project. Does this example make more sense?
Ok really simple question, I want to make a section 100% height of the viewport, I understand that the parent element needs to have a defined height but it still doesn't work for me. Help me understand if I'm overlooking something!
html {
height: 100%;
}
body {
margin: 0px;
padding: 0px;
}
section {
width: 100%;
height: 100%;
background:red;
}
http://jsfiddle.net/SzBM5/
use html, body{ height: 100%; }
demo
You have to set the height 100% at the BODY and the HTML.
body, html {
height: 100%;
}
http://jsfiddle.net/pGa6t/
Your need to set height:100% for body also.
Fiddle
Use This Css DEMO HERE
html, body {
margin: 0px;
padding: 0px;
height:100%;
}
section {
width: 100%;
height: 100%;
background:red;
}
I'm trying to offset a body tag by some padding. However, I'd like to have the body adjusted so that it doesn't cause it to fall below the browser window and induce scrollbars.
Here is an example of what I'm trying to accomplish: http://jsfiddle.net/jM9Np/1/
HTML:
<body> </body>
CSS:
html, body {
height: 100%;
}
body {
margin-top: 20em;
background-color: LemonChiffon;
}
Ideally I'd like to subtract 20em from the body's height. Is there anyway to do this without any Javascript and in a manner that is supported by all browsers (with exception of Internet Explorer)? Thanks.
It depends. You can use borders, f.ex:
html {
height: 100%
}
body {
border-top: 20em solid #fff;
background-color: LemonChiffon;
}
http://jsfiddle.net/jM9Np/10/
But the best way IMHO would be to add another DIV inside the body and position it absolute:
html, body {
height: 100%
}
div {
position: absolute;
top: 20em;
bottom: 0;
left: 0;
right: 0;
background-color: LemonChiffon;
}
http://jsfiddle.net/za4e3/
I would do something like
html{
height: 100%;
background-color:black;
}
body {
height:80%;
margin-top: 20%;
background-color: LemonChiffon;
}
If you're targeting current versions of major browsers, you're lucky! This should work even on IE9 (see full support table):
html {
height: 100%;
}
body {
margin-top: 20em;
height: calc(100% - 20em);
background-color: LemonChiffon;
}
http://jsfiddle.net/jM9Np/3/