I have a div tag and I realized that it is not filling 100% of the height as it should.
My code:
#container {
width: 100vw;
height: 100vh;
background: purple;
}
body {
margin: 0px;
}
<div id="container"></div>
<div id="container"></div>
What's happening?
Well, if I only have this code snippet above that I put the div to occupy 100% of the viewport of course! The problem is that I don't only have this code on my page, I have more things and I inserted this code section inside the body tag, a certain" place "inside the body tag, that is, I inserted some elements, and after these elements have this div, but it does not occupy, 100% of the viewport observe how it is
How is the result visually on your page?
I scrolled the page, but my div was still to occupy 100% of the entire viewport. Am I not correct? and if this was supposed to happen why isn't it happening?
Explanation: Guys, I discovered the problem but I don't know how to solve it, well, here's the thing, the div does not occupy 100% of the viewport when it has an element below the container div or above, look at this image and see:
And the code I used that made this happen:
My code HTML:
body {
color: red;
background: green;
margin: 0;
padding: 0;
}
#container {
width: 100vw;
height: 100vh;
z-index: 1;
background: purple;
}
p {
font-size: 20pt;
}
<div id="container"></div>
<p>ksksks</p>
What happens in the image above is the same problem that happens on my page, that is, the div only fills 100% of the viewport's height if it has no elements on the page, and I want to be able to make the height 100% of the viewport even with elements on the page.
Edit:
Well apparently I saw that there are a lot of answers, and most of them don't work or are explaining the error or presenting answers that don't solve the problem, other people suggested using position fixed which in fact solves the problem, but I don't want to have to do it this way , think that you have a chat because you would want it to have a scrolling bullet and it will be the chat that will occupy the entire viewport and not another div understand? This solution actually solves the problem, but I don't like jerry-rig.
I would like to know a more elegant way of doing it, for example my div container occupies 100% of the viewport but I don't want other elements to appear, I want the div container to overlap any element that should appear and I don't want to scroll the page.
Summary:
To summarize everything in a few words, the div should occupy 100% of the viewport and make sure that the body does not have a scroll and the page goes to the top, that is, regardless of which position on the page the user is in, I want the page to go to the top and disable the scroll, and without javascript preferably, I don't want to write too much javascript being possible to write in html and css :) I will take advantage of the reward in this answer to add this and ask for a solution to this problem.
The problem has to do with the fact that the vh and vw units don't take the (added) scrollbar width/height into consideration. As long as the page isn't higher than the viewport, no scrollbar appears and 100vh will be exactly the height of the viewport and everything works as expected.
But as soon as there is more content below or above, a vertical scrollbar appears: Now the width: 100vw is wider than the window width minus the vertical scrollbar, so a horizontal scrollbar appears, and now the height: 100vh is higher than the window height minus the (horizontal) scrollbar.
I consider that a kind of bug, but that's the way it is - in most browsers, it seems. I posted this question a long time ago which basically covers the same issue: Problem using vw units when a vertical scrollbar appears (full-width elements in WordPress)
Addition/edit after comments:
There is no 100% safe solution, I would say. But one thing that helps to some extent is to not use 100vw for the width, but instead 100%, which does consider the (vertical) scrollbar. However, width: 100%; is the default for any block element anyway, so you can simply erase the width setting and only use height: 100vh, which will work (i.e. have the exact viewport height) as long as you don't have any special width requirements.
Please use the following meta tag inside your head tag
<meta name="viewport" content="width=device-width, initial-scale=1">
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
color: red;
background: green;
margin: 0;
padding: 0;
}
#container {
width: 100vw;
height: 100vh;
z-index: 1;
background: purple;
}
p {
font-size: 20pt;
}
</style>
</head>
<body>
<div id="container"></div>
<p>ksksks</p>
</body>
</html>
Based On your question you want the div to take up the space instead of the purple background right?
Css:
#container {
width: 100vw;
height: 100%;
background: purple;
}
body {
margin: 0px;
}
#innerDiv {
height: 100vw;
background-color: red;
width: 100vw;
}
#innerDiv1 {
height: 100%;
background-color: blue;
width: 100vw;
}
Html:
<div id="container">
</div>
<div id="innerDiv">Div #1</div>
<div id="innerDiv1">Div #2</div>
You applied background purple color upto height of 100vh,
if you want see purple fully you just add purple in body tag instead green or otherwise you want place div inside container .here is nothing problem.you just want to adjust your code
body {
color: red;
background: purple;
margin: 0;
padding: 0;
}
#container {
width: 100vw;
height: 100vh;
z-index: 1;
}
p {
font-size: 20pt;
}
<div id="container"></div>
<p>ksksks</p>
It is just a workaround, I usually used it as mobile hamburger menu with full screen. You have to be careful because it force to cover bfull page, it will hide all element if there is any other element already exists on the page.
.container {
# it make the container always on the page regardless any element or window margin
position: fixed;
top: 0;
left: 0;
z-index: 999;
height: 100vh;
width: 100vw;
}
The simplest solution is to make use of viewport height(vh) and viewport width(vw) units to set the height and width of the block. this block/div will fill up the entire space in the browser window. Here is an example.
div.container {
height: 100vh;
width: 100vw;
}
make sure you have the viewport meta tag in your <head> as given
<meta name="viewport" content="width=device-width, initial-scale=1.0">
This gives the browser instructions on how to control the page's dimensions and scaling. The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device).
The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser. Incase of a missing meta tag, the initial scale and zoom may misbehave. Also put your <p> inside the container div. Here is the working demo.
My code:
HTML, body {
margin: 0;
padding: 0;
}
#container {
width: 100vw;
height: 100vh;
background: purple;
}
p {
height: 100%;
width: 100%;
background-color: rgba(255,255,255, .8);
}
<div id="container"></div>
<div id="container">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>
I have tried it with those codes and it seems like it's working,
You can check them:
body {
color: red;
background: green;
margin: 0;
padding: 0;
}
#container {
width: 100vw;
height: 100vh;
z-index: 1;
background: purple;
}
p {
font-size: 20pt;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div id="container"></div>
<p>ksksks</p>
</body>
</html>
Nothing seems to be the problem.
#container {
width: 100vw;
height: 100vh;
background: purple;
}
body {
margin: 0px;
}
#innerDiv {
height: 100px;
background-color: red;
width: 100vw;
}
#innerDiv1 {
height: 100px;
background-color: blue;
width: 100vw;
}
<div id="container">
</div>
<div id="innerDiv">Div #1</div>
<div id="innerDiv1">Div #2</div>
I am working on a clone project and I have encountered a problem at "width:fit-content" concept. First you should look the following image and I am going to give you related html and css codes with image.
Parent Element And Childs
As you see at the image, purple is parent element has 8px padding and "width:fit-content" property. The parent has span and div elements inside. Orange one is span element and has 15px width. Red one is div element and has 45.984px width. Pink ones are spans contains texts inside and these are defines width of parents.
All these means total width of inside of parent without its padding is 15px(span) +3px(padding-left) +45.984px(div) = 63.984px.
The problem is that, despite all these parent has 48.984px width and that causes the div element is wrapped which I dont want to be happened (As I said parent has "width:fit-content;" property). This problem occurs because of next div sibling element of this purple parent element. Next div element only has width:100% property and if I change width property to 200px(this width value must not exceed width of browser viewport), Content of parent element does not wrap and works well. Problem can be seen via code below.
Html File Includes Problem
Note: Width calculation given above different from example code below because of font styles. I used special font in my original code but the problem still occurs at the example code below.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*,
*::after,
*::before {
box-sizing: border-box;
}
/*header is parent of all elements*/
header {
display: flex;
flex-direction: row;
background-color: gray;
}
/*Parent element which is shown as purple at the example image above*/
/*Problem occurs at this element*/
.parent-div {
padding: 0 8px;
width: fit-content;
background-color: purple;
}
/*Span element inside parent*/
.child-span {
display: inline-block;
background-image: url("/assets/icons/location.png");/*icon image*/
width: 15px;
height: 16px;
margin-top: 22px;
background-color: orange;
}
.child-div {
float: right;
padding-left: 3px;
margin-top: 15px;
background-color: red;
}
.next-sibling-div {
width: 100%;
background-color: blue;
}
</style>
</head>
<body>
<header>
<div class="parent-div">
<span class="child-span"></span>
<div class="child-div">
<span>Span1</span>
<span>Span2</span>
</div>
</div>
<div class="next-sibling-div">
</div>
</header>
</body>
</html>
How to show up the problem ?
Change width property of next-sibling-div to small pixel sized width or delete the div element has next-sibling-div class. After that, watch changing of div element has parent-div class.After that, You will see red div inside purple will be at the same line with orange span element.
As a conclusion, I want orange span and red div element inside purple parent element at the same line but width of purple parent element has not to be fixed size because its content will be changed at the client side so it may be longer than that fixed size and it has to be same width with its content. And also next sibling has to have 100% width property because this part will be responsive.
I have created this, but maybe its something else and not what you wanted. Also I dont know how your icon looks like and what exactly will be in spans
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*,
*::after,
*::before {
box-sizing: border-box;
}
/*header is parent of all elements*/
header {
display: flex;
flex-direction: row;
background-color: gray;
}
/*Parent element which is shown as purple at the example image above*/
/*Problem occurs at this element*/
.parent-div {
padding: 8px;
background-color: purple;
display: flex;
justify-content: center;
align-items: center;
}
/*Span element inside parent*/
.child-span {
display: inline-block;
background-image: url("/assets/icons/location.png");/*icon image*/
width: 15px;
height: 16px;
background-color: orange;
}
.child-div {
margin-left: 3px;
background-color: red;
}
.next-sibling-div {
width: 100%;
background-color: blue;
}
</style>
</head>
<body>
<header>
<div class="parent-div">
<span class="child-span"></span>
<div class="child-div">
<span>Span1</span>
<span>Span2</span>
</div>
</div>
<div class="next-sibling-div">
</div>
</header>
</body>
Problem is that you have float:left on child-div. That causes spans to display in one row, but I dont know exacly why. I dont use float anywhere, because flex-box works better for me and for most people I think. So, without float:left, each span has its own row. Now to display child-span and child-div next to each other, just add display:flex to parent-div. To center child-span and child-div use justify-content:center and align-items:center. Now delete margin-top from childs and change padding-left to margin-left in child-div, because padding makes space inside element and not outside. And at the end, change padding: 0 8px to padding: 8px on parent-div to make space around childs.
Also I forgotten you can delete content-fit from CSS, because parent-div have width based on inner elements.
Here is my HTML code.
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta name="viewport" content="width=device-width">
<style>
body {
margin: 0;
}
.a {
background: orange;
border: 2px solid black;
}
.b {
padding: 0 2em;
width: 100%;
background: lightblue;
border: 2px solid black;
}
</style>
</head>
<body>
<div class="a">Foo</div>
<div class="b">Bar</div>
</body>
</html>
Here is the output I see when I view the page with an Android mobile device with Chrome browser.
The issue here is that the orange div does not cover the whole width of the page.
My question is not how to fix it. I know how to fix it. If I remove width: 100% from .b, it fixes this issue.
My question is about why this issue occurs only with Chrome on a mobile device but not on any other browser or not on Chrome on Desktop?
The related question at Why does my navigation div not extend to the full width of the screen on mobile devices? does not answer my question because none of the answer there discusses the CSS or user agent rules that causes this issue. More importantly I am trying to understand why this issue occurs only on Chrome on a mobile device.
Your issue does indeed occur on Chrome on desktop, and is not restricted to just mobiles.
As for the cause of your problem, it's to do with the box model:
By default in the CSS box model, the width and height you assign to an element is applied only to the element's content box. If the element has any border or padding, this is then added to the width and height to arrive at the size of the box that's rendered on the screen. This means that when you set width and height you have to adjust the value you give to allow for any border or padding that may be added.
In order to ensure that your .b element is constrained within the width of the container is to apply box-sizing: border-box it, as is seen in the following:
body {
margin: 0;
}
.a {
background: orange;
border: 2px solid black;
}
.b {
padding: 0 2em;
width: 100%;
background: lightblue;
border: 2px solid black;
box-sizing: border-box;
}
<body>
<div class="a">Foo</div>
<div class="b">Bar</div>
</body>
box-sizing: border-box tells the browser to account for any border and padding in the values you specify for width and height. If you set an element's width to 100 pixels, that 100 pixels will include any border or padding you added, and the content box will shrink to absorb that extra width. This typically makes it much easier to size elements.
I am trying to understand how borders affect the size and visualisation of an inner div. I have this problem in my application, where a border is displayed around fields with errors, and I can't seem to get the CSS right. (BTW, it's obvious that I don't quite "get" CSS just yet. I am working on it).
Consider this page:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Booking Dojo Application</title>
<style type="text/css">
html, body {
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
#appContainer {
height: 50px;
width: 500px;
background-color: red;
}
#innerContainer {
height: 50px;
border-width: 5px;
border-style: solid;
/*width: 100%;*/
}
#ruler {
width: 500px;
background-color: blue;
height: 20px;
}
</style>
</head>
<body>
<div id="ruler"></div>
<div id="appContainer">
<div id="innerContainer">
<span>AHAH</span>
</div>
</div>
</body>
</html>
If I don't specify the width of the inner div, then its width is the same as the parent including the border.
But then, if I DO specify the inner div's width, something weird happen: Chrome puts the border "out", but... only to the right?!?
I am obviously missing something. So:
Why am I seeing what I am seeing?
What I would love to do, is know what the inner div's width should be specified as in order to get the same result as "without width"? (Other than going "99%" which seems to "work" in my app, but.... meh )
http://jsfiddle.net/X3gw6/1/
You need:
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box;
More info:
http://css-tricks.com/box-sizing/
Basically, inner div height and width are bigger, because of borders... that caused problems...
By default border is added to the width. If you do not specify a width the default is to take all of the space it can and make it fit. So the inner width is 100%-borders.
When you specify a width you are by default specifying the inner width. 100% plus borders > 100%.
box-sizing:border-box; rule when added means you are specifying the width with borders. This is part of CSS3.
If widths are percentages but you need a fixed size border, box-sizing:border-box; rule makes it possible. http://www.w3schools.com/cssref/css3_pr_box-sizing.asp
It's because borders add to the elements height and width. So a width of 100% is 500px plus 5px left and 5px right border = 510px. You can see that width: 490px; makes the inner container inline with the other elements: http://jsfiddle.net/2wLQR/
box-sizing: border-box; will stop it from going out of line: http://jsfiddle.net/2wLQR/1/
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 :)