Question

所以我很困惑为什么我的页脚部分被隐藏了。我认为这是因为正文设置为溢出：隐藏，但它需要这样才能使画布外菜单工作。如果我删除溢出：隐藏在主体上，则滚动时菜单栏会消失。我只是不明白为什么页脚部分没有显示，因为它在body元素内部。有任何想法如何解决这个问题？

这是一个JSFiddle： https://jsfiddle.net/b18wmdzg/

HTML

<body>
<div class="container">
<div class="menu-wrap">
       <nav class="menu-top">
       </nav>
       <nav class="menu-side main-navigation" id="site-   navigation">
                <a href="#">Home</a>
                <a href="#">page 2</a>
                <a href="#">page 3</a>
            </nav>
     </div>   
     <div class="menu-bar">
            <button class="menu-button" id="open-button">menu</button>
            <button class="nav-2">Contact</button>
            <button class="nav-2">Case Study</button>
     </div>
     <div id="content" class="site-content content-wrap">
         <div class="dummy-content">
             <p>hoaubobaowbeobafohweofhwohfowuheofhowehfowhohfohwfohohohohohohohohoh</p>
         </div>
     </div>

    <footer class="site-footer">
        <p>dhooabobaweobofeobweh</p>
    </footer>

</div>

`

CSS

html, body {
overflow: hidden;
width: 100%;
height: 100%;
background: #2a3032;
}

.container {
height: 100%;
}

.menu-wrap {
position: fixed;
font-weight: 700;
opacity: 0;
-webkit-transition: opacity 1s;
transition: opacity 1s;
}

.main-navigation {
background: none !important;
width: 240px !important;
clear: both;
display: block;
float: left;
}

.menu-bar {
width: 100%;
height: 6rem;
}

.container > .content-wrap {
background: #f8f7ee;
}

.content-wrap {
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
-webkit-transition: -webkit-transform 0.3s;
transition: transform 0.3s;
}

.container, .content-wrap {
height: 100%;
width: 100%;
}

.dummy-content {
height: 1000px;
}

footer.site-footer {
height: 400px;
width: 100%;
background: black;
}

Answer 1

overflow: hidden表示隐藏了超出元素范围的任何内容;没有滚动。在这种情况下，html和body元素默认为窗口的尺寸，并且您的页脚超出了这些尺寸，因此它被截断。

我的建议是，如果您希望导航栏保留在屏幕顶部，请为其指定固定位置：

html, body {
  background: #2a3032;
}

.menu-bar {
  width: 100%;
  height: 6rem;
  position: fixed;
  top: 0;
  left: 0;
  background: #2a3032;
  z-index: 10;
}

.site-content {
  background: #f8f7ee;
}

#content {
  margin-top: 6rem; 
}

.dummy-content {
  height: 1000px;
}

footer.site-footer {
  height: 400px;
  width: 100%;
  background: black;
  color: #fff;
}

<body>
    <div class="container">
 
         <div class="menu-bar">
                <button class="menu-button" id="open-button">Menu</button>
                <button class="nav-2">Contact</button>
                <button class="nav-2">Case Study</button>
         </div>
         <div id="content" class="site-content">
             <div class="dummy-content">
                 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec congue magna. Sed ullamcorper velit id dolor congue convallis. In massa est, gravida a eros vitae, ornare aliquet nunc. Mauris elementum enim ut dapibus scelerisque. Etiam luctus orci id quam congue finibus. Proin consequat dapibus porttitor. Etiam pretium consectetur nibh non porttitor. Donec in leo sit amet neque cursus sagittis nec vel est. Morbi metus libero, suscipit in fringilla nec, molestie ut diam. Sed rutrum magna vitae orci pellentesque, non feugiat nibh sollicitudin.

 <p>Aliquam eget efficitur eros, eu egestas mauris. Morbi vel vehicula arcu. Integer viverra ipsum sed turpis laoreet dictum a vitae ex. Cras lectus libero, pellentesque quis nisi quis, tristique lobortis ante. Maecenas mattis ligula eget dui ultrices tristique. Sed in consectetur mauris. Fusce vulputate lacinia quam, sed ornare massa consequat in. Ut et turpis dui. Sed vitae diam vel sapien commodo mollis. Curabitur ante odio, tempor vel augue rhoncus, volutpat ultrices est. Curabitur nibh ipsum, dapibus et dignissim ut, faucibus eget nulla. Phasellus eget turpis rhoncus, pellentesque eros quis, iaculis quam. Nam laoreet felis sed nisi iaculis sagittis.

             </div>
         </div>
    
        <footer class="site-footer">
            <p>dhooabobaweobofeobweh</p>
        </footer>
    
    </div>
</body>

如果你想在第一个菜单上打开另一个菜单，那么你可以给它一个更大的z-index。

一般来说，你想避免嵌套的滚动条;如果有东西滚动它应该是整个页面，而不是单个元素。

Answer 2

主要问题是设置：

.content-wrap {
    height: 100%;}

每当你将高度设置为100％时，你需要考虑这意味着什么..在你的情况下，它意味着100％的windowHeight，并且因为你的页脚顶部有另一个div，所以它被推到底部以下，

这是一个有效的fiddle

Off-Canvas菜单让Footer无法看到

2 个答案: