HTML：顯示與瀏覽器視口一樣大的選擇元素

我的問題是，我如何顯示全屏幕選擇元素（不像F11全屏，但它像佔用整個客戶端瀏覽器屏幕空間）。我必須考慮將要使用我的網站的人（一旦它在.com域中），並且主要的一點是我想要前三個元素（徽標圖形，h1文本和h2文本）填充放第一個空間，直到你向下滾動。你是怎樣做的？HTML：顯示與瀏覽器視口一樣大的選擇元素

我試圖想出一個解決方案，所以我試圖改變填充和邊緣周圍的正確設置，但後來我意識到，它只適用於我的顯示器/設備。有什麼辦法可以讓它針對每個設備？

網站鏈接：http://noclip.ga/1/（我和一個朋友正在爲它不同的設計兩種工作。）

PS：我在菜單幻燈片（左起），將影響解決方案？

PPS：我找不到這篇文章的任何地方，因此，如果你能找到它，只是給我一個鏈接...

編輯：代碼。

https://jsfiddle.net/052Lu6xt/2/

<body> 

    <nav> 
     <ul><center> 
      <li><a href="#">Home</a></li> 
      <li><a href="/about">About Us</a></li> 
      <li><a href="/contact">Contact Us</a></li> 
      <li><a href="/prices">Prices</a></li> 
     </center></ul> 
    </nav> 

    <article> 



    <div id="content"> 
    <center> 
     <img src="img/logo.png" style="width: 256px; height: 256px; margin: 20px 20px 20px 20px;"> 
     <h1 style="padding: 5px 20px 0px 20px;">NØCLIP</h1> 
     <h2 style="padding: 5px 20px 60px 20px;">Web development made easy.</h2> 
     <table class="maintable" style="text-align: center; width: 100%; font-family: Josefin Sans; font-size: 40px; color: #C6C6C6;"> 

<tbody> 
<tr> 
<td>Quick</td> 
<td>Affordable</td> 
<td>Easy</td> 
</tr> 

<tr style="font-family: Arvo; font-size: 32px;"> 
<td>We strive to provide you with a professional product in a timely manner.</td> 
<td>Our services start at as low as $60!</td> 
<td>We make it easy for you by optimizing your workload so you tell us what to do, and we do it.</td> 
</tr> 


</tbody> 
</table> 
    </center> 
    </div> 
    </article> 

</body>

CSS：

@import url(https://fonts.googleapis.com/css?family=Montserrat:700|Arvo|Josefin+Sans:600); 

/* Made By NOCLIP */ 



body { 
    background: rgb(5,6,6); 
    width:100%; 
    margin: auto; 
} 

h1 { 
    font-family: Montserrat; 
    font-size: 64px; 
    text-align: center; 
    color: #fff; 
} 

h2 { 
    font-family: Arvo; 
    font-size: 36px; 
    text-align: center; 
    color: #ececec; 
} 

h3 { 
    display: inline; 
    font-family: Arvo; 
    font-size: 32px; 
    text-align: center; 
    color: #ededed; 
} 

#header { 
    text-align: center; 
    height: 300px; 
    width: 100%; 
} 

.left { 
    height: 100%; 
    width: 10%0; 
} 

.center { 
    height: 100%; 
    width: 100%; 
} 

.textright { 
    height: 100%; 
    width: 100%; 
} 


/* Scrolling Menu */ 


article { 
    position: fixed; 
    width: 70%; 
    left: 0; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    padding: 30px 15%; 
    background-color: rgb(5,5,6); 
    overflow: auto; 
    z-index: 0; 
    -webkit-transform-origin: 0 50%; 
    -moz-transform-origin: 0 50%; 
    -ms-transform-origin: 0 50%; 
    -o-transform-origin: 0 50%; 
    transform-origin: 0 50%; 
} 

article:after { 
    position: absolute; 
    content: ' '; 
    left: 100%; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    background-image: -webkit-linear-gradient(right, rgba(0,0,0,0.2) 0%, transparent 100%); 
    background-image: -moz-linear-gradient(right, rgba(0,0,0,0.2) 0%, transparent 100%); 
    background-image: -ms-linear-gradient(right, rgba(0,0,0,0.2) 0%, transparent 100%); 
    background-image: -o-linear-gradient(right, rgba(0,0,0,0.2) 0%, transparent 100%); 
    background-image: linear-gradient(right, rgba(0,0,0,0.2) 0%, transparent 100%); 
    pointer-events: none; 
} 

nav { 
    position: fixed; 
    left: -16em; 
    top: 0; 
    bottom: 0; 
    background-color: rgb(32, 40, 41); 
    border-right: 50px solid rgba(6, 15, 32, 0.6); 
    box-shadow: 4px 0 5px rgba(0, 0, 0, 0.2); 
    z-index: 1; 
    cursor: pointer; 
} 

nav:after { 
    position: absolute; 
    content: ' '; 
    width: 0; 
    height: 0; 
    right: -70px; 
    top: 50%; 
    border-width: 15px 10px; 
    border-style: solid; 
    border-color: transparent transparent transparent rgb(72, 97, 111); 
} 

nav ul { 
    width: 14em; 
    list-style-type: none; 
    margin: 0; 
    padding: 1em; 
} 

article, article:after, nav, nav *{ 
    -webkit-transition: all 600ms ease; 
    -moz-transition: all 600ms ease; 
    -ms-transition: all 600ms ease; 
    -o-transition: all 600ms ease; 
    transition: all 600ms ease; 
} 

nav:hover { 
    left: 0; 
} 

nav:hover ~ article { 
    -webkit-transform: translateX(16em) perspective(600px) rotateY(0deg); 
    -moz-transform: translateX(16em) perspective(600px) rotateY(0deg); 
    -ms-transform: translateX(16em) perspective(600px) rotateY(0deg); 
    -o-transform: translateX(16em) perspective(600px) rotateY(0deg); 
    transform: translateX(16em) perspective(600px) rotateY(0deg); 
} 

nav:hover ~ article:after { 
    left: 60%; 
} 

li a { 
    font-family: Josefin Sans; 
    font-size: 36px; 
    color: #fff; 
    text-decoration: none; 
    text-transform: lowercase; 
} 

li a:hover { 
    text-decoration: underline; 
    color: #0092ff; 
} 

li { 
    padding-top: 38%; 
}

來源

2016-01-22 LaffyFX

請在此處添加有意義的代碼和問題描述。請不要鏈接到需要修復的網站 - 否則，一旦問題得到解決，或者您鏈接到的網站無法訪問，此問題將對未來的訪問者失去任何價值。發佈 [最小，完整和可驗證示例（MCVE）]（http://stackoverflow.com/help/mcve）顯示您的問題將幫助您獲得更好的答案。欲瞭解更多信息，請參閱 [我網站上的某些內容不起作用。我可以只粘貼一個鏈接嗎？]（http://meta.stackexchange.com/questions/125997/）謝謝！ – j08691

歡迎使用Stack Overflow，請花一點時間閱讀http://stackoverflow.com/help/how-to-ask帖子。首先有幾點需要考慮：您要填充的空間被稱爲「** fold fold **」，這可能會幫助您搜索如何顯示元素以佔據摺疊區上方的所有空間 - 類似於這個：你應該把更多的信息標題放在這裏：http：//unbounce.com/landing-pages/how-to-design-above-the-fold-landing-page-experiences/ – Martin

tl;嘗試使容器100％的當前視口，或者只是製作兩層頁面，兩個容器一個隱藏一個可見的切換可見性，使用全屏和視口相關的字體大小，http://www.w3schools.com/ css/css_rwd_viewport.asp https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag – 2016-01-22 19:54:09

把標誌，H1和H3文本專區內;這個div的寬度應該是100vw（視口寬度）和100vh（視口高度）的高度。

#top_div { 
    display: block; 
    width: 100vw; 
    height: 100vh; 
} 

#top_div img { 
    width: 100%; 
    max-width: ..px //up to you 
    height: auto; //keep the original width/height ratio 
} 

#top_div h1 { 
    font-size: 10vw //play with these numbers to get the ratios right 
} 

#top_div h3 { 
    font-size: 8vw //play with these numbers to get the ratios right 
}

來源

2016-01-22 19:34:47 rsn

所有的拳頭設置HTML和身體100％，如：

body, html { 
    height: 100%; 
}

將主容器到100％：像你的內心2容器的

.container{ 
    text-align:center; 
    height:100%; 
}

設置高度h1，h2將它們分成100％。在下面的例子中，我使用了等於50％的高度。

.inner-div{ 
    height:50%; 
    color:white; 
}

讓您的圖像使用，以適應屏幕尺寸：

img { 
    max-width: 100%; 
    max-height: 100%; 
}

這是沒有的伎倆。你可以在這裏看到結果。 https://jsfiddle.net/siddiquinoor/Lmd49qfs/

來源

2016-01-22 20:11:28

HTML：顯示與瀏覽器視口一樣大的選擇元素

回答

相關問題