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;
}
Related
<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?
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 have a simple for some but I can't solve the problem for some time now.
I have the problem pasted here on JSFiddle.
I wanted to make div[id='content'] to fill-in the remaining height. I've followed some tutorials on CSS about display: table and display:table-row yet, I can't have it work on mine.
Thanks in advance you would help me big-time.
You need to add:
html{
height:100%;
}
Demo Fiddle
This gives your viewport a size from which the 100% assigned to the body can be calculated, otherwise it is effectively 100% of nothing. You may also want to add a % to the height value for body
Add this:
html, body, html > body, html body {
height:100%;
min-height:100%;
}
The many expressions are for all browsers, IE etc is kinda buggy with only html { height: 100%; }
fiddle
Try this css using position fixed
body {
margin: 0px;
width: 100%;
height: 100%;
background: red;
}
#nav {
height: 25px;
background: blue;
}
#content {
height: 100%;
background: green;
position: fixed;
bottom: 0px;
top: 25px;
width: 100%;
}
Use the CSS min-height property.. I normally set this using java scripts screen.height - header height - footer height..
Regards
Adam
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?
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/