Check out our Angular Book Series.

Can I use CSS calc() with vw and pixels?

I was working on a problem today where we wanted to offset the position of an ng material sidenav. The problem was we didn't know what we would want the offset to be, it would depend on the browser size on the clients computer which will most likely be variable.

I suggested using calc() with vw, subtracting the width of our flyover, dividing it by 2, and then using that to set the margin. Surprisingly this worked swimmingly, because I felt like I pulled that idea out of nowhere.

First of, what is vw? It stands for view width and references the width of the viewport. It's brother is vh, which stands for view height but isn't relevant to today's problem.

What is calc()? It is a CSS construct that allows us to make calculations at runtime.

Let's start with some simple HTML:


<html lang="en">
<body>
<div class="maindiv">
<h1>Hello You!</h1>
</div>
</body>
</html>

There is an HTML, a body, a div, and some content inside the div. First, I'm going to expand the HTML and body the full height and width of the available viewport:


html, body {
height: 100vh;
width: 100vw;
background-color: grey;
margin: 0;
}

Do this with CSS, of course.

Now, let's look at the maindiv. I'm going to size it to 50% width, and 100vh height:


.maindiv {
height: 100vh;
width: 50%;
background-color: white;
display: inline-block;
}

I also gave it a background color of white, to offset it from the background of the full app, and the display is inline-block which means it will accept layout cues from the parent, in this case the body tag.

In order to get the item to center, we'll use calc() with the margin:


margin-left: calc((100vw - 50%)/2);

The calc takes the full 100vw and subtracts 50%, the same width of the maindiv. Then it divides that number in half. The resulting value--calculated at runtime--essentially centers the maindiv on the page:

Play with the same here.

I feel a slight tinge of success when off the cuff ideas like this work elegantly.

Comments (Comment Moderation is enabled. Your comment will not appear until approved.)
All Content Copyright 2005, 2006, 2007, 2008, 2009 Jeffry Houser. May not be reused without permission
BlogCFC was created by Raymond Camden. This blog is running version 5.9.2.002.