Get screen width in CSS?

Question

I know in JS there is screen.width but I'm wondering if I can do this with pure CSS...

<style>
.screen {width:100%; height: 100%;}
.red {background: pink; float: left;}
.blue {background: lightblue; float: left;}
.green {background: lightgreen; float: left;}
.row {height: 100%; clear:both;}
body {margin: 0;}
</style>


<body>
<div class="row">
    <div class="screen red">foo</div>
    <div class="screen blue">foo</div>
    <div class="screen green">foo</div>
</div>
<div class="row">
    <div class="screen red">foo</div>
    <div class="screen blue">foo</div>
    <div class="screen green">foo</div>
</div>
</body>

What I want is: Each .screen is the size of my browser viewport, and I have two rows of three .screens each. So I can scroll horizontally 3X the width of my viewport and I can scroll vertically 2X the height of my viewport.

What I get with this code is: All the DIVs are sized to my viewport, but are just stacked vertically.

I think you meant 'scroll vertically 2X the height', not the width. — stuartd
– stuartd, Commented Dec 28, 2013 at 1:09

bob · Accepted Answer · 2013-12-28 01:08:51Z

2

Probly not exactly what you are wanting but if you put .row at 300% width and .screen at 33.333% width it will behave something like that.

answered Dec 28, 2013 at 1:08

bob

211 bronze badge

Sign up to request clarification or add additional context in comments.

1 Comment

Dagg Nabbit Over a year ago

+1, sounds right to me (was just writing the same thing). jsfiddle.net/6M5sA

sheriffderek · Accepted Answer · 2013-12-28 01:28:59Z

For width, you just make the html, body or .some-element - 200% 300% width. The browser knows how wide it is inherently. To deal with the browser height though, you have to tell the html and body to be 100% height, otherwise elements within will have no reference to what 100% is. Tricky issue in general.

Here is a fiddle

HTML

<div id="content1" class="block">
    <h2>block 01</h2>
</div>
<div id="content2" class="block">
    <h2>block 02</h2>
</div>
<div id="content3" class="block">
    <h2>block 03</h2>
</div>

<div id="content4" class="block">
    <h2>block 04</h2>
</div>
<div id="content5" class="block">
    <h2>block 05</h2>
</div>
<div id="content6" class="block">
    <h2>block 06</h2>
</div>


<nav class="global-nav">
    <a href="#content1">01</a>
    <a href="#content2">02</a>
    <a href="#content3">03</a>
    <a href="#content4">04</a>
    <a href="#content5">05</a>
    <a href="#content6">06</a>
</nav>

CSS / SASS

* { /* get a natural box model going */
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box;
    margin: 0; /* hard reset */
}

html, body {
  height: 100%; /* key */
}

html {
    width: 300%;
    /* overflow: hidden; */
    /*This would hide the scroll bars but I'm leaving them for you to see */
}

.block {
     min-height: 100%;
     height: auto !important; /*min-height hack*/
     height: 100%;            /*min-height hack*/

     width: 33.333333%;
     /* width: (1/3)*100%; */  /* SASS division to be quick*/
     float: left;
     border: 1px solid red;
}

.global-nav {
    position: fixed;
    bottom: 0;
    left: 0;
}

.global-nav a {
    display: block;
    color: black;
}

Collectives™ on Stack Overflow

Get screen width in CSS?

2 Answers 2

1 Comment

HTML

CSS / SASS

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

HTML

CSS / SASS

Comments

Related