HTML第一部分佔用整個頁面

我想要獲取第一個初始第一部分佔用整個頁面的高度。我在這裏試過這個問題：Making a div fit the initial screen但我無法讓它工作，一切都只是重疊。HTML第一部分佔用整個頁面

我的導航欄位於第一部分的中心，當頁面滾動時會粘到最頂部，我只需要第一部分佔據整個頁面。

像這樣：

enter image description here

我的HTML：標題

<body> 

    <span id="top"></span> 


     <div id="floater"></div> 
     <div id="centered"> 
     <div id="sticky_navigation_wrapper"> 
      <div id="sticky_navigation"> 
       <div class="navbar"> 
        <a class="navbar" href="#about">about</a> <a class="navbar" href="#portfolio">portfolio</a> <a class="navbar" href="#top"><img src="/media/nav/logo.png" alt="Logo" /></a> <a class="navbar" href="#social">social</a> <a class="navbar" href="#contact">contact</a> 
      </div> 
     </div> 
    </div> 
    </div> 
    <div> 
    <a>Random Text here, blah blah blah!</a> 
    </div> 
    </body>

我的CSS

html,body{ 
    border: 0; 
    margin: 0; 
    padding: 0; 
    height:100%; 
    width:100%; 
} 

#floater { 
    position:relative; float:left; 
    height:50%; margin-bottom:-25px; 
    width:1px; 
} 

#centered { 
    position:relative; clear:left; 
    height:50px; 
    margin:0 auto; 
} 

#sticky_navigation_wrapper { 
width:100%; height:50px; 
} 

#sticky_navigation { 
width:100%; height:50px; background-color:rgb(241, 241, 241); text-align:center; -moz-box-shadow: 0 0 5px #999; -webkit-box-shadow: 0 0 5px #999; box-shadow: 0 0 5px #999; 
}

來源

2013-07-21 Jacob Wood

可能的重複[如何使網頁高度適合屏幕高度]（http://stackoverflow.com/questions/11868474/how-to-make-the-web-page-height-to-fit-屏幕高度） – Joe

我認爲最好的解決辦法，這是我在這樣的網站上使用，將是包裝在一個包含分區的每個部分（或者，如果所有的目標瀏覽器支持它，或者你不介意使用HTML5 SHIV）。

像這樣

<div class="section"> 
    <p>Hello World</p> 
</div> 

<div class="section"> 
    <p>Hello World</p> 
</div>

然後，您可以給該分區的高度：100％和width：100％像...

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

你可以看到這一切放在一起在這個的jsfiddle： http://jsfiddle.net/Ucetz/

來源

2013-07-21 15:00:47

謝謝！它的工作非常簡單！ –

我一直這樣做到我的網頁。只需添加一個包含position: fixed; top: 0px; left: 0px; width: 100%; height: 100%;風格的div。這應該給你一個像區域陰影覆蓋整個網頁。然後，你可以把任何你想要的內部div。

垂直居中，做一點數學運算並使用div。因此，如果您的div的高度將爲400px，則再次使用上述相同規格製作position: fixed，但將top更改爲50%，然後將margin-top設爲負值至高度的一半。所以，在這種情況下，將margin-top: -200px;

<div id="container" style="position: fixed; top: 0px; left: 0px; width: 100%; height: 100%;"> 
<div id="otherstuff" style="position: fixed; top: 50%; left: 0px; width: 100%; height: 400px; margin-top: -200px;"> I am a verticall centered div! :) 
</div> 
</div>

，然後爲你導航欄，你獲得通過的第一層後，把那position: fixed;爲好，只是確保它上面給出上面的代碼。這樣，它出現在底部。

<div style="position: fixed; top: 0px; left: 0px; height: 70px; width: 100%;">Your navigation content</div> 
<!-- THE CODE GIVEN ABOVE SHOULD GO HERE -->

來源

2013-07-21 14:53:03 kmkmkm

我沒有嘗試你的解決方案，但它聽起來像它也會工作，謝謝你堆:) –

不客氣。 – kmkmkm

確保在HTML和BODY標籤的樣式中包含高度：100％。然後設置部分的高度。

來源

2016-04-12 18:44:48

HTML第一部分佔用整個頁面

回答

相關問題