1

I'm trying to get the first initial first section to take up the whole height of the page. I've tried this question here: Making a div fit the initial screen but I cannot get it to work, everything just overlaps.

My nav bar is centered on the first section and will stick to the top when the page is scrolled, I just need the first part to take up the whole page.

Like this:

enter image description here

Spotify also do it on their website

My HTML: Title 

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

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

4 回答 4

0

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

像这样

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

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

然后你可以给那个div height: 100% and width: 100% like...

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

您可以在这个 jsfiddle 中看到所有内容：http: //jsfiddle.net/Ucetz/

于 2013-07-21T15:00:47.487 回答
0

我一直对我的网页这样做。只需添加一个包含position: fixed; top: 0px; left: 0px; width: 100%; height: 100%;样式的 div。这应该给你一个阴影般的区域来覆盖整个网页。然后，您可以将任何您想要的内容放入该 div 中。

要垂直居中，请做一些数学运算并使用 div。因此，如果您的 div 的高度将是，400px那么position: fixed再次使用上述相同的规格，除了将 to 更改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-21T14:53:03.233 回答
0

请务必在 HTML 和 BODY 标签的样式中包含 height: 100% 。然后设置部分的高度。

于 2016-04-12T18:44:48.177 回答
0

使用视口高度。将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. */
}
于 2020-05-11T14:00:25.583 回答