How one could create a CSS rule for width which
Uses 100% width by default
If 100% width exceeds certain pixel width (let's say 512 px), then the width is clamped down to this pixel width
I am not sure about width and max-width relations, or how calc() is supported or could express this. This would need to work with the latest WebKit browsers and Firefox 4. IE8 etc. support not needed
That's in fact the intended use of max-width. If the computed (actual) width of an element exceeds max-width, it will be constrained to the max value instead of going beyond it. Percentage versus pixels isn't relevant.
Declare both in the same rule like this (no need for the calc() function):
#somediv {
width: 100%;
max-width: 512px;
}
If it's block level element it should be 100% by default so no need to declare the width, then max-width: 512px; would curtail it
calc() is not supported very well at all, but in this case I wouldn't think you would need it
div{ max-width: 512px; }
should suffice.
Related
While specifying a percentage value in css calc, how does calc know whether I am referring to width or height?
.container {
width: calc(100% - 2vw); // 100% here is width or height ?
}
One may assume that it is either width or height depending on the property you are accessing, (width in this case). If that were the case, what happens if you would like to do some calculation based on a different property? For instance, set the width based on some calculation of height? Say, set the container width to be 1.5 times height?
From the specification
The computed value of a calc() expression is the expression with all components computed.
Where percentages are not resolved at computed-value time, they are not resolved in calc() expressions, e.g. calc(100% - 100% + 1em) resolves to calc(1em + 0%), not to 1em. If there are special rules for computing percentages in a value (e.g. the height property), they apply whenever a calc() expression contains percentages.
There is no magic when using percentage inside calc() they will simply behave as if you aren't using calc().
So using width:100% is exactly the same as width:calc(100%) which is also the same as calc(50% + 50%). when you add another unit like width:calc(100% - 2em) it's like calculating width:100% then you remove 2em from it.
Basically, calc() is useful when combining percentage and non-percentage value in order to have accurate and precise result like removing 10px from 50% of the total width by using width:calc(50% - 10px).
what happens if you would like to do some calculation based on a different property? For instance, set the width based on some calculation of height?
You cannot do such thing with calc(). CSS in general doesn't allow such thing. You can either consider JS, some hacks to preserve ratio between width/height or use CSS variable and assign the same value for different properties.
Related question where the use of calc() combined with CSS variable is missused: Calc() outputting unexpected value
To answer the second part of the question:
For instance, set the width based on some calculation of height? Say, set the container width to be 1.5 times height?
You can do this with the aspect-ratio property:
.container {
text-align: center;
height: 200px;
/* width / height ratio */
aspect-ratio: 1 / 1.5;
background: lightgray;
}
<div class="container">
some content
</div>
I have a div, and I am given 3 values for the width of the div. The normal width of the div is 120px, the min width of the div is 90px, and the max width of the div is 150px. I guess I am asked to apply these values based on the width of the screen. I would like to know how to write css for this?
I have tried below code, but it seems my div is always 120px.
.myDiv {
width: 120px;
max-width: 150px;
min-width: 90px;
}
Should I use media query?
Max-width and min-width as px will only have an impact if your width is used with percents %
(or other window based width like vw).
In your case I think indeed the best thing to do is use media queries.
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! :)
I have been working on HTML5, javascript and CSS and i want to get the height of screen and set the height of my "div" accordingly in CSS only without using javascript and jquery.. so that it adjusts itself to any screen.
I've tried using height=100% but it takes the height as long as div's content.
Any idea plzz help me out..
Thanks in advance!!
Setting height=100% should work - make sure that the containing elements are also set to 100% height, and add position:absolute
Here's a fiddle:
http://jsfiddle.net/C3anM/
<div id="wrapper">Test content </div>
+
#wrapper {
height:100%;
background-color:green;
position:absolute;
}
i think you are trying to absolute position it.
div{
height:100%;
width:100%;
position:absolute;
border:1px solid red;
}
http://jsfiddle.net/btevfik/DMUcY/
by default the position is static.so the div's are positioned in order and their height is calculated by their content unless you set a px value for height.
http://jsfiddle.net/btevfik/MjM9Y/
You have to set:
html, body
{
height: 100%;
}
jsFiddle: http://jsfiddle.net/sG8gm/
I think you might be looking for viewport-relative css units. They're not supported across the board at the moment, but they are very well-supported among users with modern browsers.
The spec defines them as follows:
vw unit
Equal to 1% of the width of the initial containing block.
vh unit
Equal to 1% of the height of the initial containing block.
vmin unit
Equal to the smaller of ‘vw’ or ‘vh’.
vmax unit
Equal to the larger of ‘vw’ or ‘vh’.
Typical percentage-widths size the element relative to the nearest parent, or, in the case with absolute positioning, the closest parent with position: relative; whereas viewport-relative lengths will always be calculated relative to.... the viewport, regardless of the parent elements in the tree.
Is there any way to get the following effect using CSS?
When container's width is less than image's original width, set image's width to 100% of container's width.
When container's width is larger than image's original width, set image's width to it's original wdith.
May be you can do like this:
for example:
img{
width:100%;
height:auto;
max-width:400px;
}
check this http://jsfiddle.net/aqh2r/
I found that the following CSS code could achieve the goal. But according to CSS Standard, when the value of max-width is percentage, it is "calculated with respect to the width of the generated box's containing block". According to my understanding, set max-width to 100% should take no effect, but it seems wrong.
img{
width: auto;
max-width: 100%;
}
The code is tested in Firefox 12 and IE 9. See http://jsfiddle.net/EnZEP/