Fixed body size html

how to set a html website to a fixed size so when zooming it wont change size

I am making a website just for fun and I need it to be set on a fixed size so when you zoom in, images won’t move and info won’t get squished on the page.

Zooming in should not change the layout at all or «squish» anything. It just makes everything bigger. Anyway, you should not prevent zooming, even if you could. It’s the user’s choice. Why would you want to prevent someone with poor eyesight from zooming in so they could see your site?

Then how could i have everything stay put but be able to zoom in and scroll side to side when zoomed in? Right now my page when i zoom everything gets bigger making it all squished in a way. So how could i make everything stay put, add a ‘position: fixed;’ to all of my contents?

Could you please provide a link to a website on which zooming (ctrl-scroll, or ctrl-plus, ctrl-minus) messes up the layout?

5 Answers 5

All else being equal, zooming will not affect the layout.

What zoom does is to change the effective browser window resolution. For instance, if your window is currently 1024 x 800, and you zoom out to 200%, the window becomes effectively 512 x 400 (you can test this by examining window.innerHeight in your console). If you have media queries, or are listening to resize events, they will be triggered just as if user resized his browser window. Depending on the result, of course the layout may change, possibly in undesirable ways.

To put it another way, zooming a 1024 x 800 browser window to 200% should cause no layout changes other than those that you would see if you physically resized your browser window to 512 x 400.

Even if you could detect the zoom level, from a user experience perspective you should not interfere with or override the user’s choice to zoom.

Having said that, there are various ways to try to detect zoom level, such as window.devicePixelRatio . However, there is no way to trap this. You can find other approaches if you google for «detect browser zoom». However, this is a slippery slope. You are better off designing your app so it works well at different resolutions, and then let the user zoom as they please.

Note that window.screen reports physical screen dimensions unaffected by zooming. So window.screen.height is always the physical height of the screen (not browser window). It’s unlikely that you can do anything useful with this information anyway.

Источник

how to fit the webpage exactly the screen size without scrolling?

I am new to css and I am finding some difficulty in setting my webpage to fit exactly the screen size but it doesn’t fit and a scroll bar occurs. I have tried all the ways mentioned here But none of them works. My web page looks more or less like this. When i used

6 Answers 6

vh stands for View Height and so 97vh is 97% the View/Browser’s height.

For some reason 100vh makes it scroll a little.

This is not an appropriate solution. You shouldn’t have to settle for setting the height to 95vh ; you need to figure out what is causing the extra scrolling and fix that.

height: 100vh is not good idea to give it full screen.

Try min-height: 100%

You can fix this problem by changing both height and width to 100%. In your code, you have written height as 100vh.

after changing them both to 100% you might still be able to scroll but you can fix that by adding this:

In general for fixing this type of problem for any project this setup I think will always work:

If you want to completely disable the scroll then you can replace your styles with only this

You’re almost there. Target both html and body and set both their width and height to 100% .

yes that’s another issue , if the view port size become less(more like mob version) the size fits in. But when the view port size increases to normal laptop size the scroll bar occurs

@NaveenKumar so what exactly are you trying to do? The code I posted will set the html/body element to fill the entire available area. If you want to fit your content that’s an entirely different question. If you don’t want a scrollbar use overflow: hidden; or, set max-width: 100%; on whatever your containing element is so it can never extend past the available space.

I am sorry for confusing , I want my content to fit in screen totally (without scroll bar), If i use overflow hidden and max-width:100%. Scroll bar disappears and some of my content also goes below the view port and not visible.

Источник

How to make the web page height to fit screen height

A quick, non-elegant but working standalone solution with inline CSS and no jQuery requirements. AFAIK it works from IE9 too.

Fixed positioning will do what you need:

As another guy described here, all you need to do is add

to the style of whatever you need to fill the screen

Don’t give exact heights, but relative ones, adding up to 100%. For example:

Where does the absolute height come from. 100% of 0 is 0. How do you tell it what 100% is to begin with?

100% is the full (current) size of the viewport. So you don’t tell it, the browser actually determines the value of 100% by itself.

(77% and 22% roughly preserves the proportions of content and footer and should not cause scrolling)

you can use css to set the body tag to these settings:

using this, replace your class «home» with your own

(function ($) < $(function()); $(window).resize(function()< $('.home').css(); >); >); >)(jQuery); 

Make sure you override the original styling by adding important.

I’ve used a CSS solution that has proved flexible.

You need choose one element to be the one that is full height. It also needs to be a parent to every content block. This can be the element or anywhere in the DOM.

Additionally, you must designate one child to grow to make up whatever space is needed to stretch to fill the screen.

.content-parent < min-height: 100vh; /* Forces to always fill the screen vertically. */ min-height: -webkit-fill-available; /* . except on mobile, when you want to stay within the chrome */ display: flex; /* Enable content to stretch. */ flex-direction: column; /* . vertically */ >.filler-child < flex-grow: 1; /* Designates this element to stretch to fill */ >

Linked

Related

Hot Network Questions

Subscribe to RSS

To subscribe to this RSS feed, copy and paste this URL into your RSS reader.

Site design / logo © 2023 Stack Exchange Inc; user contributions licensed under CC BY-SA . rev 2023.7.24.43543

By clicking “Accept all cookies”, you agree Stack Exchange can store cookies on your device and disclose information in accordance with our Cookie Policy.

Источник

Stretching body to full viewport height: the missing way

Suppose you’re making a sticky footer or centering some content relative to the viewport. You want to stretch the body element to the full height of the browser viewport while also letting it grow even further to match its content. This task was surely solved a bazillion times, and it should be as easy as pie. Right? Right?

The state-of-the-art way

Sure! Applying min-height: 100vh to the body element should do the trick. Here, 100vh means that the initial body height will take 100% of the viewport height, whereas the use of min-height instead of height will let the body element grow even more if necessary. Isn’t it exactly what we need? Well. Almost. If we open such a page in a typical mobile browser (such as iOS Safari or Android Chrome), it will be scrollable regardless of the size of its content. Even if the page has no content at all, its bottom will still disappear beneath the bottom UI panel of the browser! The reason for this is fairly simple. UI elements in these browsers shrink after the scroll, providing additional space for the actual content. A height of 100vh corresponds to the maximum possible viewport height. Since the initial viewport height is smaller, the body element with a min-height of 100vh initially exceeds the viewport height regardless of its content. The known fix for this issue looks like this:

html  height: -webkit-fill-available; /* We have to fix html height */ > body  min-height: 100vh; min-height: -webkit-fill-available; > 

This solution has a minor glitch in Chrome: when the browser height increases, the body height stays the same, getting out of sync with the viewport height. Aside from that, this approach solves the issue. However, we now have to fix the html height. If that’s the case, shouldn’t we use an older, more robust solution?

The old-school way

Since we couldn’t avoid fixing the html height, let’s try the good old way that involves passing a height of 100% from the html element. Let’s apply min-height: 100% to the body element, where 100% is the full height of its parent (namely, html ). A percentage height on a child requires its parent to have a fixed height, so we have to apply height: 100% to the html element, thereby fixing its height to the full viewport height. Since the percentage height of the html element in mobile browsers is calculated relative to the minimal viewport height, the above-mentioned scroll issue doesn’t bug us anymore!

html  height: 100%; /* We still have to fix html height */ > body  min-height: 100%; > 

This solution is not as pretty as the 100vh one, but it’s been used since time immemorial, and it will work, that’s for sure! Well. Not quite. Apparently, the gradient applied to such a body element will be cut at the html height (in other words, at the viewport height, or, to be more precise, at the minimal viewport height). It happens because of the fixed html height, and it doesn’t matter whether it’s height: 100% or height: -webkit-fill-available . Of course, this can be «fixed» by applying the gradient to the body content, but that’s just not right. The page background should be applied to the body element, and the html element should stretch to its content. Can we achieve that?

The missing way

I suggest another way of stretching the body element to the full viewport height without the above-mentioned issues. The core idea is to use flexbox, which enables a child element to stretch even to a parent with non-fixed dimensions while retaining the ability to grow further. First, we apply min-height: 100% to the html element to stretch it to the full minimal viewport height. Then we use display: flex and flex-direction: column to turn it into a flex-container with a vertical main axis. Finally, we apply flex-grow: 1 to the body element, thereby stretching it to the html height. The align-self property of the body element implicitly has the stretch value, so the body width already matches the html width.

html  min-height: 100%; /* Look, it's not fixed anymore! */ display: flex; flex-direction: column; > body  flex-grow: 1; > 

Now both html and body can stretch to their content, and, since we’re using the percentage height, there are no issues with mobile browsers whatsoever. Neat!

Notes

• It should be obvious that the flexbox-based solution works for any depth. It can easily be used in cases where the content is being rendered to an element inside the body , and not the body element itself. It’s a typical scenario with React or Vue, for example.
• As you might’ve noticed, the direction of the main axis of the flex-container shouldn’t matter. I just think that the vertical axis is more elegant in this case, and I didn’t really test the other variant. I don’t see how it can possibly break, but who knows.
• The flexbox-based solution doesn’t work in IE. Not at all. But you don’t support it anyway, do you?

Источник