There are multiple ways to use CSS properties, we can make a div full screen horizontally and vertically.
10 Answers 10 Sorted by:
Trending sort is based off of the default sorting method — by highest score — but it boosts votes that have happened recently, helping to surface more up-to-date answers.
It falls back to sorting by highest score if no posts are trending. 232
It works like this:
More info also available through Mozilla Developer Network and W3C.
Adding to @Hendrik Eichler Answer, the n vh uses n% of the viewports initial containing block.
Also, the viewport height is for devices of any resolution, the view port height, width is one of the best ways (similar to css design using % values but basing it on the devices view port height and width)
You actually dont need the screen resolution, what you want is the browsers dimensions because in many cases the the browser is windowed, and even in maximized size the browser wont take 100% of the screen.
what you want is View-port-height and View-port-width:
this will render a div with 50% of the inner browsers height and 25% of its width.
(to be honest this answer was part of what @Hendrik_Eichler wanted to say, but he only gave a link and didnt address the issue directly)
It is not possible to get the height of the screen from CSS. However, using since CSS3 you can use media queries to control the display of the template as per the resolution.
If you want to code on the basis of height using media queries, you can define style-sheet and call it like this.
You can bind the current height and width of the screen to css variables: var(--screen-x) and var(--screen-y) with this javascript:
This was directly adapted from lea verous example in her talk on css variables here: https://leaverou.github.io/css-variables/#slide31
You can get the window height quite easily in pure CSS, using the units “vh”, each corresponding to 1% of the window height. On the example below, lets begin to centralize block.foo by adding a margin-top half the size of the screen.
But that only works for window size. With a dab of javascript, you could make it more versatile.
That code will create a CSS variable named “–windowHeight” that carries the height of the window. To use it, just add the rule:
And why is it more versatile than simply using “vh” units? Because you can get the height of any element. Now if you want to centralize a block.foo in any container.bar, you could:
And finally, for it to respond to changes on the window size, you could use (in this example, the container is 50% the window height):
In order to get screen resolution you can also use jquery. This link help you very much to resolve.
To get the screen resolution you need to use Javascript instead of CSS: Use screen.height for height and screen.width for width.
I had this issue, but using some JavaScript worked:
Full example:
Use height and width in percentage.
For example:
Thanks for contributing an answer to Stack Overflow!
To learn more, see our tips on writing great answers. Draft saved Draft discarded
Tutorials
Learn how to get the current screen size/browser window with JavaScript.
Use window.innerWidth and window.innerHeight to get the current screen size of a page.
This example displays the browser windows height and width (NOT including toolbars/scrollbars):
height:100%
Before setting the height property to 100% inside the .box class, make sure to add it to both HTML and body tags as well, otherwise, it won’t work.
This is because, when you set the height to 100% to an element, it will try to stretch to its parent element height.
FAQ
How do I get the screen size in CSS?
How do I get the width of the screen in SCSS?
How do I get browser window height in CSS?
- Step 1: Define a function in SCSS and generate the precise viewport width values to acquire the window width @function get-vw($target) { $vw-context: (1000*.01) * 1px; @return ($target/$vw-context) * 1vw; }
- Step 2: Pass in a value in pixels to this function and store it in an SCSS variable. $window-width: get-vw(72px);
