I have a div and I want it to fill the whole page without any horizontal or vertical scrolling.
The html is like:
<body>
<div class="container">
</div>
</body>
and the css like:
body{
background: #222;
margin:0;
padding: 0;
}
.container{
margin:0 auto;
padding:20px;
width:800px;
background: rgba(20,20,20,0.2);
height: 100vh;
}
Normally with vh it works, but because of some padding applied on container it doesn't work. So what technique can I use to solve this problem?
The JSFiddle is here
Try using box-sizing: border-box on your .container element. Doing so will have the padding and border of an element included with width and height assignments.
.container {
box-sizing: border-box;
margin: 0 auto;
padding: 20px;
width: 800px;
background: rgba(20,20,20,0.2);
height: 100vh;
}
This has to do with the way that css adds the padding to the height to calculate the total height. There's one quick and flexible fix for all of your elements though, as explained in Paul Irish's box-sizing:
/* apply a natural box layout model to all elements, but allowing components to change */
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
Not Sure Will this help you but you can give it a try-
give position relative to your body and position fixed to your div.container with width 100% and height 100%.
body{
background: #222;
margin:0;
padding: 0;
position:relative;
}
.container{
position:fixed;
left:0;
top:0;
width:100%;
background: red;
height: 100%;
}
Box-sizing FTW! If you need to include the padding as part of the elements dimensions then box-sizing: border-box is your only hope.
FWIW you should be aware that Viewport Units are not fully supported so if you need something more cross-browser you can easily avoid using 100vh by using 100% instead.
E.G:
html, body {
height:100%;
min-height:100%;
}
body{
background: #222;
margin:0;
padding: 0;
}
.container{
margin:0 auto;
padding:20px;
width:800px;
background: red;
height: 100%;
box-sizing: border-box;
}
<div class="container">
</div>
Related
Why is input element does not take up 100% of the width of its container automatically after changing its display to block? Are there some other factors which also have an influence on that? Thanks. Demo see below:
some explanation: 1. I comment out width:100% intentionally because block level element is supposed to take up 100% of its container width.
#container {
width: 300px;
margin: auto;
background-color: red;
}
input[type="text"] {
display: block;
opacity:0.5;
/*width:100%;*/
}
<body>
<section>
<div id="container">
<input type="text">
</div>
</section>
</body>
I'm not an expert, but I'm pretty sure it's because you have commented out width:100%. try decommenting that then it should work
#container {
width: 300px;
margin: auto;
background-color: red;
}
input[type="text"] {
display: block;
opacity:0.5;
width:100%;
}
Changed the code check now
#container {
width: 300px;margin: auto;
background-color: red;
}
input[type="text"] {
opacity:0.5;
width:100%;
border-width:0;
padding:0;
}
<body>
<section>
<div id="container">
<input type="text">
</div>
</section>
</body>
The input element by default has a border: 2px and a padding: 1px 0 in google chrome
When you were actually applying a width of 100%, the input actually had a width greater than the actual div outside covering it
width of input(set to width of div) + border + padding > width of div
There is a tiny little white area on the right, in case you uncomment width:100% in your code. That white area actually is the input. If you set the border to zero that's really enough to fix things
#container {
width: 300px;
margin: auto;
background-color: red;
}
input[type="text"] {
display: block;
opacity: 0.5;
width: 100%;
border: 0
}
<body>
<section>
<div id="container">
<input type="text">
</div>
</section>
</body>
Default size of input is 20, so if you do not define size or css rule for your input automatically its size is 20.
The best solution is adding width.
try this code:
#container
{
width: 300px;
margin: auto;
background-color: red;
}
input[type="text"]
{
display: block;
opacity:0.5;
width:100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
If you want to be responsive it is better to add box-sizing to all element like this:
*
{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
I want the body to have margins of like 15px and stay 100% height and width of the window, 100 vh is the same thing.
I want a welcome screen which will fit to the screen (resolution of the user) so basically the body should resize it self to the screen height and width when the user resizes the window.
Ok, so the problem is when I use 100% or vh with margin it overflows, i cannot work with hidden cuz i need the bottom part, now its okay with width because the its display block which fixes the problem for width.
h
https://jsfiddle.net/0dx36zb4/
Try
body {
width: 100vw;
height: 100vh;
}
You have to use box-sizing: border-box; along with width: 100vw; and height; 100vh;
Don't use margin on the body, instead use a parent/child element and set padding on the parent. Margin is outside of the element, and so is not considered in the calculation - yours overflows because it is 100% of the width/height, plus 15px in each direction. Padding is inside the element and you can set the browser to consider it in your width/height specifications with the box-sizing:border-box property.
HTML
<html>
<body>
<div id="parent">
<div id="child">
</div>
</div>
</body>
</html>
CSS
body {
width:100vw;
height:100vh;
}
#parent {
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
width:100%;
height:100%;
padding:15px;
margin:0;
}
#child {
width:100%;
height:100%;
margin:0;
}
EDIT
I was also able to get your JSFiddle working so you can see an example of that if you replace your code with the code below.
html,body {
background-color: red;
height: 100%;
margin:0;
padding:15px;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
section {
background-color: yellow;
height: 100%;
margin: 0;
}
Use padding and box-sizing to fix the issue. I updated your JSFiddle to work:
https://jsfiddle.net/0dx36zb4/4/
html,body {
background-color: red;
height: 100%;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
body {
padding:15px;
margin: 0;
}
section {
background-color: yellow;
height: 100%;
}
h1 {
margin: 0;
padding: 0;
}
<body>
<section>
<h1>hello</h1>
</section>
</body>
html, body {
height: 100%;
width: 100%;
margin: 0px;
border: 0;
overflow: hidden;
}
.splash {
height: 100%;
width: 100%;
z-index: 0;
}
<img src="http://www.planwallpaper.com/static/images/desktop-year-of-the-tiger-images-wallpaper.jpg
" class="splash" />
I am dividing my screen to 4 Quarters but it doesn't work with all screen resolutions.I need it to always be 4quarters even by changing the window size.
here is the code:
body{
height:800px;
}
div{
position:relative;
border:1px solid red;
width:49.7%;
height:49.7%;
}
#Q1,#Q3{
float:left;
}
#Q2,#Q4{
float:right;
}
</style>
</head>
<body>
<div id="Q1"> </div>
<div id="Q2"> </div>
<div id="Q3"> </div>
<div id="Q4"> </div>
</body>
Use this CSS to make the height 100% and quarter it:
body{
height:100%;
}
html {
height: 100%;
}
div{
position:relative;
border:1px solid red;
width: 50%;
height: 50%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#Q1,#Q3{
float:left;
}
#Q2,#Q4{
float:right;
}
The computed width of the boxes exceeds the total available space in lower screens. This is because the border of 1px around the elements.
You could give the div elements a box-sizing: border-box; declaration so that their width would be calculated including padding and borders.
Example Here
div {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
In addition, if you want to resize the height of the boxes with the respect to the height of the body, note to set height: 100% on body and html as well.
You have to specify the height of html to get height: 100% to work for the <body>. This because a percentage value of height property is relative to the height of box's containing block.
Updated Example Here
html, body {
height: 100%;
padding : 0;
margin : 0; /* Remove the default 8px margin around the body */
}
Also note that UAs apply a default margin to the <body> by default. Make sure you have reset the user agent stylesheet.
This question already has answers here:
Make a div fill the height of the remaining screen space
(41 answers)
Closed 8 years ago.
I have a header div and a div underneath it. I need the div underneath the header div to adjust depending on the height of the browser window size.
In CSS, when I add height:100% it creates a scroll bar at the side of the page. When I adjust the percentage of the width, spacing at the bottom of the page constantly changes because it is done with percentages.
I would like the div below the header to always adjust with the window size in height with no spacing at the bottom.
How do I do this?
Here is the Fiddle
JS Fiddle
I am not sure why but in JSFiddle the bottom div is not extending height: 100%
here is the code:
HTML
<div class = "main">
Header
</div>
<div class="left">
Bottom Div
</div>
CSS
.main {
width:100%;
height:60px;
border: solid;
}
.left {
height: 100%;
width: 300px;
border:solid;
}
try to use something like this code
html:
<div class = "main">
Header
</div>
<div class="left">
Bottom Div
</div>
css:
* {
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
html, body {
height:100%;
}
body {
padding:60px 0 0 0; /* 60 — header height*/
margin:0;
}
.main,
.left {
border:1px solid #000;
}
.main {
width:100%;
height:60px;
margin-top: -60px; /* 60 — header height*/
}
.left {
height: 100%;
width: 300px;
}
You have a few options to achieve the layout you would like.
There are plenty of answers that address your problem from this similar question:
Make a div fill the height of the remaining screen space
However, here is my solution:
Just change your CSS a bit
body, html {
height: 100%;
padding: 0;
margin: 0;
}
.main {
width:100%;
height:60px;
border: solid;
position: absolute;
background-color: #fff;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.left {
height: 100%;
width: 300px;
border:solid;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding-top: 60px;
}
The box-sizing will prevent the padding-top and the borders from pushing the dimensions outside the browser window. The body,html height: 100%; is needed to allow other items to be 100% height (why your fiddle wouldn't work).
CSS allows you to do some basic math, so the following would help you:
Given that your header has a fixed height of 60px:
.left {
height: calc(100% - 60px);
}
Edit: you also have some extra padding and borders that you might want to take into consideration while calculating. Although I'm not a big fan of hard-coding values like that.
Try this in your style sheet
CSS
.left {
height: 100vh;
width: 100%;
border:solid;
}
Refer link
https://stackoverflow.com/questions/1622027/percentage-height-html-5-css
I have two main div. One is #header for menu, and one is #container for the content. I want that #container to reach the bottom of the page, whether is filled with content or not.
The problem is that adding height:100%; to body, html and #container causes the additional white space and scrollbar, which i do not want when not necessary.
HTML:
<div id='header'></div>
<div id='container'></div>
CSS:
body{
margin:0;
}
body,html {height:100%;}
#header {
height:70px;
width:100%;
background-color:red;
}
#container {
width:600px;
background-color:gray;
height:100%;
margin:0 auto;
}
JSFIDDLE: http://jsfiddle.net/ymBnw/
If you play with the padding and the margin of the #container, and position the #header absolutely, you can achieve this. I'm not taking into consideration the width, which you can set as you like.
html,
body {
padding: 0;
margin: 0;
height: 100%;
}
#header {
position: absolute;
top: 0;
width: 100%;
height: 70px;
background-color: red;
z-index: 10;
}
#container {
width: 600px;
height: 100%;
background-color: gray;
margin: -70px auto -70px auto;
padding-top: 70px;
}
#content
{
padding-top: 70px;
}
Working example: http://jsfiddle.net/ymBnw/15/
EDIT
I've made a mistake setting the padding, which needs to be (obviously) the double of the margin (140px instead of 70px). Code fixed.
EDIT 2
Not happy again. The previous edit made the scrollbars to come back. The new solution proposed adds a new div within the #container.
Yes it would do that. Because you've given the #container 100% height, that is relative to the body. So you've given the #container the same height as the body. On top of that, you've got the #header height. So your total content is now 100% + 70px (header).
The way around this would be to set no height on the #container and have the grey background colour on the body.
You could also try:
#container {
position: relative;
z-index: 0;
top: -70px;
padding-top: 70px;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box; }
#header {
position: relative;
z-index: 10; }
Or you could try:
#container {
margin-top: -70px;
padding-top: 70px;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box; }
I'm not a fan of the second method. You could also do this with absolute positioning and a 70px padding on the top of the container.
You could do a position:absolute on the container div.
Code:
#container {
width:600px;
background-color:gray;
margin:auto;
bottom:0;
top:70px;
position: absolute;
left:50%;
margin-left:-300px;
}
Demo
You should use min-height: 100% instead of height: 100% to fix the background-color issue.
Here is a working solution:
CSS
#header {
height:70px;
width:100%;
background-color:red;
position: relative;
z-index: 10;
}
#container {
width:600px;
background-color:gray;
min-height: 100%;
margin:0 auto;
margin-top: -70px;
padding-top: 70px;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
JSFiddle Demo #1
JSFiddle Demo #2
As an alternative solution, instead of box-sizing, you can use ::before pseudo-element as the following:
#container {
width:600px;
background-color:gray;
min-height: 100%;
margin:0 auto;
margin-top: -70px;
}
#container:before {
content: ' ';
display: block;
height: 70px;
}
JSFiddle Demo #3
You're specifying the height of the container to be 100% but you're then setting the header height to be 70px. This will ultimately lead to your full body being 100% of the browser window + 70px.
That's why you will be getting a scrollbar, because 100% + 70px results in overflow.
Edit:
As others have suggested, you could use an absolutely positioned header, with a padded container. You would obviously lose flow in this scenario though. When it comes to specifying heights in HTML, there are always trade-offs...
try this
#container {
width:100%;
background-color:gray;
height:100%;
margin:0 auto;
}
#header {
height:70px;
width:100%;
background-color:red;
position:absolute;
}
demo
Using the new flexbox layout, all you have to do is to add these CSS properties to the body.
body {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
}
This sets the layout to flexbox and specifies that the direct children of the body element should be aligned top to bottom. For a more thorough guide to flexbox, have a look at this tutorial. Note that the flexbox layout is currently a candidate recommendation and older browsers are not going to support it. Current Webkit based browsers still need the -webkit vendor prefix.