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.
Related
I want a page with a fixed pixel size to always have the same percantage hight. I cant just use % or any other relative units since I already made the whole site in pixels.
Means when I have a div with a hight of 1500px and view it on a 1366x768 screen the whole 1500px div should still be visable completely.
The effect I want to accomplish is something similar to a browser zoom.
You could try min-height: 1500px; on the div, then put overflow-y: auto on the body or html elements.
If you want something to dynamically resize depending on the window height you'll want to look into either CSS flexbox, using the vh sizing, or using javascript to detect window resizing.
You could use the viewport meta tag for that. Just remove the "initial-scale=1" part and the page should always be rendered to fit the screen.
You should note that this might result in the page being shown very small which can lead to problems when people want to access it with a smartphone for example. If you want to optimize your page for different devices and screens, I suggest you make yourself familiar with responsive webdesign.
Something like height: 100vh; would make the object's height 100 percent of the viewport height. It seems like there is no way around switching from px to something else.
I am trying to fix the web layout of my web page such that it does not resize or rearrange .
for example , check the page at http://www.boutell.com/newfaq/creating/fixedwidthlayout.html
. On my browser(chrome), when i resize the window along x-axis, the text rearranges to accomodate within viewable area.
On the other hand, http://msdn.microsoft.com/en-us/library/ie/dn255008(v=vs.85).aspx
when i resize the window along x-axis, the text does not rearrange to accomodate itself. I need my web page to NOT rearrange as in the latter case. Not able to isolate the attribute which controls this. I tried position:absolute in the body tag. No luck
You have a fluid layout. All your columns have their width set in percents. So, when the browser size changes, the columns's width changes too. Lets say one of your container has a width of 15%. When the browser window width is 2000px, this container's size will be counted as 15% from 2000px = 300px; on the other device, where width is 1200px, it will be 180px.
The fastest way to fix it to change width to px;
Another way is to set min-width property, - then the container can
act as a fluid, but at some point it won't go smaller. For example:
.columnt {
width: 15%;
min-width: 200px;
}
Hope you get the idea.
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.
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.
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.