How to get the size of the viewport in CSS?

Question

I have an HTML div-container that should contain div-containers that are all as big as the browserwindow so for instance when my browser window is 200px high and 100px wide every container should be 200px high and 100px wide. This is the parent container that contains all of the children-containers:

.largest_parent_container {
  width: 100%;
  position: absolute;
}

This is my current style for the child containers:

.children_container {
  height: 100%;//doesnt work because it takes the height of the absolute parent container.
  width: 100%;
  position: absolute;
}

So I hope you understand my problem.

I would be really happy if you could help me.

Have a nice day.

Use `vh` and `vw` units (viewport height and viewport width, respectively) instead of `%`. — Dai, Oct 23 '20 at 16:49

score 2 · Accepted Answer · answered Oct 23 '20 at 16:49

2

Consider using viewports. In CSS, viewports are specified as vw or vh (viewport width and viewport height respectively).

So, If you wanted something to be the height of the browser window, you would say height: 100vh, which effectively means 100% of the viewport height.

answered Oct 23 '20 at 16:49

Victor Hung

93
6

Thank you so much. I feel really dumb right now. – ungarmichael Oct 23 '20 at 16:52
Haha no worries. Consider selecting this as the accepted answer if you're happy with it so other folks looking can find it easier! – Victor Hung Oct 23 '20 at 17:04

How to get the size of the viewport in CSS?

1 Answers1