Is there a purely CSS-based way to size a block-level element such that it fills its parent as much as possible, but remains square?
An interesting use case
I have written a very simple analogue clock using mostly CSS, and a pinch of JavaScript.
http://jsbin.com/iqicuk
It has been written scalably:
http://jsbin.com/emiyer
I would like to scale it to fill the page, but stay in proportion, obviously.
If I set the width and height of #clock to 100%, of course, it will be pulled out of proportion:
http://jsbin.com/esubol
You can't do that with pure CSS, but you can do it with Javascript - and I assume you have Javascript running anyway to resize the parent element.
A solution in progress
thirtydot came up with a very clever technique that takes advantage of the fact that images with only one defined dimension scale proportionately, and he harnesses this to size the element. We now have a clock that can scale properly, but only if the viewport width is greater than the height, not the other way around:
http://jsbin.com/isixug
Likewise, if we change img and #clock to have a defined width, instead of a defined height, then we have a clock that can scale properly, but only if the viewport height is greater than the width:
http://jsbin.com/awucun
The solution
We can combine the two 'tricks' above, that each only work for one orientation, by using a media query for orientation, and specifying the right 'trick' depending on the viewport orientation. We now have a completely scalable clock, no matter what the viewport orientation or size:
http://jsbin.com/okodib
Any in flow block level element will already inherit the width from its parent. For the height however you will need to find an alternative.
I doubt this is something you will want to do but if you set your parent to position: relative; and then the child you want to make fill up that parent position: absolute;. Then specify where it needs to stick to relative to its parent with top:0;left:0;bottom:0;right:0;.
However this solution has compatibility issues in lower versions of IE and is rarely acceptable for application...
As Jens Roland already said, this is not possible through pure CSS.
Maybe LESS is helpful to you.
Related
I have a web page as follows (see img)
A certain div has a width of 100% which is filling the whole viewport.
When checking on Chrome, the viewport size is 500px while the CSS size is 536.
Does anyone have an idea why it's different please ?
Thanks.
Cheers,
Many modern visualization techniques, such as parallax, require larger elements than the actual viewport size and a smart usage of transform properties in order to create particular visual effects and/or illusions.
Your picture is actually showing a part of the parent element displaying properties particular to such techniques, clearly showing: -webkit-logical-width:800px and perspective-origin: 400px 300px.
For any element with a position value other than fixed, width:100% usually results into the child having an equal width with the parent, not with the viewport. There are notable exceptions from this rule, though.
If you need a more in-depth explanation as to why does the parent have a different width than the viewport (and it's parent parent, and so on... - all the way to the viewport), you need to post a Minimal, complete and verifiable example and I'll lay down each of the ancestors of your element affecting its width.
If, on the contrary, you don't really need to know what's going on at parents level, but are looking for a way to make your current element as wide as the viewport, you probably want to give it a width value of 100vw.
I would like to animate the width of a container with multiple divs using CSS3 transitions. Each child has a background and a property background-size: cover.
I prefer to use CSS3 scale rather than width for better performances. But with scale the background doesn't keep its aspect ratio.
Here is a fiddle showing the problem.
Is it possible to keep aspect ratio?
I don't think it is possible using scale.
You see, the thing is when you use width to scale the div it forces the browser to do some math for the element and an entire box model, it doeas the layout of the CSS and repaints and rerenders it entirely.
When you use scale it moves your element to a separate layer and it doesn't recalculate anything, it's just the GPU that processes your element in a very "graphical" way, so scaling 0,5 is just shrinking it visually and thats it. This is the reasony why, as you said, CSS transform is better in terms of performance - because it doesn't recalculate things, but there are some drawbacks of using those transform as you can see. Since it deosn't do the math, it cannot do background-size: cover because there is just not enaugh information to know how to paint it.
Or, let me put it this way: if you do width: 50% browser calculates the width of the element and knows it - thanks to that information it can position your background the way you want (and you want it to cover so its doing the math, taking the width, height, you background image size etc.).
If you do scale it doesn't know the width of the element in terms of CSS layout, it doesn't even care. It just knows how wide it was initialy (visually), renders the layer and than just shrinks it down without any further processing whatsoever. And since its GPU doing that, it's really really fast.
I have never heard of this intrinsic value before until I come across this page on MDN.
From what I know intrinsic means natural. So how does this work out in CSS. I thought that auto would have been natural. I've searched around a bit but can't find anything on it.
What does it do different than auto?
The example I saw was max-width: intrinsic;
It looks like the intrinsic value is part of the newer CSS3 sizing module:
http://dev.w3.org/csswg/css-sizing/
I have not used it yet but perhaps the reference will provide you with more information.
Based on a quick review, this module would make it easier to specify how content fills the width and height of a parent containing block.
At the moment, JavaScript functions are often used to compute widths and heights of container blocks based on % values for variable child elements content.
It allows you to set the width of an element to stretch wide enough to accommodate its children. So, if a div element contained a wide image and some text, the div would stretch wide enough to accommodate the image, and the text would begin breaking at that threshold.
Definitely experimental and not widely supported: http://caniuse.com/intrinsic-width
Intrinsic sizing determines sizes based on the contents of an element,
without regard for its context.
http://dev.w3.org/csswg/css-sizing/#intrinsic-sizing
I have found that in iOS8, flexbox children may not always try to contain all their children and instead max their height to the available viewport.
min-height: min-intrinsic fixes that problem.
I was wondering what would be the best way to create a feature strip of background in a website layout?
The approach that comes to mind, would be to create an absolute positioned div with a z-index of -1 and adjust top/height to match up behind a fixed layout.
Is this a good way to go about it? Or is there a better way?
Thank you for any help! :D
A div containing an image placed behind the content is probably the best way to make a scaling background.
I think CSS3 also supports background scaling, but it is not widely supported.
A more semantic approach would be to apply the background strip to an element on the page -- in the case of your example, the "slideshow" element. This element's outer constraint (whether that be a div, a ul, or something else) can then be stretched to 100% of the width of the page, and the content of the element centered (or positioned as desired).
This approach would be more maintainable than some other approaches -- content could be added before the element without breaking the layout, the strip could be changed without much effort, etc.
Background scaling could be taken care of in several ways:
Make your background big enough that it isn't likely to ever be a problem.
Use a tile-able background.
Use CSS3 background-size property. A jsfiddle example is here. (Not supported in <=IE8, but with a little creativity could degrade gracefully.)
Put the image inside your div (or similar) and then use CSS to position absolutely, set the z-index to force below the content, and stretch the image to the width and height of the element. Here's a jsfiddle example. (Note: UNSEMANTIC! Reduces maintainability, etc. But does have better support than CSS3 background-size...)
Number of websites "cheat" : the site's background image already have the strip on it
It's simple and painless but it's static.
What is the biggest disadvantage to use CSS positioning(From Dreamweaver AP Div) for everything instead Float for fixed width, centered website?
if I don't care for
Mobile users
Small screen users (smaller than 1024
px screen size)
But I care for
Screen reader user
All browser user (including IE6)
If you don't care about small resolution, it's just a question of flexibility : when you use absolute positionning, you break the flow. So, everything must be exactly sized.
For many elements or situations (make a perfect image title...), it's the best (and sometimes unique) choice. Most of time, 'relative' is better because it kept the flow (element stay in the flow) but you can modify positionning relatively to is positionned parent (don't forget to position parent, even if you don't give explicit position ; for example just add position:relative, without top/left...). And, good point, "position: relative" give haslayout to element in IE !
For example, if you want to put footer after a content, absolute is a bad idea because you probably don't know content's height.
But if you want to put a menu at the top of screen but don't want to bother people who use screen reader (big menu should be at the end, on a linearized document), absolute positionning is perfect.
Float is not the perfect solution, as you can read on many blogs : it's a very particular postionning but it's usefull because 'inline-block' doesn't work all the time. And, of course, it's also usefull when you really want to have elements to be float.
Not so easy to explain when you don't speak english well :)
It's not either/or it's both... Float is good for some situations and position:absolute for others, therefore you may need to use both for your design. If you are serious about using CSS I suggest you buy and read this book http://www.transcendingcss.com/
If an element contains text, you can't predict its height (because you don't know what font and what font size it will actually be rendered at).
That makes it impossible to place the top of one element at the bottom of another element. For example: Forget about having a traditional "Two column with header and footer" layout.