working on a class project, and something has our whole class, including our teacher, stumped. We're making a calculator out of html, css and javascript. The problem involves CSS. We have set the calculator to height: 50vmin and width: 50vmin.
We then set font-size to 5vmin, expecting it to be 10% of the container height. Instead, the font size is coming out to be around 11-12% or more of the height. For example, on my screen, the container is 323.5 px and the font-size is 37.981px. This does not include the padding or margin: it is the font-size itself. Does anyone know why the font is not coming out 10%? With 5 rows of buttons, plus margins and padding, it makes quite a difference.
Thanks!
font-size: 10vh;
1vh = 1% of viewport height
Related
How do I set the height of a div container for example that should be 60% of the screen height?
Setting the 60% as the height in css works fine if the browser window is not resized. But if I shrink the browser window, the div shrinks accordingly.
https://zurb.com provides a nice example. The "Mission Accomplished", grey part is always the same height, no matter how the browser window is being resized. How can this be ensured?
I don't want to use px to ensure HiDpi support.
Thanks,
That's a simple fixed-height element; it has nothing to do with screen size.
You should just use px and not worry about anything; px means logical pixels and will work with arbitrary DPIs.
While the page in question simply used a fixed height (px) for the element in question, meaning that it will always have the same height (and won't be 60% of the height regardless of viewport height). In order to have an element be relative to the viewport, you're looking for viewport-sized typography.
To adjust based on height, you're looking for the CSS unit vh, which tells the element in question to scale based on the viewport height. You can also use vw to scale based on the viewport width.
Keep in mind that <body> has a default of margin: 8px, so if you want to avoid scrollbars when using viewport-sized typography, you'll also need to override this back to 0.
body {
margin: 0;
}
div {
height: 60vh;
width: 100vw;
background: red;
}
<div></div>
For more in-depth information on CSS units, I'd recommend checking out this guide.
Hope this helps! :)
Let's say the width of the containing box is 5cm, padding(all sides) is 2cm.
if I set the width of the content to be 50%. Now the absolute value of the width would be 2.5 cm. But if the padding effect is still there, then the box now would be 2+2.5+2 = 6.5cm. But the content would no longer be 50% of width now(2.5/6.5 != 50%).
I'm kinda confused,any help? Thanks!
Look into the Box Model to understand how this currently works.
It does vary significantly between some browsers (especially older ones).
Not as big a problem as it used to be, but the solution to use box-sizing may not be a universal fix depending on your users (any hold-outs still on IE >8?).
As stated by others you can use the box-sizing property to fit either to the content alone, content with padding, or the entire box w/padding & border (which is probably what you want).
The result is correct. To simplify these calculations you could use box-sizing: border-box to include padding in total width.
border-box
The width and height properties include the padding and border, but not the margin. This is the box model used by Internet Explorer
when the document is in Quirks mode. Note: Padding & border will be
inside of the box e.g. IF .box {width: 350px}; THEN you apply {border:
10px solid black;} RESULT {rendered in the browser} .box {width:
350px;}
Reference: MDN - box-sizing
This is a common problem devs come across.
If I have:
<div style="width: 200px"></div>
Then the width will be 200px wide.
If I add 10px padding, then I need to deduct 20px total from the width.
So to keep it 200px wide it must now be:
<div style="width: 180px; padding: 10px"></div>
It is possible to override this so the width doesn't need to be adjusted according to padding, but I feel you should stay true to CSS's intended way of working.
With does not override padding, the padding is added to the width.
Think of padding as extra width but outside of the element.
The width will not override the padding but the padding will still be
there so other elements will be pushed away from their position (if
relative).
Edit: Confused padding with margin.
The max-height property value seems to be ignored when the inner padding is greater than the max-height value. For example, setting this class on an element causes the max-height to be ignored.
.max-height-ignored {
height: 0; /* or auto, makes no difference */
max-height: 40px;
padding: 0 0 50% 50%;
}
demo here
In my situation, It would be a pain to wrap the element to prevent overflow and was just wondering if there was a reason behind this not working.
The min/max width/height properties never take any other box dimensions into account, neither borders nor padding. They only constrain the used values of the width and height properties respectively. Section 10 of CSS2.1 does not explicitly mention borders or padding in the prose for the min/max properties, but it does refer to the width and height properties, both of which refer to content dimensions.
If you set height: 50px, the element will still be constrained to a content height of 40px. The padding then extends from the content area.
Unfortunately, it appears box-sizing: border-box does not address this fully, at least not when the borders and/or padding are in excess of width and height.
While I can infer that this happens as a result of browsers following the spec, why the spec was written this way I cannot answer objectively. Given that padding and overflow clipping can work together, I don't think the reason for this behavior has anything to do with overflow.
It might be obvious, but as a work around, you might be able to limit the width of the wrapper using max-width. In my particular case, this required a max-width: 50vh (vh: percentage of viewport height).
When using a css background such as in the footer on the page below (in the elements div.footer_head and div.footer_footer), if the browser window is resized to less than about 1000px the divs themselves remain at the full width but scrolling right in the browser causes whitespace to appear where the background should be.
I was sure I'd find a similar question on here but can't seem to word it correctly enough to find it in search.
If someone could point me in the right direction I'm sure I can figure this out.
Look at how the divs with class footer_head and footer_footer behave when you resize the browser to be quite thin and scroll to the right.
screenshot http://printanomics.unbranded-nomads.co.uk/picture-2.jpg
You need to add a min-width:1000px to .footer-container.
.footer-container {
float: left;
line-height: 1.5;
margin-top: 20px;
width: 100%;
min-width: 1000px; /* add this */
}
This will mean the smallest width the .footer-container will get is 1000px. Though after that it will expand to 100%.
If you have a look at your css file you will see that the footer width is set to 100% and not 1000px as the other divs. This also applies to your background as your background won't be bigger than the div itself.
I don't know if you use this, but Firebug is a very good Firefox plugin to identify troubles in CSS files.
In the page layout I am creating, for some reason, the scrollbars never seem to show and rather the content tries to rearrange itself. Is there a way to lock in a set width and height for the whole page so that if the window is scaled it shows scrollbars?
The page: http://thetalkingcloud.com/clipit.com/
Specifically, if you make the window small, the "COPY PASTE SHARE" links change their position dramatically.
Thanks if anyone can help out :)
If you want to make layout more "fluid," specifically the slogan in the header, try making the following changes to .top_text
.top_text {
float: right;
font-family: "Lucida Grande",Verdana,Arial,sans-serif;
font-size: 60px;
margin-right: 20px;
padding-top: 24px;
}
You will still need to establish a minimum width for the page. Because IE6 doesn't support the min-width property, I often achieve this simply by placing an empty div with the desired minimum width at the top of whatever container I would otherwise use min-width on.
Your top div has a percentage width, instead give it a fixed pixel width so it does not collapse.