文章/答案/技术大牛

发布

社区首页 >问答首页 >画布菜单使之无法显示页脚。

问画布菜单使之无法显示页脚。
EN

Stack Overflow用户

提问于 2015-02-16 20:35:28

回答 2查看 268关注 0票数 0

所以我搞不懂为什么我的页脚部分是隐藏的。我认为这是因为身体被设置为溢出:隐藏，但它需要这样做，以使离开画布菜单工作。如果我删除溢出:隐藏在身体，那么菜单栏消失时，滚动。我只是不明白为什么页脚部分没有显示，因为它在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;
}

css

html

回答 2

Stack Overflow用户

回答已采纳

发布于 2015-02-16 20:55:37

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索引。

通常，您希望避免嵌套滚动条；如果某些内容滚动，则应该是整个页面，而不是单个元素。

票数 1

Stack Overflow用户

发布于 2015-02-16 20:58:40

主要问题是设置：

.content-wrap {
    height: 100%;}

当你将高度设定为100%时，你需要考虑一下这意味着什么。在您的例子中，它意味着100%的windowHeight，而且由于您的页脚上方有另一个div，所以它被推到了底部以下，

这是一个工作的小提琴

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/28549869

复制

相似问题

问画布菜单使之无法显示页脚。
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问画布菜单使之无法显示页脚。EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问画布菜单使之无法显示页脚。
EN