Div Height And Such

Get screen width and calculate max value

I have code like the below where I want to calculate and assign values for the font-size / height properties. In this I want to set the value of a property (say max-height ) based on the maximum of available screen height and a calculated value (lets assume like the calculation done for the height property). Is there any way to do this in LESS? I tried with the max function but it doesn’t seem to work. Also, for assigning px/em etc to the value, in one of the threads it is mentioned that it can be done using 0em + variable value. But is there a better looking way to do this? I tried like the second way shown in the below code but it is not working. The usecase mentioned here might sound silly but the actual cases are different and I have mentioned it this way only for simplicity.

.def(@fSize)< @defHeight: 100px; // Need this to be screen width font-size: 0em + @fSize; line-height: 0px + (1.5*@fSize); height: 0px + (15*@fSize); // Works fine //height: ~"15*@px"; // Just prints 15*1px max-height: max(@defHeight, @fSize) // doesn't work > div#demo

Speaking of numbers and units. There’s unit function for manipulating number units. But for this specific snippet using «arithmetic ops unit propagation» is probably more elegant. Although, in this particular case, for a bit more readable (semantically) code you should use multiplication instead of addition , i.e.: font-size: 1em * @fSize; , height: 15px * @fSize; etc. ( @fSize is just a scale and the scale is just the arithmetic multiply).

Источник

Css: How to get screen height in css?

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) Ref: https://developer.mozilla.org/en-US/docs/Web/CSS/length#Viewport-percentage_lengths Solution 3: You actually don’t need the screen resolution, what you want is the browser’s dimensions because in many cases the the browser is windowed, and even in maximized size the browser won’t take 100% of the screen. Solution 1: You can’t «get» the viewport height as such, in the way that you can with JS to store it in a variable, but you can use it in to change the height of elements.

Css: How to get screen height in css?

In the above code, i use height atrribute in 93%. But this varies depends on screen. How can i get screen height in css?

You can’t «get» the viewport height as such, in the way that you can with JS to store it in a variable, but you can use it in calc() to change the height of elements. For example, height: calc( 100vh — 50px ); which would equate to «the window height less 50px».

In this case I suggest you to use vh (hundreds of viewport height): If you set height: 100vh; it would take 100% height of each screen.

You need to use javascript to get screen’s information.

It is not possible using CSS, however you can control the page design using media queries.

Or, you can get the screen height by using screen.height and width by using screen.width . [ They are JS properties ]

Here is a basic JS code of doing this:

console.log("Width: "+screen.width+": Height: "+screen.height);

Css: How to get screen height in css?, It is not possible using CSS, however you can control the page design using media queries. Or, you can get the screen height by using screen.height and width by using screen.width. [ They are JS properties] Here is a basic JS code of doing this: console.log («Width: «+screen.width+»: Height: «+screen.height); Share.

Viewport height and .css()

What I’m trying to achieve is to get the browser’s viewport height and add it to several classes of my css. So far I have this:

var width = $(window).width(); var height = $(window).height(); 

$('divOne').css(); $('divTwo').css(); $('divThree').css(); $('divTwo').css(); 

It would be really great if someone could provide some working piece of code here. My coding skills are very limited.

Your code looks about right to me, except you have to do the math outside of the string literals, and because you’re using classes, you need a class selector (e.g., «.divOne» , not «divOne»), e.g.:

var width = $(window).width(); var height = $(window).height(); $('.divOne').css(); $('.divTwo').css(); $('.divThree').css(); $('.divTwo').css(); 

You probably also want to give divs two through four height, because otherwise they’ll only be as tall as their content. And you need to be certain that the script operating on the divs is after the divs in the markup, so that they exist when the code runs. (Or use jQuery’s ready event, but there’s no need for that if you control where the script tags go.)

Here’s an example that adds heights, etc.: Live Copy | Live Source

Try that. Remember the . Before divOne

Is that what you’re asking for?

var height = $(window).height(); $('.divOne').css(); $('.divTwo').css(); $('.divTwo').css(); $('.divThree').css(); $('.divTwo').css(); 

Choose whichever suits you the best. I suggest pure JavaScript with variables.

// NO VARIABLES // pure JavaScript document.getElementById("divOne").style.height = document.documentElement.clientHeight; document.getElementById("divOne").style.height = document.documentElement.clientHeight; document.getElementById("divOne").style.height = parseFloat(document.documentElement.clientHeight) + 200 + "px"; document.getElementById("divOne").style.height = parseFloat(document.documentElement.clientHeight) + 400 + "px"; // jQuery $("#divOne").style.height = $(window).height(); $("#divTwo").style.height = $(window).height(); $("#divThree").style.height = parseFloat($(window).height()) + 200 + "px"; $("#divFour").style.height = parseFloat($(window).height()) + 200 + "px"; // WITH VARIBLES // pure JavaScript  

.root < display: flex; flex-direction: column; height: 100%; >.header < width: 100%; background-color: red; display: flex; height: 100px; justify-content: space-between; .logo-pane < width: 100px; height: 100px; background-color: green; >.user-actions < width: 100px; height: 100px; background-color: blue; >> .content

body, html < margin:0; padding:0; >.root < display: flex; flex-direction: column; height: 100vh; align-items:stretch; align-content:stretch; >.header < width: 100%; background-color: red; display: flex; height: 100px; justify-content: space-between; >.logo-pane < width: 100px; height: 100px; background-color: green; >.user-actions < width: 100px; height: 100px; background-color: blue; >.content

.log(window.innerHeight); // or console.log(self.innerHeight); // will log the height of the frame viewport within the frameset console.log(parent.innerHeight); // will log the height of the viewport of the closest frameset console.log(top.innerHeight); // will log the height of the viewport of the outermost frameset 

To change the size of a window, see window.resizeBy() and window.resizeTo() .

To get the outer height of a window, i.e. the height of the whole browser window, see window.outerHeight .

Graphical example

The following figure shows the difference between outerHeight and innerHeight .

Demo

HTML

p>Resize the browser window to fire the code>resizecode> event.p> p>Window height: span id="height">span>p> p>Window width: span id="width">span>p> 

JavaScript

const heightOutput = document.querySelector("#height"); const widthOutput = document.querySelector("#width"); function updateSize()  heightOutput.textContent = window.innerHeight; widthOutput.textContent = window.innerWidth; > updateSize(); window.addEventListener("resize", updateSize); 

Result

Specifications

Источник