When i make a div that has a width of 100%
and inside that div i place another div with a width of 90%, that has a padding of 5% (100% in total) it creates a border on the right hand side of the screen.
So far this 'bug' is only on the iPad (1 and first retina). Not on desktop. And not on mobile Android.
When i remove
<meta name="viewport" content="width=device-width" />
or any equivalent of the viewport I don't have that problem. But of course it has to be there.
Is this normal behaviour? Or have I stumbled upon some kind of bug?
On the website I use Eric's Meyer's css reset,
on the fiddle i use the * {margin / padding} reset. If that has to do anything with it
I thank you for your help! :)
http://jsfiddle.net/Empi/h7ck6/
http://migueldebruyne.be/test/
You could apply box-sizing: border-box; and width: 100%; to inner div
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#container {
width: 100%; height: 100%;
background-color: red;
}
#aDiv {
width: 100%;
padding: 5%;
background-color: blue;
}
An example : http://jsfiddle.net/h7ck6/2/
I can't test this in your demo site but in jsfiddle seems to work on ipad
Related
There are lots of pages discussing vh and vw versus percentage. (I'm running on Chrome btw). In my mind, 100vw should mean the exact size of the browser window no matter whether I expand it or shrink it -- and when I draw a border around a div that's 100vw, IT DOES match that width.
HOWEVER, 100vh ALWAYS overflows the bottom of the screen. I've played with:
html, body {
height: 100%;
width: 100%;
}
and
html, body {
height: 100vh;
width: 100vw;
}
and when I draw a border around a div that's 100vw and 100vh, the box overflows the bottom of the screen.
WHAT (if anything) am I missing here? To me 100vh goes to the bottom of the currently browser window size and not a pixel more.
Thanks in advance
Add *, *::before,*::after { box-sizing: border-box; } at the start of your file, the border will now be part of the width, like the padding.
Check there : https://developer.mozilla.org/fr/docs/Web/CSS/box-sizing
By default, the box-sizing is set to content-box, that mean that when you set:
width: 100px;
padding: 20px;
border: 5px;
The total width will be 100 of content + 20 padding + twice 5 (5 for border-left, and 5 for border-right) = 130px;
If you set the box-sizing to border-box it will include the borders and padding in the width
So the width will always be the width that you set, regardless to the border and padding, and it will automatically calculate the width for the content : 100px - 20px - 2 * 5px = 70px;
Example:
$('#toggleBoxSizing').on('click', function(){
$('div').toggleClass('contentbox');
});
*, *::before, *::after {
box-sizing: border-box;
}
html, body {padding: 0; margin: 0; }
div {
height: 100vh;
width: 100vw;
border: 4px solid black;
}
div.contentbox {
box-sizing: content-box;
}
#toggleBoxSizing {
margin: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<button id="toggleBoxSizing">Toggle "box-sizing: border-box;"</button>
</div>
JS Fiddle
I have an image, I need to exclude the padding from it's size.
I use:
box-sizing: content-box;
The problem is, that when I resize the browser, I expect the image to shrink in size. With the above content box, the image does not shrink when the browser is resized as expected. Resizing only happens after the browser has been dragged in past all of the padding. This means half the image goes off screen.
Is there a way to use content box, padding and still have the image resized when the browser resizes.
Set to the width the correct value using a calc expression
img{
box-sizing: content-box;
max-width: 300px;
padding: 0 100px;
background: green;
display: block;
margin: 0px auto;
width: calc(100% - 200px);
}
<img src="http://digital-photography-school.com/wp-content/uploads/flickr/2746960560_8711acfc60_o.jpg">
I do not know if you want this:
https://jsfiddle.net/g47u1hop/
img{
box-sizing: border-box;
max-width: 300px;
padding: 0 100px;
background: green;
display: block;
margin: 0 auto;
width: 100%;
}
You can use box-sizing: border-box
Or you can use media queries to control you image size
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.
fiddle
HTML
<div id="a">
<table id="b">
<tr><td></td></tr>
</table>
</div>
CSS
* {
margin: 0;
padding: 0;
}
#a {
background-color: yellow;
}
#b {
background-color:red;
height: 50px;
margin-left: 50px;
width: 100%;
}
I want the table #b to span from 50px from the left of its container (#a) all the way to the right edge of of #a.
By setting the width to 100% it goes off the page because it tries matching the width of #a. If I omit the width then the table is too small.
Setting the table to display:block and removing the width seems to give the desired behaviour. Is this reliable, or is there another method of achieving the same thing? I'd prefer not to resort to absolute positioning.
You can use the calc() function in CSS like this:
#b {
width: calc(100% - 50px);
/* your other stuff */
}
Most browsers support this nowadays. Have a look at caniuse.com to see, which browsers don't.
Example Fiddle
One way to do is is to use box-sizing: border-box
* { -moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
...
#a {
...
padding-left: 50px;
}
Unlike Sirko's answer, this is will work in IE8+ and not IE9+
Another way is to use conflicting absolute positioning
It's been a while since I really dealt with percentages in web design. I have a nested DIV which sits inside a container but the padding of the container pushes it beyond the 100% width. Without wishing to embark on a process of trial and error to see what makes it as close to 100% of the width as possible, how do I go about achieving a snug fit? I also noticed that when I resized the window and made the space smaller, the right hand padding simply got smaller.
<div id="block">
<div class="inside">ssdfsdfdfsfdf</div>
</div>
#block {
width: 100%;
background-color: #CCC;
padding: 20px;
}
.inside {
height: 200px;
background-color: #333;
}
http://jsfiddle.net/AndyMP/cs2U9/4/
Use box-sizing css property for #block element.
#block {
width: 100%;
background-color: #CCC;
padding: 20px;
-o-box-sizing: border-box; /* Opera */
-ms-box-sizing: border-box; /* IE */
-moz-box-sizing: border-box; /* Mozilla */
-webkit-box-sizing: border-box; /* Chrome, Safari */
box-sizing: border-box;
}
About CSS box-sizing property: http://www.w3schools.com/cssref/css3_pr_box-sizing.asp
I needed an
overflow: hidden
on the container DIV in order to get it to sit perfectly.
http://jsfiddle.net/AndyMP/cs2U9/6/