OK This seems really basic, but I can't seem to find an answer, maybe my search terms have been too general?
I have defined a top-level div that has a border round it, I want this to be the maximum size of the viewport.
This is the code in its most basic form
<body>
<div id="main">
test
</div>
</body>
And the CSS:
#main {
position:absolute;
left:0px;
top:0px;
width:100%;
height:100%;
border: 1px green solid;
}
See this JSFiddle:
http://jsfiddle.net/GpBS5/11/
The Div should have a 1px green border which is visible, but it always seems to have the bottom and right just off the display needing a scrollbar.
Use box-sizing: border-box
JSfiddle
The width and height of the div is 100% + 2px (2 borders, a pixel each), which requires scrollbars. box-sizing: border-box fixes this because it tells the browser to included the padding and border in the width and height.
I almost always use:
* {
box-sizing: border-box;
}
There's a default margin on the body. Add this to reset it to 0:
html, body {
margin: 0;
}
PLUS: Add box-sizing: border-box;to your #main DIV.
http://jsfiddle.net/gqL1zqeo/1/
Related
In snippet below padding-top overrides the height and max-height properties of container:
I want this <div> to be 10px high, but its 100px because of padding-top
as far as I understand this should be solved by box-sizing: border-box but this doesn't help
w3schools - border-box: the width and height properties (and min/max properties)
includes content, padding and border, but not the margin
.padding-test {
background: linear-gradient(109deg, #3adffd, #00abfb);
outline: 1px solid #3b3c6d;
width: 100%;
padding-top: 100px;
max-height: 10px;
height: 10px;
box-sizing: border-box;
}
<div class='padding-test'></div>
Can someone explain why is this happening and how to fix this?
Same happens for width and padding-left
UPD: I faced this issue when tried to change max height for box sized by aspect-ratio approach. I solved initial issue by setting parent size, but I still want to understand how border-box works with the padding - does it shrinks only content? is this correct behavior? is there any solution for this exact situation - can I override padding somehow?
I had run into the same doubt. According to MDN:
border-box
The width and height properties include the content, padding, and border, but do not include the margin. Note that padding and border will be inside of the box. For example, .box {width: 350px; border: 10px solid black;} renders a box that is 350px wide, with the area for content being 330px wide. The content box can't be negative and is floored to 0, making it impossible to use border-box to make the element disappear.
so box-sizing: border-box doesn't mean you can set the "border box" directly, but only affects how "content box" is calculated, which cannot be negative.
And my solution is: avoid the paddings, use a height-holding div or ::before pseudo element with designated height instead. (may also need overflow: hidden.) For example:
.padding-test {
height: 10px;
box-sizing: border-box;
overflow: hidden;
}
.padding-test::before {
height: 100px;
content: '';
display: block;
}
I have some screen area (a parent div) that I want my <div> to completely fill up, but I also want to have a 5% gap around the its content. How could this best be implemented?
If I apply the rules: width: 100%; height: 100%; padding: 5%; they produce the desired effect (at least for <div> itself) but its bounds now exceed its parent element's bounds by 2 * paddingpx.
How can I ensure this <div>'s bounds take up 100% of its parent's, and still retains a 5% padding, without overflowing?
Note: I'm sure that I could find some hack ("just set width and height to 90%, since padding is 5%..), what I'm interested in is the most elegant, future proof, and intelligent solution. It seems that certain problems around positioning and sizing of individual divs almost totally go away when you are able to use more modern CSS technologies like Grid and Flex-box, so I'm open to that as well.
if my thought is right you need to use box-sizing:border-box , Specify that elements should have padding and border included in the element's total width and height:
like
*{
box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
-moz-box-sizing: border-box;
}
please check this snippet
body {
margin:0;
padding:0;
}
.demo {
width:100%;
height:100vh;
float:left;
background:#000;
padding:5%;
box-sizing:border-box;
}
<div class="demo"></div>
I am trying to create a footer on my page that stays anchored at the bottom of the page as the user scrolls up and down. I am most of the way there but there are a couple problems which I describe below.
I have a JSFiddle at: https://jsfiddle.net/ay2y73co/
Here is the code I am using for my footer:
<!-- This fake paragraph only exists to put some space above the footer
so that page content is not hidden by the footer. -->
<p style="height:3.5em;margin:0px;"> </p>
<!-- Here is the footer, proper. -->
<div style="position:fixed;bottom: 0px;left:0px;padding:0.5em; height:3.0em;background-color:rgb(200,200,200);margin: 0px;width:100%;font-size:75%;border: 2px inset red">
<p>I want the right border to show up -- it seems it is clipped by the scrollbar.</p>
</div>
The first problem is that the right border of my footer is obscured by the scroll bar, basically, it is sitting behind the scrollbar as you can see from the missing right border.
The second problem is not really a problem, per se, but I do not like the fact that I have to put in a "fake paragraph" above the footer simple to prevent page content from being scrolled behind the footer. It does not feel like a clean solution.
In your footer's CSS, replace the width:100% with right:0
jsFiddle example
Or keep it, and add box-sizing:border-box
jsFiddle example
In your original code, the box at 100% width alone was too wide based on the boder and padding of the element.
If you look at this fiddle:
https://jsfiddle.net/ay2y73co/6/
you'll see that I've added a wrapper around your content, separate from the footer. I added a CSS class 'footer' as well, and placed your CSS for that in the provided stylesheet.
html, body {
width: 100%; height: 100%;
}
body {
margin: 0;
padding: 0 0 5.25em;
overflow: hidden;
}
*,
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
div.content {
height: 100%;
overflow: auto;
overflow-x: hidden;
overflow-y: auto;
}
div.footer {
position:fixed;
bottom: 0px;
left:0px;
padding:0.5em;
height:6.0em;
background-color:rgb(200,200,200);
margin: 0px;
width:100%;
font-size:75%;
border: 1px inset red
}
What you can do to fix your issue is apply bottom padding to the body or other tag that is the parent of the content. The padding should be equal to the height of the footer so that the scrollbar will not exceed the full height of the body.
Add this to your footer:
.footer {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
The border adds up to the total width of your div so if you set your footer's width to 100% and put a 1px border in it, the width will be 100% + 1px left border + 1px right border. box-sizing: border-box automatically calculates the sum of all the margins, paddings and borders of your block element and adjusts them to match the actual specified width.
This is the css of my div. İ expect the background to fill the whole screen but it is bigger than my screen resolution, so a bottom scroll bar appears
.hero-unit {
padding:60px;
margin-top: 60px;
background: url("../img/bar2.jpg") no-repeat scroll 0;
height:233px;
width:100%;
left:0px;
background-size: cover;
position:absolute;
background-color:#eeeeee;
}
You can use box-sizing
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box;
This makes it so when you add padding, margin, or borders it will not effect the width. (this will not work IE7 and below)
You are adding padding to the already 100% width.
What you need to do (if you are using percentages) is change your padding to be a percentage and make it add up to 100 percent.
For example:
padding:5%;
width:90%;
I also found an alternative using overflow:hidden to remove the scroll bar. This will not remove your issue though as the padding will still overflow the window, just not visibly.
html, body
{
width:100%;
}
body
{
overflow:hidden;
}
See the jsfiddle here.
remove padding if it is necessary then decrease width.
Try to keep them in percentages like
padding:5%; /*desired value*/
width:80%; /*desired value*/
when they will be added, it should be less than or equal to 100%.
If you have margin then consider it also. (assume margin:5%;)
For Example:
<----------------100%---------------->
margin | padding| div |padding | margin
|<--5%-->|<--5%-->|<--80%-->|<--5%-->|<--5%-->|
This is same for Horizontal (width) or Vertical (Height) adjustments.
Often horizontal overflow happens due to an element whose opacity is 0. You can't also see the element but it leads to horizontal overflow. Add the following code to css.
body {
overflow-x: hidden;
}
.hidden-thing {
position: absolute;
left: 100%;
width: 50px;
height: 50px;
opacity: 0;
}
This might be due to the margins and the padding of the body.
Add this block to your body to see if it helps:
body {
margin: 0;
padding: 0;
}
Additionally, you're defining padding to an already 100% element, making it larger than the body.
I have the following CSS and HTML snippet being rendered.
textarea
{
border:1px solid #999999;
width:100%;
margin:5px 0;
padding:3px;
}
<div style="display: block;" id="rulesformitem" class="formitem">
<label for="rules" id="ruleslabel">Rules:</label>
<textarea cols="2" rows="10" id="rules"></textarea>
</div>
Is the problem is that the text area ends up being 8px wider (2px for border + 6px for padding) than the parent. Is there a way to continue to use border and padding but constrain the total size of the textarea to the width of the parent?
Why not forget the hacks and just do it with CSS?
One I use frequently:
.boxsizingBorder {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
See browser support here.
The answer to many CSS formatting problems seems to be "add another <div>!"
So, in that spirit, have you tried adding a wrapper div to which the border/padding are applied and then putting the 100% width textarea inside of that? Something like (untested):
textarea
{
width:100%;
}
.textwrapper
{
border:1px solid #999999;
margin:5px 0;
padding:3px;
}
<div style="display: block;" id="rulesformitem" class="formitem">
<label for="rules" id="ruleslabel">Rules:</label>
<div class="textwrapper"><textarea cols="2" rows="10" id="rules"/></div>
</div>
let's consider the final output rendered to the user of what we want to achieve: a padded textarea with both a border and a padding, which characteristics are that being clicked they pass the focus to our textarea, and the advantage of an automatic 100% width typical of block elements.
The best approach in my opinion is to use low level solutions as far as possible, to reach the maximum browsers support.
In this case the only HTML could work fine, avoiding the use of Javascript (which anyhow we all love).
The LABEL tag comes in our help because has such behaviour and is allowed to contain the input elements it must address to.
Its default style is the one of inline elements, so, giving to the label a block display style we can avail ourselves of the automatic 100% width including padding and borders, while the inner textarea has no border, no padding and a 100% width.
Taking a look at the W3C specifics other advantages we may notice are:
no "for" attribute is needed: when a LABEL tag contains the target input, it automatically focuses the child input when clicked;
if an external label for the textarea has already been designed, no conflicts occur, since a given input may have one or more labels.
See W3C specifics for more detailed information.
Simple example:
.container {
width: 400px;
border: 3px
solid #f7c;
}
.textareaContainer {
display: block;
border: 3px solid #38c;
padding: 10px;
}
textarea {
width: 100%;
margin: 0;
padding: 0;
border-width: 0;
}
<body>
<div class="container">
I am the container
<label class="textareaContainer">
<textarea name="text">I am the padded textarea with a styled border...</textarea>
</label>
</div>
</body>
The padding and border of the .textareaContainer elements are the ones we want to give to the textarea. Try editing them to style it as you want.
I gave large and visible padding and borders to the .textareaContainer element to let you see their behaviour when clicked.
If you're not too bothered about the width of the padding, this solution will actually keep the padding in percentages too..
textarea
{
border:1px solid #999999;
width:98%;
margin:5px 0;
padding:1%;
}
Not perfect, but you'll get some padding and the width adds up to 100% so its all good
I came across another solution here that is so simple: add padding-right to the textarea's container. This keeps the margin, border, and padding on the textarea, which avoids the problem that Beck pointed out about the focus highlight that chrome and safari put around the textarea.
The container's padding-right should be the sum of the effective margin, border, and padding on both sides of the textarea, plus any padding you may otherwise want for the container. So, for the case in the original question:
textarea{
border:1px solid #999999;
width:100%;
margin:5px 0;
padding:3px;
}
.textareacontainer{
padding-right: 8px; /* 1 + 3 + 3 + 1 */
}
<div class="textareacontainer">
<textarea></textarea>
</div>
This table hack code works for me in all browsers from IE8+
<td>
<textarea style="width:100%" rows=3 name="abc">Modify width:% accordingly</textarea>
</td>
I was looking for an inline-styling solution instead of CSS solution, and this is the best I can go for a responsive textarea:
<div style="width: 100%; max-width: 500px;">
<textarea style="width: 100%;"></textarea>
</div>
The problem lies in the box-sizing property.
By default, the initial value of the box-sizing property is content-box.
so you have something like this under the hood:
textarea {
border:1px solid #999999;
width:100%;
margin:5px 0;
padding:3px;
box-sizing: content-box;
}
box-sizing: content-box; means that the width of the actual element is equal to the width of the element's content box.
so when you add padding (in this case padding-right and padding-left --> because we are talking about width) and border (in this case border-right and border-left --> because we are talking about width), these values get added to the final width. so your element will be wider than you want.
set it to box-sizing: border-box;. so the width will be calculated like so:
horizontal border + horizontal padding + width of content box = width
in this case, when you add horizontal border and horizontal padding, the final width of element does not change, in fact, the content box will shrink to satisfy the equation.
You can make use of the box-sizing property, it's supported by all the main standard-compliant browsers and IE8+. You still will need a workaround for IE7 though. Read more here.
No, you cannot do that with CSS. That is the reason Microsoft initially introduced another, and maybe more practical box model. The box model that eventually won, makes it inpractical to mix percentages and units.
I don't think it is OK with you to express padding and border widths in percentage of the parent too.
If you pad and offset it like this:
textarea
{
border:1px solid #999999;
width:100%;
padding: 7px 0 7px 7px;
position:relative; left:-8px; /* 1px border, too */
}
the right side of the textarea perfectly aligns with the right side of the container, and the text inside the textarea aligns perfectly with the body text in the container... and the left side of the textarea 'sticks out' a bit. it's sometimes prettier.
For people who use Bootstrap, textarea.form-control can lead to textarea sizing issues as well. Chrome and Firefox appear to use different heights with the following Bootstrap CSS:
textarea.form-conrtol{
height:auto;
}
I often fix that problem with calc(). You just give the textarea a width of 100% and a certain amount of padding, but you have to subtract the total left and right padding of the 100% width you have given to the textarea:
textarea {
border: 0px;
width: calc(100% -10px);
padding: 5px;
}
Or if you want to give the textarea a border:
textarea {
border: 1px;
width: calc(100% -12px); /* plus the total left and right border */
padding: 5px;
}
How about negative margins?
textarea {
border:1px solid #999999;
width:100%;
margin:5px -4px; /* 4px = border+padding on one side */
padding:3px;
}
The value of the padding has a role to play. Using the style you posted:
textarea {
border:1px solid #999999;
width:100%;
margin:5px 0;
padding:3px;
}
The width is already filled up and you have padding left, right to be 3px. So there will be an overflow.
If you change your style to this:
textarea
{
border:1px solid #999999;
width:98%;
margin:5px 0;
padding: 3px 1%;
}
What my styling is doing now is it has a width of 98% and its remaining 2% to complete a 100% and that is why I gave padding left 1% and padding right 1%. With this, the issue of overflow should be fixed