This question already has answers here:
Percentage Height HTML 5/CSS
(7 answers)
height: 100% or min-height: 100% for html and body elements?
(2 answers)
Closed 4 years ago.
The question seems simple enough. Like a good little nerd I've done my research. Everything that I've found says that for something to have height: 100% every nested parent element must have a height for the child div to fill up. And that's exactly what I have.
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style/style.css">
</head>
<body>
<div id="content"></div>
</body>
</html>
That's literally all my HTML. I JUST started this project, which is part of the reason I'm so bewildered. My CSS looks like this:
html, body {
padding: 0;
margin: 0;
}
html {
height: 100%;
}
body {
min-height: 100%;
}
#content {
width: 100%;
height: 100%;
background-color: lightcoral;
}
That's it. That's all my code. The background color of #content is exclusively so I can see the space it takes up. If I add text in the div or change its height to a pixel value in the CSS, the color shows up. If I switch it back to this, it disappears. Additionally, I'm working in Chrome and when I mouse over source in the Elements tab of the dev tools, both html and body are very clearly the height of the window. When I mouse over the #content div, I can see the style in the dev tools where it says height: 100%, but the height is 0px. I'm beyond perplexed. Any ideas?
In the body elementy, you need a "real" heightsetting - min-height: 100%; isn't sufficient as a reference for a relative child element height setting. So change min-height: 100%; to height: 100%; there.
html, body {
padding: 0;
margin: 0;
}
html {
height: 100%;
}
body {
height: 100%;
}
#content {
width: 100%;
height: 100%;
background-color: lightcoral;
}
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style/style.css">
</head>
<body>
<div id="content"></div>
</body>
</html>
P.S.: Your closing <body> tag was lacking the / character - I changed that to </body> in your code
Related
This question already has answers here:
How wide is the default `<body>` margin?
(4 answers)
Closed 2 years ago.
i tried this but it only works when the screen is before the vertical scroller appears, and then when you scroll down the background color is back to white.
.background {
min-height: 100vh;
width: 100vw;
position: absolute;
top: 0;
z-index: -9999;
background-color: red;
}
<div class="background"></div>
The problem is that by default body has padding.
"Manjuboyz" solution works to an extent but a globally applied style might cause issues in the future.
This snippet will fix it by removing the default body padding:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
body{
padding:0;
margin: 0;
}
.background {
min-height: 100vh;
width: 100vw;
position: absolute;
top: 0;
z-index: -9999;
background-color: red;
}
</style>
<script>
</script>
</head>
<body>
<div class="background"></div>
</body>
</html>
If your page is too long however, you will need the position: fixed property, this makes sure that the div will follow the rendered view area on their device by 'fixing' it to the visible view-able screen. W3 has some good examples of it.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
body{
padding:0;
margin: 0;
}
.background {
min-height: 100vh;
width: 100vw;
position: fixed;
top: 0;
z-index: -9999;
background-color: red;
}
</style>
<script>
</script>
</head>
<body>
<div class="background"></div>
</body>
</html>
Just now I ran into a weird probelm, I have a fixed element with height:100%. Everything works well until I open Chrome Dev Tool and enter the mobile debug mode.I found in mobile debug mode the fixed element's height will not 100% but a little overflows. After my repeated debugging, I found the sibling's translateX property affects the fixed element's height. And when I tweak the value of translateX property, the height of the fixed element changes too.
I simplified it into the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Fixed Element Height Not 100%</title>
<style>
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
width: 100%;
}
body {
overflow: hidden;
}
.a {
transform: translateX(100px);
width: 100%;
height: 200px;
}
.b {
position: fixed;
height: 100%;
width: 100%;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div class="a"></div>
<div class="b"></div>
</body>
</html>
Could someone tell me that whether this is expected or not ? If this is expected and what causes this ?
Remove 2nd body tag CSS, which is overflow:hidden and add that property to first body tag CSS, following code will help you.
body {
height: 100%;
width: 100%;
overflow: hidden;
}
not sure but try to use vh instead of %
thinks this article would be very interesting aswell for this matter:
https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
I can't get my div to reach the bottom of the page. Here is my code:
<!DOCTYPE html>
<html>
<style>
#Welcome {
background-color: pink;
height: 100%;
}
</style>
<div id="Welcome">
Welcome!
</div>
</html>
I did not work when I put in height: 100%; I also tried min-height: 100%; but neither one works. What am I doing wrong?
height: 100% property makes the element to take 100% height of parent element. The parent element should have height defined, else the height will be adjusted based on its children.
In your case height of html and body should be set to 100%.
<!DOCTYPE html>
<html>
<style>
html, body {
height: 100%;
}
#Welcome {
background-color: pink;
height: 100%;
}
</style>
<div id="Welcome">
Welcome!
</div>
</html>
One way is to simply change % to vh,
<!DOCTYPE html>
<html>
<style>
#Welcome {
background-color: pink;
height: 100vh;
}
</style>
<body>
<div id="Welcome">
Welcome!
</div>
</body>
</html>
Also, why your code didnt work was because you have tried height:100% but the parent container still wasnt in full height, making the parent containers too at 100% will make it take up full height.
I'm currently trying to make a landing page and I have a problem. There are some white stripes all around the <img>, it looks like this.
I would like the picture to be full-screen, without any stripes etc.
<!DOCTYPE HTML>
<head>
<title>Szafranowka - Apartments & Restaurant </title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div id="container">
<div id="background">
<img src="background.jpg" id="background"> </img>
</div>
</div>
</body>
</html>
And here's CSS:
#container
{
width: 100%;
height: 100%;
}
#background
{
width: 100%;
height: auto;
opacity: 0.6;
position: relative;
}
There is padding automatically applied to the body.
Just add this to your css
body{
padding:0;
margin:0;
}
Edit: Solution to follow up in comments
You will need to remove the <img> tag and change your background div in your css
#background
{
width: 100%;
height: auto;
background: url("background.jpg");
background-size: cover;
opacity: 0.6;
position: relative;
}
By default, each HTML tag has a browser-predefined appearance/style, in your case, body has margin: 8px on Chrome, for example. You need to reset all of those predefined styling rules in order not to have surprises, read about CSS resets at https://cssreset.com/what-is-a-css-reset/
Moreover, in order to stretch the image to cover all the visible area, you need to make sure body has width: 100vw; (viewport width) and height: 100vh; (viewport height) and everything else has 100% on both or inherits them from their parents.
Working snippet at https://codepen.io/Raven0us/pen/KZQejX
The browser applies its own default styles to websites that you can alter with your own css. Take a look at this cheat sheet
An Easy fix for your issue is to add css:
body{
margin:0;
}
In this fairly simple HTML page and CSS stylesheet, both the body and html elements are set to "height: 100%;" and yet the page is slightly longer than the window, creating a scrollbar that I don't want.
I've read through many stack exchange posts about this issue of extra space at the bottom of a page, but have not managed to find a fix or an explanation that works for me.
I am fairly certain that the problem is not being caused by a stray text node in the DOM. I have tried removing all extra white space in between tags in the HTML file to no avail. I have tried styling the body with "min-height: 100%", but then the purple content of the page no longer takes up 85% of the whole window as it did before. I have tried setting "overflow: hidden;" on the html element, which seems to work, but I have no idea why it does. I have even tried using a flexbox to achieve the functionality displayed in the code, but I haven't been able to make that work either.
When I right click on that extra unwanted yellow space on the bottom and click "Inspect Element" I get directed to a "buttonWrapper" div, but I have no idea why this would be causing any problems.
A valid explanation of why this is happening is more important to me than a solution right now (hence my dissatisfaction with the "overflow: hidden;" method). If you do have a solution, I'd prefer it would be entirely CSS based.
Thanks for taking the time to read this.
* {
margin: 0;
padding: 0;
}
html {
background-color: yellow;
width: 100%;
height: 100%;
}
body {
background-color: grey;
width: 100%;
height: 100%;
}
#titleSection {
width: 100%;
height: 15%;
text-align: center;
font-size: 10vmin;
}
#contentSection {
width: 100%;
height: 85%;
background-color: purple;
}
.buttonWrapper {
width: 50%;
height: 100%;
display: inline-block;
}
.buttonImage {
height: 100%;
width: 100%;
object-fit: contain;
}
<!doctype html>
<html>
<head lang="en">
<meta charset="utf-8">
<title></title>
<link type="text/css" rel="stylesheet" href="style.css">
<link rel="icon" href="" type="image/x-icon" />
<script src="code.js"></script>
</head>
<body>
<div id="titleSection">Who's going to set up the board?</div>
<div id="contentSection">
<div class="buttonWrapper">
<img src="http://orig15.deviantart.net/7e51/f/2013/293/e/9/owl_face_by_cypher2-d6r9e23.png" class="buttonImage">
</div><!--
--><div class="buttonWrapper">
<img src="http://eredivisiezeilen.nl/wp-content/uploads/2015/04/1429207962_male3-512.png" class="buttonImage">
</div>
</div>
</body>
</html>
Change it to this:
#contentSection {
width: 100%;
height: 85%;
background-color: purple;
font-size: 0;
}