margin-top percentage does not change when window height decreases
The percentage works on the width of the container block, according to the css specifications
The percentage is calculated with respect to the width of the
generated box's containing block. Note that this is true for
'margin-top' and 'margin-bottom' as well.
See w3.org for more information.
Percentage based margin-top and height are not working together
If you're looking for a reason as to why this behavior is occurring:
CSS basic box model - 8. The margin properties
Note that in a horizontal flow, percentages on ‘margin-top’ and ‘margin-bottom’ are relative to the width of the containing block, not the height (and in vertical flow, ‘margin-left’ and ‘margin-right’ are relative to the height, not the width).
Emphasis added. These margin-top
values are relative to the width of the body
element. In this instance, if the window is resized horizontally, the heights of the elements don't change, yet the margin-top
values do; resulting in vertical alignment issues.
No need to use jQuery to solve this. The solution would be to use something other than margins for displacement. See this updated example.
CSS margin-top is incorrect value
Instead of 50%
try 50vh
50%
doesn't do what you think it would - it actually uses the width
of the parent container, not the height
to calculate.
How to set the margin or padding as percentage of height of parent container?
The fix is that yes, vertical padding and margin are relative to width, but top
and bottom
aren't.
So just place a div inside another, and in the inner div, use something like top:50%
(remember position
matters if it still doesn't work)
margin-top in percentage not working as expected
The point is that a percentage value for top/bottom margin
/padding
properties is relative to the width of the box's containing block. It doesn't respect the height of the parent element.
8.3 Margin properties: 'margin-top', 'margin-right', 'margin-bottom', 'margin-left', and 'margin'
<percentage>
The percentage is calculated with respect to the width
of the generated box's containing block. Note that this is true for
margin-top
andmargin-bottom
as well. If the containing block's
width depends on this element, then the resulting layout is undefined
in CSS 2.1.
As you are using absolute
positioning, try using top: 99%
instead in which a percentage value refers to the height of the box's containing block.
CSS fluid layout: margin-top based on percentage grows when container width increases
In CSS, all four margin: and padding: percentages are relative to the width ...even though that may seem nonsensical. That's just the way the CSS spec is, there's nothing you can do about it.
Can you do what you want with 'ex' (or 'em') instead? That's the way I'm used to seeing "fluid" values for margin/padding specified ...and it may be less problematic than percentages. (Although I don't have the relevant first-hand experience, I suspect the extremely long precisions on your calculated percentage values are going to set you up for browser incompatibility problems later. My style is to limit CSS percentages to integers if at all possible, or occasionally perhaps one or sometimes maybe even two digits after the decimal point.)
If you really want an exact arbitrarily-sized empty vertical space that's a percentage of the container, the first thing that comes to my mind is a separate empty < div > with a "height: nn%" CSS specification. Or perhaps something else you're specifying is already handling the vertical sizes they way you wish (since it would appear the margins aren't really doing anything at all on a vertical resize).
Why does top/bottom margin set to % change when resizing the screen horizontally?
You can use vh here
vh: is viewport height which will be only reacting when the height change not on width change.
.item {
width:30%;
margin-left:1.45%;
margin-right:1.45%;
margin-top: 1vh;
margin-bottom: 1vh;
}
Read more about units here
https://developer.mozilla.org/en-US/docs/Web/CSS/length
Ways to change margin by screen size
you have Several option:
1:Responsive Option:
media query consists of a media type and at least one expression that limits the style sheets' scope by using media features, such as width, height, and color. Media queries, added in deprecated CSS3, let the presentation of content be tailored to a specific range of output devices without having to change the content itself.
@media all and (max-width: 1000px) and (min-width: 700px) {
.class {
margin:50px;
}
}
2:Using Percentage:
you can use:
.class{
margin:40%;
}
resource:
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
http://css-tricks.com/css-media-queries/
Why are margin/padding percentages in CSS always calculated against width?
Transferring my comment to an answer, because it makes logical sense. However, please note that this is unfounded conjecture. The actual reasoning of why the spec is written this way is still, technically, unknown.
Element height is defined by the height of the
children. If an element has padding-top: 10% (relative to parent
height), that is going to affect the height of the parent. Since the
height of the child is dependent on the height of the parent, and the
height of the parent is dependent on the height of the child, we'll
either have inaccurate height, or an infinite loop. Sure, this only
affects the case where offset parent === parent, but still. It's an
odd case that is difficult to resolve.
Update: The last couple sentences may not be entirely accurate. The height of the leaf element (child with no children) has an effect on the height of all elements above it, so this affects many different situations.
The margin top 50% making element out of screen
You can use viewport value instead of ems, pxs or pts.
1vw = 1% of viewport width
1vh = 1% of viewport height
1vmin = 1vw or 1vh, whichever is smaller
1vmax = 1vw or 1vh, whichever is larger
Try margin-top:50vh
it will take 50% height of the viewport.
.buttons{
width: 300px;
height: 50px;
margin-left:auto;
margin-right:auto;
position: relative;
margin-top: 50vh; //changed this
}
Demo here
Related Topics
Why Doesn't This CSS Transition Work on Svg Inside an Anchor
How to Make a Blurred Gradient Shadow with CSS
Make Text in Select Element Wrap When Too Long
How to Make a Link Inside a Div Fill the Entire Space Inside the Div
Set Textfield Height Material-Ui
Hide All Elements Except One Div for Print View
CSS - Opaque Text on Low Opacity Div
-Ms-Filter VS Filter What's the Difference
CSS Position: Sticky and Overflow
Create Line After Text with CSS
How to Increase the Bullet Size in a Li