I'm trying to make a box 100% height of the page. But in both Chrome and IE, the following extends a few pixels off the bottom of the page so I have to scroll. Why? Why is there a scrollbar here?
<!doctype html>
<html >
<head>
<style type="text/css">
html, body
{
margin: 0px;
padding: 0px;
height: 100%;
}
div {
border:5px solid black;
height: 100%;
}
</style>
</head>
<body >
<div >This flows a few pixels off the bottom of the page</div>
</body>
</html>
It goes a few pixels off the page because you're including a 5px border. The body of the div is 100% the height of the page, but the border sits outside of that, adding 10px total height to the page alongside the 100% height. So, on a 1000px page the height of your div will be 1010px. Remove the border and it'll be exactly the right height.
div {
height: 100%;
}
If you still want the border, but not the unwanted extra height you can use the box-sizing: border-box property to place it inside the boundaries of the div
div {
height: 100%;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
...and here is another alternative for you :
html,body
{
height:100%;
margin:0;
padding:0
}
div
{
border:5px solid black;
display:block;
height:-moz-calc(100% - 10px);
height:-webkit-calc(100% - 10px);
height:calc(100% - 10px);
width:calc(100% - 10px)
}
Enjoy!
You can keep your current settings WITH 5px border by declare border-box property for all major browsers:
div
{
height:100%;
box-sizing:border-box !important;
-moz-box-sizing:border-box !important;
-webkit-box-sizing:border-box !important;
}
Since you are dealing with 100% div size it's highly recommended to add the !important so you won't get any conflict with other properties.
Related
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>
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 need your help.
It seems that my child divs, (the textarea and text) expand beyond the border:
This is the desired result:
Here is the HTML/CSS:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
#one {
width: 800px;
border: 1px solid red;
}
#two {
text-align: right;
}
#three {
}
#field {
width: 100%;
}
</style>
</head>
<body>
<div id="one">
<div id="two">text to the right</div>
<div id="three"><textarea id="field"></textarea>
</div>
</body>
</html>
Borders and padding on textarea are your problem.
Two choices
Both choices are related to textarea's CSS. And as you can see from code below I've also added relative positioning to #one, just to make sure it'll work in the context of your page, so textarea's width will actually be sized by this container.
set proper box-sizing so borders and padding will be included (JSFiddle):
#one {
width: 800px;
border: 1px solid red;
position: relative;
}
#two {
text-align: right;
}
#three {
}
#field {
width: 100%;
box-sizing: border-box;
/* let's also add these for cross-browser safety */
border-width: 1px;
padding: 2px;
}
set width to less than 100% (JSFiddle)
#one {
width: 800px;
border: 1px solid red;
}
#two {
text-align: right;
}
#three {
}
#field {
/* (1px border + 2px padding) × 2 for left and right side */
width: calc(100% - 6px);
}
Borders and padding are added onto the width. since your width is 100% it adds the padding and border onto the field.
so if the width was 120px of 'one' it adds 2px for the borders and a few pixels for the padding.
if you subtract the some space off of 'three' you can achieve this.
#three {
width:794px;
}
example
The following should work with most browsers as well.
#field {
width: 100%;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box;
}
Otherwise you can remove the border and padding from the textarea. There are quite a few ways to do this to be honest.
The reason for it to go beyond the border is that, it is taking border:2px;
You set width: 100% for the #field textarea. By default, a textarea also has non-zero values for border and padding. So after all your textarea is 800px wide(inherited from .three) + 4px border + 2px border = 806px all together (but it might differ slighty, depending on browser you use).
Modify CSS for #field to this
#field {
width: 100%;
margin: 0;
padding: 0;
border: 0;
}
I also set margin: 0 just to be sure that some browsers won't have it set to non-zero value.
the classic box model adds up width with margin, padding and border.
In this case, set your textarea another way of calculating width, i.e. box-sizing to border-box (width is proper width, without margin, padding and border)
#field {
width: 100%;
-webkit-box-sizing:border-box;
}
(you might add desired perfixes, -moz, -ms, -o…)
http://designobvio.us/vodka/ Live demo
I've set my html, container, main and 100% but nomatter what I do I cannot get the border to be 100% height without scroll bars?
How can I achieve an effect?
HTML
<div id="main">
</div>
CSS (not currently the live code but this is what i've tried )
html, body{height:100%; width:100%;}
#main{height:100%; position:absolute; top:0px; bottom:0px; left:0px; right:0px; border:5px solid #000;}
By default the borders, margin and padding are not part of width/height and are added on top. That's why you get scrollbars as the full dimensions of the box are 100% in height and width plus the border-width.
You can set the box-sizing property to border-box, which tells the browser to include the calculation for borders and padding in the width/height properties (in opposite to content-box, which is the default value):
#main {
box-sizing: border-box;
[...]
}
As especially IE8 and the earlier version of the other browser families don't support this css-property, it's a good idea to add some browser-specific definitions, too:
#main {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
Take a look at the mozilla doku for detailed information on box-sizing.
I know this is an old post, but as it pops up on Google first page... Here is my solution that seems to work fine cross browsers:
height: 0:
border-style: solid;
border-width: 8vw 0 0 100vw;
border-color: transparent transparent transparent red;
Just used it for an :after pseudo-element in order to turn it in a triangle shape and it works just fine (test down to ie10).
Simply use 100vw instead of 100% and it should do the trick.
Are you looking for a fixed border or dynamic border? The problem with your code is the W3C box-model. In the default model, padding, margin and border are added to the size of your element. So in your code what you're really telling it is "make the box 100% and then add 10px worth of border".
Normally an easy change would be to manually switch the box model, but unfortunately that property does not play nice with height: 100%. So you have a few options:
1) If you are looking for a fixed border, this is a good trick: http://css-tricks.com/body-border/
2) If you need a dynamic border, you need to somehow get around the additional height the border adds. Here is one way:
html,body { height:100%; padding: 0; margin: 0; }
#container {
min-height:100%;
border-right: 5px solid #000;
border-left: 5px solid #000;
position: relative; /* relative postion so we can absolutely position footer within it */
}
#header {
height: 100px;
border-top: 5px solid #000;
background-color: red;
}
#content { padding: 0 0 100px 0; } /*padding must be equal to the height of the footer*/
#footer {
height: 100px;
border-bottom: 5px solid #000;
background-color: blue;
position: absolute;
bottom: 0;
width: 100%; /* with absolute position, a width must be declared */
}
HTML
<div id="container">
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
jsfiddle here: http://jsfiddle.net/Qw2cb/
You can give box-size:border-box; to 'main', like
#main{
box-size:border-box;
}
Doing so the border will be added to 100% height of main. Learn more about box sizing here
So, you are saying that you do not want to display scrollbars?
CSS:
#main
{
overflow: hidden;
height: 100%;
position: absolute;
margin: 0px;
}