This is my code.
<!DOCTYPE html>
<html>
<head>
<style>
html, body { min-height: 100%; }
</style>
</head>
<body>
</body>
</html>
Chrome, Firefox, and Safari inspectors all show the html element with height equal to the browser window as should be the case, but the body element with height 0. Setting the height (not just min-height) of the body element to 100% doesn't help. The body element should have height equal to 100% of its parent element, the html element, which has height equal to the window. So why doesn't it?
Try restricting its height to always only be 100% using height and min-height, like so:
html, body {
min-height: 100%;
height: 100%;
}
WORKING EXAMPLE
Another possible way is to give the parent (in this case, the html tag) a height of 100%, and then give the child (body tag) the min-height, like so:
html {
height:100%;
}
body {
min-height: 100%;
}
WORKING EXAMPLE
Here is a similar question to yours that can answer some more indepth questions - Make body have 100% of the browser height
The reason this does not work is percentage based height vales require that the height be set on the parent element (except for the html node, which is based off the viewport). While the browser will always render the html node as the full browser, you actually need to set the height in CSS for the body to base the percentage off of. I believe what you are looking for is the following.
html {
height: 100%;
}
body {
min-height: 100%;
}
JSFiddle
This is a cleaner solution to setting both body and html to height: 100%; as the body will commonly be larger than 100% of the viewport.
I think it is working .Add bgcolor to your body element and see if it is 100%. I tried following code which is working -
<!DOCTYPE html>
<html>
<head>
<style>
html, body { min-height: 100%;}
</style>
</head>
<body bgcolor="#00CC33">
<div>HELLO</div>
</body>
</html>
Restricting the height to always be the height of its parent element will work but you need to add a light CSS reset:
html, body{
min-height:100%;
height:100%;
padding:0;
margin:0;
}
For a full CSS reset see normalize.css
As to why min-height is not working, see: child inside parent with min-height 100% not inheriting height
Also note, using body,html { height: 100% } instead, works fine.
http://jsfiddle.net/ND74j/
This is something I recently came across and was able to resolve with this:
body {
display: inline-block;
min-height: 100vh;
width: 100%;
}
// this class is a div containing all your page's content
.body {
width: 1400px; // arbitrary number
margin: auto;
}
Related
This question already has answers here:
Percentage Height HTML 5/CSS
(7 answers)
Child with max-height: 100% overflows parent
(11 answers)
Closed 4 years ago.
Okay, so I have read through probably every answer to this and similar questions on this site and multiple others, but nothing seems to be working. I have a basic web page that has a map on it. I have been tasked with making the map full screen within the browser window, NOT full screen on the computer screen. Below is the snippet of code I am working with. I have my width set to 100% and that's working fine. I tried having my height set to 100% as well, but the map disappears off the page when that happens. I also tried setting the height to auto, but that gives me the same result as height 100%. Any suggestions on how this can be fixed?
<style>
#map {
width: 100%;
min-height: 100%;
</style>
Try to put this style to the container div, not the map itself.
<div class="container">
map here
</div>
<style>
.container {
width: 100%;
min-height: 100%;
</style>
You should try define height value for map tag. For exaple:
Your map code in iframe tags, you should define height value for iframe tag.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Set DIV Height to 100% Using CSS</title>
<style type="text/css">
html, body {
height: 100%;
margin: 0px;
}
.container {
height: 100%;
background: red;
}
</style>
</head>
<body>
<div class="container">The height of this DIV element is equal to the 100% height of its parent element's height.</div>
</body>
</html>
For making a container consume the entire screen, I prefer using
.container {
height: 100vh;
}
height: 100% means element take all height of its parent container. Generally, you should use:
body, html {
height: 100%;
}
.container {
height: 100%;
}
Now, the title may make sound like the laziest question but bear with me.
The approximate structure of my site is of the format:
<html>
<head></head>
<body>
<div class="navbar"></div>
<div class="container"></div>
</body>
</html>
The view is styled by bootstrap, and the overriding css is placed in
app/assets/stylesheets/bootstrap_and_overrides.css.less
Now, I have tried changing the height and min-height of the body and container like this;
body {
min-height: 100%;
}
.container {
min-height: 100%;
}
etc, but the outcome is unexpected.
If I increase the height of container to exceed the height of body, it simply overflows the boundaries of body, instead of body growing accordingly to match it. In a similar manner, if I decrease the height of body to fall below the height of container, the container will not shrink to match body.
I am not very proficient in CSS so I might be overlooking something very fundamental here, so any help or pointers are appreciated.
Try this,
body {
height: 100%;
}
.container {
height: 100%;
}
or,
body {
max-height: 100%;
}
.container {
height: 100%;
}
So I'm trying to make "sections" with section that covers up the full height of the current page. Kind of like this. As you can see the width is set to 100. And heres my code
.cont{
background: #009dff;
height: 100%;
}
But for some reason it doesn't seem to work. Here's a demo. Any ideas?
This should do it.
http://jsbin.com/vijaxuyu/2/edit?html,css,output
html{
height:100%;
}
body{
height:100%;
}
section {
height: 100%;
}
The height % of html and body isn't by default 100%. Hence, you need to inform your browser explicitly. The reason why you have to specify height and sometimes min-height to html and body respectively is because neither element has any intrinsic height. Both are height: auto by default. It is the viewport that has 100% height, so height: 100% is taken from the viewport, then applied to body as a minimum to allow for scrolling of content.
I am using
div {width: 100%; height: 100%}
because I need to have a div which should be "full screen-ed" on the beginning of my page. I've read that I need to set
html, body {width: 100%; height: 100%}
too. It looks great but after this I have some content. Here my problem begins. HTML still have only the height which was set by height: 100%. And content below only overflows from html tag. Is there any way to avoid this problem only with CSS and HTML ? I can do it with javascript but I would like to do it another way.
Thanks for your answers.
P.S.: http://honzakopecky.8u.cz/masaze/
You have stumbled across a bug existing in (at least) Chrome and Firefox. I don't know how many browsers are affected, but it's certainly in those two.
When an element has height: 100% then it will correctly inherit from a parent which has a defined height but it will not inherit from a parent with min-height. It's almost as if the browser doesn't recognize the parent's height at all when using min-height.
The only thing you can do to get around this bug, is use javascript like you mentioned, or relative/absolute positioning. For example:
html, body { min-height: 100%; }
body { position: relative; }
section { position: absolute; }
You may need to tinker with your top, left, right, and bottom on the section element but you get the idea.
Try
min-height: 100vh
width: 100%
for the div and don`t give any width and height to the html or body tag.
To do this you must to apply *. It means set margin and paddings of ALL elements to 0. Because the browser applying different values.
<!DOCTYPE html>
<html>
<head>
<title>example</title>
<style type="text/css">
* {
margin:0px;
padding:0px;
background-color:red;
}
div {
background-color:blue;
height:100%;
width:100%;
}
</style>
</head>
<body>
<div> text </div>
</body>
</html>
I thought this was a simple fix:
body
{
height: 1054px;
}
html
{
height: 1054px;
}
Wouldn't this set the max height of the page to 1054px? I have also tried these workarounds but they didn't work with what I wanted:
html
{
overflow: hidden;
}
<body><table id = "myTable"><tr><td> ..... </tr></td></body>
#myTable
{
height: 100%;
}
How do I set an absolute height for a webpage? Also I am more interested in why the body and html height calls wouldn't work. I do a lot of position: relative calls, would that have an effect on it?
width and height do set absolute widths and heights of an element respectively. max-width, max-height, min-width and min-height are seperate properties.
Example of a page with 1054px square content and a full background:
html {
min-width: 100%;
min-height: 100%;
background-image: url(http://www.example.com/somelargeimage.jpg);
background-position: top center;
background-color: #000;
}
body {
width: 1054px;
height: 1054px;
background-color: #FFF;
}
However, since you seem to be table styling (urgh), it would probably be far more sensible to set the height of the table to 1054px and let the body adjust itself automatically to encompass the entire table. (Keep the html style proposed above, of course.)
Good question. I’m not sure, but have you tried using a single <div> (or <section>) inside <body>, and setting the width, height and overflow: hidden on that? Browsers might give special treatment to <html> and <body>.
Did you try setting the CSS margin of body to 0? Otherwise there will be some amt (depending on browser) of margin that is included in your page height (and width) but isn't controlled by the height style;
In CSS:
body: { margin: 0; }
IN jQuery:
$('body').css('margin', 0);