1. 首頁
  2. 問答
  3. div全屏（寬度和高度）html/css？

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

2015-10-14 221 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

相關問題

 相關問題