CSS get height of screen resolution

user_1520646 0
Viewed 275841

I'm having a hard time getting the height of lower screen resolution because my screen resolution is 1920x1080.

Does anyone know how to get height and width of the screen resolution?

I checked my work on a 1024x768 resolution and it is rendered all messed up.

css
10 Answers

Adding to @Hendrik Eichler Answer, the n vh uses n% of the viewport's initial containing block.

.element{
    height: 50vh; /* Would mean 50% of Viewport height */
    width:  75vw; /* Would mean 75% of Viewport width*/
}

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 device's view port height and width)

vh
Equal to 1% of the height of the viewport's initial containing block.

vw
Equal to 1% of the width of the viewport's initial containing block.

vi
Equal to 1% of the size of the initial containing block, in the direction of the root element’s inline axis.

vb
Equal to 1% of the size of the initial containing block, in the direction of the root element’s block axis.

vmin
Equal to the smaller of vw and vh.

vmax
Equal to the larger of vw and vh.

Ref: https://developer.mozilla.org/en-US/docs/Web/CSS/length#Viewport-percentage_lengths

user_19044790

I had this issue, but using some JavaScript worked:

var s = document.createElement("style");
document.body.append(s);
window.onresize = function() {
    s.innerHTML = ":root{--win-width:" + window.innerWidth + "px;--win-height:" + window.innerHeight + "px}";
}
s.innerHTML = ":root{--win-width:" + window.innerWidth + "px;--win-height:" + window.innerHeight + "px}";

Full example:

var s = document.createElement("style");
document.body.append(s);
window.onresize = function() {
  s.innerHTML = ":root{--win-width:" + window.innerWidth + "px;--win-height:" + window.innerHeight + "px}";
}
s.innerHTML = ":root{--win-width:" + window.innerWidth + "px;--win-height:" + window.innerHeight + "px}";
.window-size {
  width: var(--win-width);
  height: var(--win-height);
  background: #00f;
}
<div class="window-size">This will always be this size of the window.</div>
<p style="font-size: 100px; white-space: nowrap">this is here for an overflow....................................................................................................................................................................</p><p style="font-size: 100px; white-space: nowrap">this is here for an overflow....................................................................................................................................................................</p><p style="font-size: 100px; white-space: nowrap">this is here for an overflow....................................................................................................................................................................</p><p style="font-size: 100px; white-space: nowrap">this is here for an overflow....................................................................................................................................................................</p><p style="font-size: 100px; white-space: nowrap">this is here for an overflow....................................................................................................................................................................</p><p style="font-size: 100px; white-space: nowrap">this is here for an overflow....................................................................................................................................................................</p><p style="font-size: 100px; white-space: nowrap">this is here for an overflow....................................................................................................................................................................</p><p style="font-size: 100px; white-space: nowrap">this is here for an overflow....................................................................................................................................................................</p><p style="font-size: 100px; white-space: nowrap">this is here for an overflow....................................................................................................................................................................</p><p style="font-size: 100px; white-space: nowrap">this is here for an overflow....................................................................................................................................................................</p><p style="font-size: 100px; white-space: nowrap">this is here for an overflow....................................................................................................................................................................</p><p style="font-size: 100px; white-space: nowrap">this is here for an overflow....................................................................................................................................................................</p><p style="font-size: 100px; white-space: nowrap">this is here for an overflow....................................................................................................................................................................</p><p style="font-size: 100px; white-space: nowrap">this is here for an overflow....................................................................................................................................................................</p><p style="font-size: 100px; white-space: nowrap">this is here for an overflow....................................................................................................................................................................</p>

user_188963530
Related