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>
Related
Guys I'm already getting slightly annoyed, I'm not able to find out why I'm managing to set the height of the divs in percentage, because I saw it on a website just to confirm that setting the height of the divs in percentage does not work, unless it is div be a child div, so why the hell can I set the height of the elements in percent even when the div doesn't have a parent div?
Well, my body code in css looks like this:
html,body{
width:100%;
height:100%;
font-family:Verdana;
color:#fff;
backgroundd:#151515;
}
Could anyone explain why this is happening? Why I’m very curious to know why percentage height works when it shouldn’t, this shouldn’t happen right?
If the parent element... body has a width and height of 100% (being the browser frame, should the html element have a width and height of 100%), then of course any children of the body element is going to be relative to that.
html, body {
width: 100%;
height: 100%;
}
body {
margin: 0;
}
.container {
height: 50%;
width: 50%;
background: black;
}
<body>
<div class="container">test</div>
</body>
This is exactly what should be happening.
My header doesn't appear anywhere. I would like to know how to fix it.
body {
background-color: antiquewhite;
font-size: 100%;
width: 100%;
height: auto;
}
nav {
height: 8%;
width: 100%;
position: fixed;
display: block;
background-color: grey;
z-index: 1000;
}
header {
width: 100%;
background-image: url("https://placehold.it/50/50");
}
<nav>
<h1>...</h1>
</nav>
<header>
</header>
This would do the trick:
html, body {height:100%;}
if you use percentage for height the parent needs to have a fixed height (so actually it's 8% of something) or at least ALL parents till html tag need to have a percentage height.
The header tag has no contents, and therefore 0 height. Try adding some text inside the header tags or add a height with css.
My first thought would be give that header element some (html-)content (like text) or specify a height explicitly as of my experience container elements are not "shown" when their boundaries are not declared in any way.
Otherwise you may have a look here as this seems to be the same problem basically to me.
If you are using e.g. Firefox, you can use rightclick->inspect element to see if the element is simply not rendered (i.e. because of no height) or otherwise trace the applied css, manipulate css in place (non permanent) or even debug javascript.
Hope this helps.
I am trying to put a div on the left side of my webpage that has not to be fixed and has to be 100% of the height and 30% width. I mean, that if you scroll, it will be scrolled also and it will not be fixed in the same position all the time.
The problem that I am having it is that when I put height: 100%; it does not cover the height that I am indicating to him. It only covers the full height when I set position:fixed but never when I set it to static, absolute or relative.
What I though it is that it could be that I had to set width: 100%; and height: 100%; to the <html> tag but it does not seem to have any difference if I compare it with <body> tag (I know there are differences between both tags but I do not know if in this case they will be aplied, I think no).
Here is my html code:
<html>
<head>
</head>
<body>
<h1>This is a prove</h1>
<div id="proveDiv">
<h1>Hello</h1>
</div>
</body>
</html>
Here is my CSS code:
html{
/* position: relative; I comment these lines because I saw that there are not any effect
width: 100%;
height: 100%; */
}
body{
position: relative;
width: 100%;
height: 100%;
}
#proveDiv{
position: fixed;
width: 30%;
height: 100%;
background-color: red;
}
Here is the fiddle in which you can see the effect. Just try to change the position attribute on proveDiv id css and you will se what I refer to.
I am stuck here and I cannot find any solution by myself or in SO. Am I missing something?
Thanks in advance!
Set the min-height of the div to view-port height like min-height: 100vh;. Updated fiddle
#proveDiv {
width: 30%;
min-height: 100vh;
background-color: red;
}
Based on your description, this is the working demo that I came up with.
http://codepen.io/BenCodeZen/pen/JXLbjN
The solution is based on a display: flex; on a parent container and defining the height of the element using height: 100vh; instead of 100%. By using flexbox, it will allow you more control over the layout for responsive design.
Let me know if you have any questions.
The reason why this happens is because, when you use the attribute fixed, for some reason, the div's height will increase because it's inherited by default from its container. In this case, when your div is fixed and its height is set to 100%, the div takes the full height of its container which is the body.
PS: In case you want the div to have its initial height, you can use position:initial.
On the other side, using position:relative is your best option.
By default, the div will have its own initial height which depends on its content. When you have more text inside your div, it will automatically increase its height.
To solve your problem, use a relative position and set the height as you want. (100% will make the div take the height of the body)
Note that it is important that you set both the body & html tag's height otherwise it won't work. (If you need further explaination, just comment below)
This is how your CSS should be:
html,body{
width: 100%;
height: 100%;
}
#proveDiv{
position: relative;
width: 30%;
height: 100%;
background-color: red;
}
If you have any questions, comment below.
If I have the following HTML:
<!doctype html>
<html>
<head>
<style>
html {
height: 100%;
}
.square {
background-color: red;
width: 100px;
height: 100px;
margin-bottom: 2000px;
}
</style>
</head>
<body>
<div class="square"></div>
</body>
</html>
I would expect that the margin of the div would cause the window to become scrollable. This works as expected in Chrome, but in Safari the window is not scrollable. Why is this? Is this a bug?
The html height 100% is deliberate.
Obviously Safari ignores the margin-bottom if nothing follows below that element.
I tried to put an additional element below the .square div that is made invisible by height: 0px; (and also by color: #fff; in this particular case). You don't see that element, but now the scrollbar appears, the padding is not ignored anymore:
http://codepen.io/anon/pen/eJRexY
I then tried just to use only a space inside that "invisible" element, but that didn't work the same way - there has to be some "real content". However, with a as only content of that element it works too.
In fact, you don't even need another DIV, just adding a after the .square div also makes the scrollbar appear in Safari.
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;
}