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.
Related
I need to preserve the aspect ratio of a div when the browser window is resized.
I have done a good bit of searching on this, and it is possible to use padding to preserve the aspect ratio of a div by making its height relative to its width, whenever the width of the screen is altered.
The technique is shown here on Stack Overflow, and in particular, this linked to example shows the technique in action.
But I need to do the opposite. Rather than making the height relative to the width of the div, I need the width of the div to change whenever the height of the browser window is altered. I need to do this because I have a background image that I want the content to flow relative to, and that background image has a 100% height, and its aspect ratio is preserved.
I have tried using linked method, but swapping horizontal for vertical attributes. It isn't working. I have no idea why. Perhaps someone can show how to do this.
I need the width of the div to change whenever the height of the browser window is altered.
For a pure CSS solution to that, you will have to wait for a broader implementation of either calc() or the vh unit.
I don't know if this is possible in pure CSS, but there is a possible way with jQuery, see this discussion
Maybe something like mmoustafa suggested:
$(window).resize(function() {
$('#my-div').css('width', window.innerHeight*0.4+'px');
$('#my-div').css('height', window.innerHeight*0.2+'px');
});
Is it possible to set width in CSS in percents of height? Like on picture:
No, you can't do this with CSS.
You can not set height like that in css.
There is little use even if You can, because different users have different preferences about using toolbar which occupy height on monitor, some even have multiple lines of bookmarks, some view Web in full screen - therefore there is no point of setting page layout according to browser height.
Only good recommendation is setting width to 1000px because most current day monitor resolutions can display that without horizontal scroll.
I'm building a Google Chrome extension and need to have a particular <div> tag resizable. This works, but it can only be resized to be larger than its original size, not smaller.
According to this question, this is set by the browser.
Are there any workarounds that allow the div to be made smaller?
AFAIK, there is currently no way to use a CSS resize attribute without a fixed minimum width unless you explicitly set that width.
If you wanted to resize a DIV that is currently 200px to 100px in height, you have to set the styles height to 100px to force the resize attribute to start resizing from there.
Is it possible to make an element behave/sized like the background-size:contain? For reference, here's a page demonstrating background-size:contain (try resizing your browser window and see what the background image does).
That is, I want to make an element with constrained aspect ratio, with width and height such that either width or height will be 100% of the window width (and the other will be whatever is necessary to preserve ratio and keep the entire element visible in the window without scrollbars)?
For example, suppose I want an element to have a ratio of 16:9. If someone's browser window is super wide and not very tall, then I want my element's height to be 100% and the width would be less (whatever is necessary to keep the element's ratio 16:9). If someone's browser window is really tall and not very wide, then the width would be be 100% and the height would be less (again, whatever is necessary to preserve that element's target ratio).
I'm thinking the only way to do this is with javascript. Is there some magical CSS way to accomplish this that I don't know about?
I guess you want to have a liquid template view.
Checkout this example if it suits your need
http://www.maxdesign.com.au/articles/liquid/liquid-sample1/
Thanks.
I am new to Div based Page Layouts. My questions is should we design div based page layouts using percentage or fixed pixel?
If percentage, what about cross browser compatibility?
If fixed pixels, what about different screen resolution? What screen resolution should we opt for?
Also, what should be the bases for our decision?
Most div based page layouts use fixed pixel widths, not percentages.
Using percentages has its advantages in very few scenarios - if you have a page that you want to change width based on window/browser, you'd use this. But I honestly can't think of the last time I saw a site that did this.
Fixed pixel widths allows you to actually design what your site will look like regardless of browser, screen resolution...etc.
When creating a layout with fixed widths, usually you create a "container" div that is around 960px wide (see http://960.gs/). This width is used because it fits most browsers/screen resolutions (eg - anything 1024x768 and above)
The "container" is usually centered on the page (though sometimes it's left aligned) - for examples, see msn.com, yahoo.com, stackoverflow.com ...etc. These are all fixed widths, not percentage (you can test this by changing the size of your window and seeing that their content does not change)