This question already has answers here:
How to make an element width: 100% minus padding?
(15 answers)
Closed 2 years ago.
When addind a css of something like
#mydiv {
width: 100%;
padding: 20px;
background-color: red; /* only for visualization*/
}
<div id="mydiv" >my div<div/>
It will overflow the page.
How can I make this "100 percentage width" not overflow because of the padding?
I don't want to hide the overflow, but I want to make the width a little less than 100% but without having to hardcode some width.
Something like width: 100% - padding
Add box-sizing: border-box to the div's css
By using calc, you can remove the padding from 100%
#mydiv {
width: calc(100% - 40px)
padding: 20px;
background-color: red; /* only for visualization*/
}
<div id="mydiv" >my div<div/>
use just
width: auto;
no need to provide 100% it is by default uses full.
If div contain display property as Block no need to give width 100%, else add display property as block or flex
width:auto;
display:block;
else
display:flex;
Related
This question already has answers here:
Why does this page scroll?
(1 answer)
CSS margin terror; Margin adds space outside parent element [duplicate]
(7 answers)
Closed 5 months ago.
I somehow lost track of what I am doing wrong here:
I got a simple content <div>.
it has a height of 100% - 30px and a margin-top of 30px, ...so together they add up to 100% of the parent elements height.
the parent element is the body with height set to 100vh. No margins, no paddings.
However I do still get a y-scroll bar on the right. Can anyone explain to me, why that is?
I put a minimal example here to show what I mean:
https://jsfiddle.net/kemo8npa/4/
Can someone explain to me, why i get the scrollbar?
html {
margin: 0;
padding: 0;
}
body {
height: 100vh;
margin: 0;
padding: 0;
background-color: purple;
}
.content {
height: calc(100% - 30px);
margin-top: 30px;
background-color: blue;
width: 300px;
}
<div class="content">
content
</div>
edit: changed example to be more minimal.
The margin-top of .inner adds 30px outside of the element, so the sum is 100% height again.
You could use padding-top instead.
This question already has answers here:
Percentage Height HTML 5/CSS
(7 answers)
Closed 3 years ago.
Why when I set div element height with percentage the element doesn't showing up?
Why max-height never showing up? (No matter if it's percentage or vh or px) ?
For example:
<body> <div></div> </body>
div {width:50%; max-height: 100px; background-color: blue;}. Another Example: div {width: 50%; height:20%; background-color:blue;}
Never showing up :( Thanks for help.
Even if an element has a max-height attribute, you still need to tell it to consume it, because the default is auto. So if you want it to consume all height up to a maximum height you placed, use:
height: 100%;
max-height: 100px;
This will be because the element outside the div has a height of 0.
In your example body has a height of 0 so any percentage of 0 is still 0.
If you give your body (or outside element) a height it will be seen.
.outerDiv {
height: 100px;
border: 1px solid black;
}
.innerDiv {
height: 50%;
background-color: lightblue;
}
<div class="outerDiv">
<div class="innerDiv">
I'm inside
</div>
I'm outside
</div>
This question already has answers here:
Percentage Height HTML 5/CSS
(7 answers)
Closed 4 years ago.
Here is the link to my fiddle for reference.
.container {
background-color: gray;
position: relative;
padding: 20px;
height: 70%;
/* uncomment this and will work as expected */
/* height: 70px; */
}
.child1 {
width: 75%;
display: inline-block;
height: 100px;
}
.child2 {
background-color: green;
width: 75%;
float: right;
height: 100%;
}
<div class="container">
<div class="child1">Child 1</div>
<div class="child2">Child 2</div>
</div>
Parent's height is 100px(can see in devtools) after calculation for child1.
Child2 is applied 100% height equaling to 100px, but in computed style(can see in devtools) it is showing 0px.
I am assuming it's because parent's height is calculated at run-time. Any help?
Because parent height is also in percentage. It will work in the following conditions:
Parent of your div has 100% height
Parent of your div has fixed height
Parent of your div has some content and due to which it has some height.
Currently, it does not know 100% of what.
Using a % value in height requires one of the following:
If all parent elements have a percentage height, ALL parent elements to have their height explicitly defined.
Otherwise, a parent element must have a fixed height (not a %).
The parent of your .container element probably doesn't have a height value defined, or the parent of that element, etc.
Remember that the html and body elements count too.
html, body
{
height: 100%;
}
This question already has answers here:
Maintain aspect ratio of div but fill screen width and height in CSS?
(9 answers)
Closed 7 years ago.
I have code like this:
<body>
<div class="parent">
<div class="children">
Some content here
</div>
</div>
</body>
And this CSS:
body {width:100%;height:100%}
.parent{background-color: grey;}
.children{width: 90%; text-align: justify;}
I want to make height of children equal to width of parent. Unfortunately - I do not know why. I tried to look in Internet, tried different solutions like children{width: 90%; text-align: justify;height: 100%;}, but they do not work. I know I can use table instead of this second div, but then this website won't be responsive on smaller devices, which is very importnat for me. Any suggestions?
In straight CSS there is no way to refer to another elements property values. In order to get the child to be the height of the width of the parent, you will need to use javascript.
When the page is done rendering, you will need to grab the width of the parent div using javascript and set the height of the child using that value.
You can do this in CSS 3 with viewport units (each vw is 1% of the width of the viewport):
#parent {
position: relative;
background: #aaa;
margin: 10px;
width: 50%;
}
#child1 {
height: 100px;
background: #333;
width: 100px;
margin: 10px;
}
#child2 {
height: 50vw;
width: 100%;
background: #f00;
}
}
<div id="parent">
<div id="child1"></div>
<div id="child2"></div>
</div>
The catch is you have to know what percentage of the viewport your parent is, although this shouldn't be too much of an issue if you're trying to make your design responsive.
This question already has answers here:
CSS Div width percentage and padding without breaking layout
(3 answers)
Margin-Top push outer div down
(8 answers)
Closed 8 years ago.
New to this, so apologies if I missed a crucial lesson in CSS...
I'm trying to do a simple exercise in CSS... a div within a div, both sized with percentages so they respond to a changing window size. Here's my code:
<head>
<title>Percentage Test</title>
<style>
html, body {
height: 100%;
margin: 0;
}
#outer {
height: 100%;
width: 100%;
background-color: yellow;
}
#inner {
height: 90%;
width: 90%;
/* margin: 5%; */
background-color: blue;
}
</style>
</head>
<body>
<div id="outer"><div id="inner"></div></div>
</body>
Everything does just what I thought; the outer div takes up the whole screen and the inner div takes up 90% of the outer div. If I add to this (i.e. add another inner div, change the percentages) everything does what I would expect. If I add a surrounding margin to the inner div (in this case, 5% but commented out), I would expect the inner div to be centered (top/bottom, left/right) within the outer div. It works for the sides and the bottom but not the top. Instead, the outer div is pushed away from the body at the top (I assume 5% but I'm not sure). Any thoughts on why this happens?
Box-sizing will include padding and borders within the widths size.
DEMO
#outer {
height: 100%;
width: 100%;
padding:5px;
background-color: yellow;
box-sizing:border-box;
}
#inner {
height: 100%;
width: 100%;
/* margin: 5%; */
background-color: blue;
box-sizing:border-box;
}
TIPS
Top margins often fail in some browsers.
Use margin-bottom or padding-top to create the vertical space.
Height 100% will not stretch to fit the outer most container without additional hacking.
The div will only be the size of it's content.
This is the way the CSS box model works by default. The dimensions of an object is the set width/height plus any borders/margin/padding.
To have any borders/margins/padding included in the specified width, use the box-sizing:border-box; setting on that element in your CSS.