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%;
}
Related
This question already has answers here:
How wide is the default `<body>` margin?
(4 answers)
Closed 2 years ago.
I am trying to display a rectangular image in html/css but the image area is being displayed as a square. Meaning that the image displays properly but there is a blank space above and below the image.
I've tried setting image height and width on the image attribute in html but still no luck.
<img src="images/countries/071-serbia.png" style="width:360px;height:240px;">
and css
img{
display: block;
max-width:auto;
max-height:240px;
width: auto;
height: auto;
}
What am I doing wrong? Image size should be width 360 height 240.
That is because you have not done a CSS reset.
Try:
* {
padding: 0;
margin: 0;
}
img{
display: block;
max-width:auto;
max-height:240px;
width: auto;
height: auto;
}
<img src="http://lorempixel.com/360/240/" style="width:360px;height:240px;">
Try writing the attached code it will surely work and if it doesn't let me know in the comments I will try my best to help you.
I have a suggestion for you that instead of px and %, Use Viewport Units like vw for width and vh for height because it will help you make your webpage responsive.
img{
display: block;
max-width: 26.354vw;
max-height: 36.529vh;
}
<!DOCTYPE html>
<html>
<head>
<title>Images</title>
</head>
<body>
<img src="Images\sample1.jpg">
</body>
</html>
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.
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;
}
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 have a page and I want to set up my body to 100% so it can't take the screen size and inside body there's a mainContainer div that weight and height are 90% of the body.
Now, Every time I tried to add a div (LoginInnerContainer) inside and want the div to 30% of the root div and in the middle, for some reason, the body gets longer and the inner container doesn't get in the middle .
Why is this happening and how I can I solve it, while keeping the body the size of the screen? Too bad I don't have enough reputation to post the picture to help understanding what I'm saying.
Here's my HMTL code
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="<?php URL?> public/css/default.css">
<title></title>
</head>
<body>
<div id="mainContainer">
<header>
</header>
<div id="loginInnerContainer">
<div id="loginLogoContainer"></div>
<div id="loginFormContainer"></div>
</div>
</body>
</html>
and there's my CSS so far but the #loginInnerContainer get in the middle and the page gets longer than I need it.
#mainContainer {
/* height: 590px;*/
height: 90%;
width: 90%;
background-color: white;
margin: 50px;
}
html, body{
height: 100%;
}
html {
background-image:url('../images/wood-dark.png');
height: 100%;
}
body {
width: 100%;
min-height:100%;
display: block;
}
#loginMainContainer{
height: 100%;
padding:auto 0;
}
#loginInnerContainer{
background-color:blue;
width: 100%;
height: 30%;
margin:auto 0 auto 0;
}
first of all i would reset the margin and padding of the whole page:
*
{
margin: 0;
padding: 0;
}
More info.
This way some default paddings and margins will be resetted.
Next thing is that you're using margin for your #loginInnerContainer. Margin is always outside the container, you want to use padding for this. More info here.
Though the page will still be bigger as needed...
This is because your padding will also extends the container. to exclude this you could use box-sizing.
Now you can also set your width and height to 100% of the screen, without paying attention to the padding.
jsFiddle
Hope this helped you :)