Question

我正在尝试获取第一个初始的第一部分来占据页面的整个高度。我在这里尝试过这个问题：Making a div fit the initial screen但我无法让它发挥作用，一切都只是重叠。

我的导航栏位于第一部分的中心，当页面滚动时会粘在顶部，我只需要第一部分就可以占据整个页面。

像这样：

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; 
}

Answer 1

我一直在网站上这样做。只需添加一个包含position: fixed; top: 0px; left: 0px; width: 100%; height: 100%;样式的div。这应该给你一个像区域的阴影覆盖整个网页。然后你可以在div里面放任何你想要的东西。

垂直居中，做一点数学并使用div。因此，如果div的高度为400px，则使用上述相同的规范再次制作position: fixed，除了将top更改为50%然后{{ 1}}负值到高度的一半。因此，在这种情况下，它将是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;

Answer 2

我认为我在这样的网站上使用的最佳解决方案是将每个部分包含在一个包含div中（或者，如果所有目标浏览器都支持它，或者你不介意使用html5 shiv）。< / p>

喜欢这样

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

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

然后你可以给出div高度：100％和宽度：100％就像......

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

你可以在这个jsfiddle中看到它们全部放在一起：http://jsfiddle.net/Ucetz/

Answer 3

请务必在HTML和BODY标记的样式中包含高度：100％。然后设置部分的高度。

Answer 4

使用Viewport高度。将 div 的高度（也与 section 一起使用）设置为希望div填满屏幕的任何百分比。

.section_div {
   /* fill up 85% of screen heigth */
   height: 85vh;

   /* fill up 100% of screen width */
   width: 100vw;

   /* you can also use min-height instead of height. */
}

HTML第一部分占用整个页面

4 个答案: