CSS全屏网站页面

我正在尝试制作一个全屏网站，右侧有全屏图像，左侧有一个垂直菜单和徽标。CSS全屏网站页面

，我设法到目前为止构建的HTML & CSS代码是这样的，但我不知道如何使整个网站是全屏：

HTML

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>ella - Organizator de evenimente</title> 

<link rel="stylesheet" type="text/css" href="css/style.css" /> 

</style> 
</head> 

<body> 
<div id="page"> 

     <header> 
     <img src="imagini/logo.jpg" width="150" height="150" alt="logo ella organizator de evenimente"> 
     </header> 

     <nav> 
      <ul> 
      <li><a href="#">Despre</a></li> 
      <li><a href="#">Servicii</a></li> 
      <li><a href="#">Galerie</a></li> 
      <li><a href="#">Blog</a></li> 
      <li><a href="#">Contact</a></li> 
      </ul> 
     </nav> 

     <footer> 
      <a href="#"><img class="social" src="imagini/Facebook.png" width="32" height="32" alt="poza facebook" ></a> 
      <a href="#"><img class="social" src="imagini/LinkedIn.png" width="32" height="32" alt="poza linkedin"></a> 
      <a href="#"><img class="social" src="imagini/Twitter.png" width="32" height="32" alt="poza twitter"></a> 
      <a href="#"><img class="social" src="imagini/Google+.png" width="32" height="32" alt="poza google+"></a> 
     <p>&copy; 2014 Chițu Ștefan</p> 
     </footer> 

     <aside> 
     <img src="imagini/poza-dreapta.jpg" width="512" height="658" alt="poza dreapta"> 
     <h1>Fericirea autentică nu are vârstă ...</h1> 
     </aside> 

</div> 


</body> 

</html>

CSS

@charset "utf-8"; 
/* CSS Document */ 

html, body { 
    width: 100%; 
    height: 100%; 
    margin: 0px; 
    background-color: #fff; 
} 

#page { 
    position: relative; 
} 
#page header img { 
    float: left; 
    position: absolute; 
    left: 180px; 
    top:68px; 
} 

#page nav { 
    font-size: 21px; 
    font-style: normal; 
    line-height: normal; 
    font-weight: normal; 
    color: #0c0c0c; 
    text-decoration: none; 
    float: left; 
    position: absolute; 
    left: 222px; 
    top: 267px; 
} 

ul 
{ 
    list-style-type:none; 
    margin:0; 
    padding:0; 
    line-height: 1.6em; 
    font-size: 21px; 
} 

ul li a, ul li a:visited { 
    text-decoration: none; 
    color: #0c0c0c; 
} 

ul li a:hover, ul li .current { 
    color: #F00; 
    text-decoration: none; 
} 

aside { 
    margin: 0px; 
    padding: 0px; 
    float: left; 
    position: absolute; 
    left: 700px; 
} 

#page aside img { 
    height: 100%; 
    width: 100%; 
    margin: 0; 
    padding: 0; 

} 

footer { 
    text-align: center; 
    float: left; 
    left: 200px; 
    position: absolute; 
    top: 600px; 
    font-size: 14,6px; 
} 

h1 { 
    float: left; 
    position: absolute; 
    top: 340px; 
    left: 20px; 
    font-size: 34px; 
    color: #0c0c0c; 
    font-weight: 600; 
}

JSFiddle demo

来源

2014-01-22 user3222899

按'F11'！... –

@VedantTerkar你打算告诉你的用户按f11？ - OP - https://developer.mozilla.org/samples/domref/fullscreen.html –

@ Mr.Alien我在开玩笑..我在回答中提到了一个链接。 –

您可以使用此代码

var fullscreen = false;  
var viewFullScreen = document.getElementById("fullscreen"); 
    var exitFullScreen = document.getElementById("roadmap-fullscreen-exit-button"); 
    addFullscreenEventListener(viewFullScreen); 
    addFullscreenEventListener(exitFullScreen); 
     function addFullscreenEventListener(elem){ 
      if (elem) { 
      elem.addEventListener("click", function() { 
       if(fullscreen){ 
       var docElm = document.documentElement; 
       if (docElm.requestFullscreen) { 
        docElm.requestFullscreen(); 
       } 
       else if (docElm.mozRequestFullScreen) { 
        docElm.mozRequestFullScreen(); 
       } 
       else if (docElm.webkitRequestFullScreen) { 
        docElm.webkitRequestFullScreen(); 
       } 
       }else{ 
       if (document.exitFullscreen) { 
        document.exitFullscreen(); 
       } 
       else if (document.mozCancelFullScreen) { 
        document.mozCancelFullScreen(); 
       } 
       else if (document.webkitCancelFullScreen) { 
        document.webkitCancelFullScreen(); 
       } 
       } 
      }, false); 
     } 
     }

HTML

您可以使用下面的锚标记。在点击这将您的网站全屏

<a href="#" id="fullscreen">Fullscreen</a>

来源

2014-01-22 09:53:10

CSS全屏网站页面

回答

相关问题