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.
Related
I have an Angular Material table where I want the header and footer to be sticky and the content to scroll. To do this I simply need to put the table in a container, set the height to a certain amount of pixels, then set the overflow to auto. This works as intended. I just need something like this to work for multiple resolutions. If I set my div to 600px it looks great on my computer but someone else would see a double scroll bar.
As mentioned if I set the height to a fixed amount of pixels that works great (eg: height: 600px). I've tried using the calc function(eg: height: calc(100%-200px)) but that doesn't seem to work, the table just takes up all the room.
I have done a bunch of media queries at 10px intervals and set the fixed height in each one. This works but seems like a terrible solution.
I feel like there has to be a way to set a fixed container to have a height that is the screen height minus a certain amount of pixels (to account for the header and some white space at the bottom).
Use vh rather then %
height: calc(100vh-200px)
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'm trying to build a site with an initial 'landing page' look that you'd then scroll down from to see the rest of the content.
I can easily create a div that will fit the screen on the device I'm currently using, but how can I code for other devices of different screen sizes?
I've tried using '100%' which of course works initially but then continues to fill the screen when you scroll. I've tried defining a specific aspect ratio but again, that will only work for the screen I'm working on.
To be clear, I want the div, or img to fill the screen when a user first lands, then when the user scrolls the div/img should move up with the rest of the page.
I want to achieve this using only HTML or CSS.
Thanks in advance for any tips!
You can use vw and vh on the first <div> to fill the viewport. You can use this for reference: https://developer.mozilla.org/en/docs/Web/CSS/length
This'll do the trick:
.full-page-container {
width: 100vw;
height: 100vh;
}
vw and vh units represent a percentage of the viewport size. Hence 100vh will mean 100% of the viewport height and won't be affected by scrolling.
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.
If I have an image combined with a style:
<img class="test" src="testimage.jpg" />
img.test { width: 50%;}
The image resizes to 50% the width of the box containing it, as well as resizing vertically, maintaining the aspect ratio.
This seems to require the enclosing DIV to be set to a particular width and height value. But if you want the enclosing DIV to resize automatically as the browser is dragged smaller or larger, wouldn't this be a problem?
I've clarified my answer to your original question. Go take a look and see if it clears things up. More or less, if you want the image to resize with the window you can't set the DIV to a fixed width and height. The DIV must have a % width and height also.
You'll need to manually specify the width and height properties to get the image to keep its dimensions. This wouldn't be too difficult if you're using server-side coding (PHP/ASP).
Another way to do it would be to use JavaScript to calculate and resize the image dynamically.
No, the image will still be 50% of the div, and if the div is a proportion of the page, that doesn't matter.
Its all proportions: The enclosing div might be 2/3 of the whole window, and the image will wil 1/2 of that. It all gets calculated before its displayed, just a bunch of number crunching. ;D