Question

很难在标题中解释，所以我会解释我要求的内容。我目前有一个内容包装类，其高度为100％。我希望这可以到达窗口的底部，然后当用户向下滚动页脚时将出现。但是目前我相信包装器div会将页脚推出视线但我无法向下滚动。这是我到目前为止所看到的图像https://gyazo.com/117100c3408956a85aa957bdce2b5b13

最终包装器div将是透明的，但现在它是黑色的以帮助查看。我的想法是，如果我在这一点向下滚动，就会出现一个页脚。

非常感谢任何帮助，谢谢。

HTML：

<body id="chesters">

    <img src="assets/home-bg.jpg" id="home-bg" alt="">

        <header>
            <nav>
                <ul>
                <li><a href="menu.html">MENU</a></li>
                <li><a href="burritos.html">BURRITOS</a></li>
                    <li><a href="index.html"><img class="header-image" src="assets/Headerlogo1.png"></a></li>
                <li><a href="contact.html">CONTACT</a></li>
                <li><a href="about.html">ABOUT</a></li>   
                </ul>
            </nav>
        </header>

    <div id="Page">

        <div id="content" class="wrapper">

        </div>      

        <div id="footer">
            <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sit amet feugiat orci. Vestibulum volutpat iaculis erat non maximus. Nam dictum faucibus aliquam. Maecenas mollis suscipit purus sit amet mattis. Suspendisse vitae turpis lectus. Fusce at efficitur nunc, id congue libero. Donec efficitur lacus non orci ornare luctus.

Aenean id nulla eget diam finibus vehicula sed et dolor. Mauris et purus justo. Pellentesque vitae eros nec ante sodales eleifend ut convallis nulla. Cras diam massa, ornare eget venenatis ut, posuere ut tortor. Duis quis tristique quam. Fusce consequat enim nisl. Curabitur ornare eros a risus tincidunt, eget scelerisque lacus varius. Quisque sed dapibus justo. Etiam eleifend consectetur neque a rutrum. In ac eleifend elit. Vestibulum sagittis est vitae lacus ornare, eget accumsan nibh tincidunt. Vestibulum est turpis, suscipit in risus ac, imperdiet auctor urna. Sed non sem quam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

            </p>
        </div>

    </div> <!-- Page -->

    </body>

CSS：

html, body {
    font-family: 'Open Sans', sans-serif;
    background-color: #f3f3f3;
    color: #666;
    margin: 0 auto;
    padding: 0px;
    width: 100%;
    height: 100%;
}

#Page {
    position: fixed;
    padding-top: 100px;
    z-index: 3;
    width: 100%;
    height: 100%;
}

#home-bg {
    position: fixed;
    height: 100%;
    width: 100%;
    z-index: 1;
    opacity: 0.8;
}

header {
    background-color: #1c1c1b;
    font-family: 'Yanone Kaffeesatz';
    font-size: 250%;
    height: 100px;
    width: 100%;
    border-bottom: solid;
    border-bottom-color: #009641;
    border-bottom-width: 5px;
    position: fixed;
    line-height: 50px;
    z-index: 1000;
    overflow: hidden;
    transition: all 0.8s ease;
}

.header-image {
    align-content: center;
    height: 100px;
    transition: all 0.8s ease;
}

.scroll {
    height: 80px; 
    font-size: 180%;
}

.header-image-scroll {
    height: 80px;
}

nav {

}

nav ul {
    text-align: center;
    display: table;
    width: 50%;
    margin: 0 auto;
    padding-left: 0;
}

nav li {
    display: table-cell;
    vertical-align: middle;
    padding: 0 30px 0 30px;
    margin: 0 auto;
}

nav li a {
    color: #009641;
    text-decoration: none;
}

nav li a:hover {
    color: #e2030e;
    text-decoration: underline #f3f3f3;
}

#content {
    background-color: black;
}

.wrapper {
    width: 50%;
    height: 100%;
    margin: 0 auto;
}

#footer {
    position: absolute;
    width: 100%;
    height: 300px;
    background-color: deeppink;
}

Answer 1

您应该为{css id position: relative;设置Page：

html, body {
    font-family: 'Open Sans', sans-serif;
    background-color: #f3f3f3;
    color: #666;
    margin: 0 auto;
    padding: 0px;
    width: 100%;
    height: 100%;
}

#Page {
    position: relative;
    top: 10vh;
    z-index: 3;
    width: 100%;
    height: 100%;
}

#home-bg {
    position: fixed;
    height: 100%;
    width: 100%;
    z-index: 1;
    opacity: 0.8;
}

header {
    background-color: #1c1c1b;
    font-family: 'Yanone Kaffeesatz';
    font-size: 250%;
    height: 100px;
    width: 100%;
    border-bottom: solid;
    border-bottom-color: #009641;
    border-bottom-width: 5px;
    position: fixed;
    line-height: 50px;
    z-index: 1000;
    overflow: hidden;
    transition: all 0.8s ease;
}

.header-image {
    align-content: center;
    height: 100px;
    transition: all 0.8s ease;
}

.scroll {
    height: 80px; 
    font-size: 180%;
}

.header-image-scroll {
    height: 80px;
}

nav {

}

nav ul {
    text-align: center;
    display: table;
    width: 50%;
    margin: 0 auto;
    padding-left: 0;
}

nav li {
    display: table-cell;
    vertical-align: middle;
    padding: 0 30px 0 30px;
    margin: 0 auto;
}

nav li a {
    color: #009641;
    text-decoration: none;
}

nav li a:hover {
    color: #e2030e;
    text-decoration: underline #f3f3f3;
}

#content {
    background-color: black;
}

.wrapper {
    width: 50%;
    height: 100%;
    margin: 0 auto;
}

#footer {
    position: absolute;
    width: 100%;
    height: 300px;
    background-color: deeppink;
}

<body id="chesters">

    <img src="assets/home-bg.jpg" id="home-bg" alt="">

        <header>
            <nav>
                <ul>
                <li><a href="menu.html">MENU</a></li>
                <li><a href="burritos.html">BURRITOS</a></li>
                    <li><a href="index.html"><img class="header-image" src="assets/Headerlogo1.png"></a></li>
                <li><a href="contact.html">CONTACT</a></li>
                <li><a href="about.html">ABOUT</a></li>   
                </ul>
            </nav>
        </header>

    <div id="Page">

        <div id="content" class="wrapper">

        </div>      

        <div id="footer">
            <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sit amet feugiat orci. Vestibulum volutpat iaculis erat non maximus. Nam dictum faucibus aliquam. Maecenas mollis suscipit purus sit amet mattis. Suspendisse vitae turpis lectus. Fusce at efficitur nunc, id congue libero. Donec efficitur lacus non orci ornare luctus.

Aenean id nulla eget diam finibus vehicula sed et dolor. Mauris et purus justo. Pellentesque vitae eros nec ante sodales eleifend ut convallis nulla. Cras diam massa, ornare eget venenatis ut, posuere ut tortor. Duis quis tristique quam. Fusce consequat enim nisl. Curabitur ornare eros a risus tincidunt, eget scelerisque lacus varius. Quisque sed dapibus justo. Etiam eleifend consectetur neque a rutrum. In ac eleifend elit. Vestibulum sagittis est vitae lacus ornare, eget accumsan nibh tincidunt. Vestibulum est turpis, suscipit in risus ac, imperdiet auctor urna. Sed non sem quam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

            </p>
        </div>

    </div> <!-- Page -->

    </body>

滚动低于100％窗口高度后显示页脚

1 个答案: