It's easy enough to set an element's height depending on its width using tricks such as setting margin-top: AR%, with AR being the aspect ratio of the element.
However, I'd like to do something the other way around.
Namely, I'd like to set the element's min-width to be equal to the element's height, which may be dynamic based on content.
If this isn't possible, that's okay - it's only needed for user-generated content, since the cases where I use it have a static and known height! It's fairly minor, but if it can be done then that'd be great.
Anyone got any ideas?
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.
In this following code i can't understand the function of max-width?and my instructor have written:"It sets max-width:1170px, because when you add the left and right padding with the max-width, you get 1200px which is our large device breakpoint." I hope u can reply on me.Thanks in advance
The max-width property defines the maximum width of an element. This means that if the width is calculated dynamically, it will never exceed the max-width value, but it could be any value smaller.
In your instructors example, the max-width + the side padding will add up to the screen width. This ensures the maximum width of the element never exceeds the width of the screen.
Hope that helps.
max-width
The max-width property in CSS is used to set the maximum width of a specified element. The max-width property overrides the width property, but min-width will always override max-width whether followed before or after width in your declaration
Using max-width instead of width in this situation will improve the browser's handling of small windows.
This is important when making a site usable on mobile.
By the way, max-width is supported by all major browsers including IE7+ so you shouldn't be afraid of using it.
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.
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.
I'm not a CSS expert so I might be missing something obvious. I'm trying to set a relative size header and footer (so that on larger monitors, the header and footer are larger than on smaller screens). To do this, I'm using a percentage height. However, this only works if I set the position to absolute. The problem is, setting it to absolute means that it overlaps the main part of the screen (inbetween the header and footer). Setting it to relative doesn't work since it relies on items being inside the header/footer.
This is what my header looks like:
.header
{
position:absolute;
top:0px;
background-color:white;
width:100%;
height:30%;
}
the ASPX page simply contains
<div class="header"></div>
Is there a way to get relatively proportioned header and footers?
Thanks
In order to have elements take a percentage height, you need to define the HTML and BODY to have a defined height as well. Since you don't know what this is, use 100%.
html, body {
height:100%;
}
To use percentage heights the parent needs to have a fixed height, because if the parent is height auto then it will depend on the height of the child content....which depends on the parent height etc. I think when you set the position to be absolute it takes the screen viewport as the parent element which does have a fixed size (theory by me), which is why it works with absolute.
I don't think its a good idea to try and do the proportional header and footer based on the browser resolution. It really doesn't make much sense to me, honestly, you're going to need to try and scale up and down the font sizes or images you have in the header to match etc. If you really want I would suggest having different CSS stylesheets which users can choose (or is selected automatically by javascript). This way if someone has a huge resolution they can choose the larger one if they want (or its automatically chosen for them). That way you don't have to deal with any scaling issues.