1. 首页
  2. 问答
  3. div全屏（宽度和高度）html/css？

div全屏（宽度和高度）html/css？

2015-10-14 182 views
0

我是新来的HTML/CSS的东西，让我们开始谈谈。div全屏（宽度和高度）html/css？

即使在调整浏览器大小或使用智能手机/平板电脑打开网站时，我想创建一个全屏（宽度和高度）的网站。我有2个div（让我们只说“顶部”和“底部”），我只想要获得全屏宽度和高度的“顶部”。

<html> 
<head></head 
<body> 

<div class="top"> 
    <div>content 1</div> 
    <div>content 2</div> 
    <div>content 3</div> 
</div> 

<div class="bottom"> 
    <div>another content</div> 
    <div>another content</div> 
    <div>another content</div> 
    <div>another content</div> 
</div> 
</body> 
</html>

或与此http://scripteden.com/previews/Clean/

对不起类似我的英文不好东西..

来源

2015-10-14 stingWhite

回答

0

使用swiper，工作代码：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>Swiper demo</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"> 

    <!-- Link Swiper's CSS --> 
    <link rel="stylesheet" href="http://www.idangero.us/swiper/dist/css/swiper.min.css"> 

    <!-- Demo styles --> 
    <style> 
    html, body { 
     position: relative; 
     height: 100%; 
    } 
    body { 
     background: #eee; 
     font-family: Helvetica Neue, Helvetica, Arial, sans-serif; 
     font-size: 14px; 
     color:#000; 
     margin: 0; 
     padding: 0; 
    } 
    .swiper-container { 
     width: 100%; 
     height: 100%; 
    } 
    .swiper-slide { 
     text-align: center; 
     font-size: 18px; 
     background: #fff; 
     /* Center slide text vertically */ 
     display: -webkit-box; 
     display: -ms-flexbox; 
     display: -webkit-flex; 
     display: flex; 
     -webkit-box-pack: center; 
     -ms-flex-pack: center; 
     -webkit-justify-content: center; 
     justify-content: center; 
     -webkit-box-align: center; 
     -ms-flex-align: center; 
     -webkit-align-items: center; 
     align-items: center; 
    } 

    .swiper-slide{ 
     display: block; 
    } 
    .top>div{ 
     display: block; 
    } 

    </style> 
</head> 
<body> 
    <!-- Swiper --> 
    <div class="swiper-container"> 
     <div class="swiper-wrapper"> 
      <div class="swiper-slide top"> 
       <div>content 1</div> 
       <div>content 2</div> 
       <div>content 3</div> 
      </div> 
      <div class="swiper-slide bottom"> 
       <div>another content</div> 
       <div>another content</div> 
       <div>another content</div> 
       <div>another content</div> 
      </div> 
     </div> 
     <!-- Add Pagination --> 
     <div class="swiper-pagination"></div> 
    </div> 

    <!-- Swiper JS --> 
    <script src="http://www.idangero.us/swiper/dist/js/swiper.min.js"></script> 

    <!-- Initialize Swiper --> 
    <script> 
    var swiper = new Swiper('.swiper-container', { 
     pagination: '.swiper-pagination', 
     paginationClickable: true, 
     direction: 'vertical', 
     setWrapperSize:true  // this will set slide wrap div full screen, and you can override flex layout 
    }); 
    </script> 
</body> 
</html>

提琴手这里：（http://jsfiddle.net/futurist/dztabt3v/）

更新1

如果你只想使用手机/平板电脑，不想支持老浏览器，可以使用添加flex-direction: column/row;到.swiper-slide来保持内部div的垂直/水平对齐，并设置setWrapperSize:false以获得更好的性能。

提琴手这里：（http://jsfiddle.net/futurist/nbvr1uLb/1）

更新2

如果你想滚动底部，只需设置底部内的div容器，并给CSS：overflow:scroll;

提琴手这里：（ http://jsfiddle.net/futurist/nbvr1uLb/2/）

来源

2015-10-14 02:55:07

+0

爱它！但我还有1个问题，因为我在底部有很多东西，需要滚动它才能看到内容，我可以使用鼠标滚动查看其余内容吗？ – stingWhite

+0

请参阅更新2 –

+0

对不起，回复晚了，我的自己被抓到了作品.. 这是非常好的：D 和一个更多的问题，我可以改变点，例如，一个导航栏？ – stingWhite

相关问题

 相关问题