Question

我在JS中知道有screen.width，但我想知道我是否可以用纯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>

我想要的是：每个.screen都是浏览器视口的大小，我有两行，每行.screen个。所以我可以水平滚动3倍视口的宽度，我可以垂直滚动2倍视口的高度。

我对此代码的了解是：所有DIV的大小均为我的视口，但只是垂直堆叠。

Answer 1

可能不完全不是你想要的，但是如果你把.row放在300％的宽度和.screen的宽度为33.333％那么它会表现得像那样。

Answer 2

对于宽度，你只需要制作html，body或.some-element - 200％300％宽度。浏览器知道它本身有多宽。但是要处理浏览器高度，你必须告诉html和body是100％高度，否则其中的元素将没有100％的参考。棘手的问题一般。

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;
}

获取CSS中的屏幕宽度？

2 个答案:

HTML

CSS / SASS