I have a child-element with position: absolute; that should have the same width as the wrapper but has an ancestor that is positioned as well. Since the ancestors width is content dependent I can't 'back-calculate' a width that would always match the wrapper or even stay inside the viewport. Using a width in vw and the wrappers max-width I get the look I want but it wont work in IE8 or most Android versions.
A JS solution is easy enough but would lead to a visible jump before it's applied and a somewhat broken layout if it isn't applied at all.
So I am wondering: Is there a non-js way of enforcing a dynamic width larger than the parent-element but at most as wide as the viewport?
Related
I am trying to make a website with a fluid layout. So to do this I am trying to use percentages as measurements. If I am not mistaken, the percentages are calculated from the parent element. Since the html tags does not have any set width, how does the body tag calculate 100% width? does 100% means the full resolution of the screen that you are viewing the page?
thanks
You have to read the specs to find the answer to your question:
https://www.w3.org/TR/CSS22/visudet.html#x3 says about percentage widths:
<percentage>
Specifies a percentage width. The percentage is
calculated with respect to the width of the generated box's containing
block.
About containing blocks:
https://www.w3.org/TR/CSS22/visudet.html#containing-block-details says:
The position and size of an element's box(es) are sometimes calculated
relative to a certain rectangle, called the containing block of the
element. The containing block of an element is defined as follows:
The containing block in which the root element lives is a rectangle
called the initial containing block. For continuous media, it has the
dimensions of the viewport and is anchored at the canvas origin;
(...)
The root element is <html> (https://www.w3.org/TR/html-markup/html.html).
The screen is considered a continuous media.
The relationship between viewport and canvas is simple:
https://www.w3.org/TR/CSS22/visuren.html#viewport
https://www.w3.org/TR/CSS22/intro.html#canvas
User agents for continuous media generally offer users a viewport (a
window or other viewing area on the screen) through which users
consult a document. User agents may change the document's layout when
the viewport is resized (see the initial containing block).
When the viewport is smaller than the area of the canvas on which the
document is rendered, the user agent should offer a scrolling
mechanism.
So, trying to simplify this, the canvas size considers the content size even if it doesn't fit on the browser window.
The browser window contains the viewport (considered without menus, scrolling bar and status bar).
So, if <body> has 100% width, that means it would be the same width as the <html> element, which width is equal to the viewport's width.
You can easily find the viewport width by inspecting the css for <html> element on Chrome.
100% width for the body tag means 100% of the html width, which again is the full width of the viewport, which on desktops will be the browser window, on mobile devices the screen width.
Using just HTML and CSS would not suffice to get the width, you would need to use Javascript, or even better, a framework like jQuery that would help you get the body's width.
Using jquery the code would look something like this:
$(document).width();
You can find out more about it here.
Keeping the aspect ratio of a <div> or similar element while being responsive to the parent's size seems to be a common problem. The solution that is widely regarded across the net as being the most elegant one is this:
Maintain the aspect ratio of a div with CSS
Using a wrapper element and defining the aspect ratio via the width and padding-bottom element, both of which are relative to the parent size.
div.wrapper {
width: 30%;
padding-bottom: 30%;
}
Now, my current problem is, that I need to introduce to introduce a max-height to these wrapper elements in order to make sure, that at least two rows of them fit the screen, independent of the viewport size. Adding max-height to the example above limits the element's height, but leaves the width unchanged.
However, an aspect ratio of 1:1 still needs to be maintained, even if the height is restricted via max-height. Also, I would like to have the group of wrapper elements (three or four columns, two rows) in the center of the viewport/parent.
Is there any pure html/css way to achieve this (without javascript)? I would not mind using <img> elements with a source of the desired ratio as I have to apply (background) images to these elements anyway but a universal, elegant solution as for the problem above would be appreciated.
You just have to use below code :
div.wrapper{
height:auto;
width:30%;
}
Then Problem is Solved
I am trying to change my navigation bar's position from the top of the screen based on the screen width. I tried in CSS: top: 10%, but this is based on the height of the screen not the width.
Is there a way to get top: .1 * width?
Quite often overlooked is that the vertical margin percentage properties of elements refer to their containing block's width, not just the horizontal ones.
That means that if you set something to margin-top:10%;, it will have a top margin equivalent to 10% of it's containing block's width.
You can easily see that in this jsFiddle. Try resizing the output panel vertically and horizontally, and note which resize direction makes the inner block move up and down.
You can use vw and vh and if your browser targets are allowing, I'd recommend that. But if you can't use them, you don't have to use Javascript right away. Too many people gun right away for Javascript when it opens up a whole new can of worms (like, what if the browser resizes?), especially when a bit of creative use of CSS can get you out of a sticky spot anyway.
I was going to say there is no way to do so, but apparently in CSS3 since 2011 you have vw/vh that allow sizes to be relative to the viewport. For example:
img { height: 95vw; }
should give images a height that is 95% of the viewport width. Read more; apparently only IE9 supported it at the time of writing.
I'm trying to make a horizontal layout (with columns) where the content scales based on the browser window height.
I came across answers about perfect ratio based on width, but I want to have an infinite width (as the amount of content won't always be the same).
Is this possible just using HTML/CSS?
It is going to be hard to maintain the aspect ratio with css, but if you set the height of the maincontent box to 90% and the height of the containers to 100%. They should respond to
the browser window. But only in height, never in width.
From there you can use javascript to set the with to be <height> * 1.5 (or similar) you will have to do this in the document ready event, but also in the window resize event.
http://jsfiddle.net/NykbP/
I am trying to make my margin-bottom css properties on .header, .mainBanner, and the lis scale relative to the height of the document/window but they are scaling relative to the width of the document/window while the heights of the divs are scaling properly...
height:8%
The above scales correctly
margin-bottom:2%;
The above does not.
How can I make them scale relative to the height?
Margin declared in percentages is based on its parent node's width. Go figure.
Here's a great article that should help you out: http://mattsnider.com/css-using-percent-for-margin-and-padding/