固定页脚具有100％的高度和可滚动菜单 [英] Fixed footer with 100% height of body and scrollable menu

问题描述

我正在通过asp.net创建一个Web应用程序.我的客户需要一个宽度为1024 px的contentplaceholder框架，其中标题和正文部分的宽度为100％.该应用程序还需要一个滚动菜单，该菜单才能正常运行.

主要要求是页脚必须固定在页面底部，而contentplaceholder则需要设置100％的高度.如果页面上有更多内容，则需要滚动整个页面.我用谷歌搜索并尝试了几种解决方案，但没有成功返回.

此处 [此处 [ ^ ]

请给我建议一个解决方案.提前谢谢.

拉维(Ravi Mallya)
--------------------
编码就是诗歌.享受编码的美...

I''m creating a web application through asp.net. My client needs a framework with 1024 px width contentplaceholder with 100% width of header and body section. Also the app needs a scrollable menu which is working perfectly.

The main requirement is the footer needed to be fixed to the bottom of the page and the contentplaceholder needed to set 100% of height. If a page has more content, the entire page needed to be scrolled. I googled and tried several solutions, but returned with no success.

Here[^]is a jsFiddle with the output. and my Final solution has ended with setting min-height for the content div which is not proper way. The ''body-container'' div needed to be set to absolute position because of the scroll menu. If we set relative position, the content in this div gets wrapped. The jsFiddle for this frame is here[^]

Please suggest me a solution. Thanks in advance.

Ravi Mallya
--------------------
Coding is Poetry. Enjoying the beauty of coding...

推荐答案

最后，我最终使用twitter的引导程序 [

Finally, I''m ended up with the solution for my problem in a different way using twitter''s Bootstrap[^] and some custom css. I used the following css:

/* styles for layout */
html,body
{
    height:100%;
}

#wrap
{
  min-height: 100%;
}

#main
{
    overflow:auto;
    padding-bottom:150px; /* this needs to be bigger than footer height*/
    padding-top:40px; /* Height of the navbar */
}

.footer
{
    position: relative;
    margin-top: -150px; /* negative value of footer height */
    height: 150px;
    clear:both;
    color:#fff;
}
 /* Lastly, apply responsive CSS fixes as necessary */
      @media (max-width: 767px) {
        .footer {
          margin-left: -20px;
          margin-right: -20px;
          padding-left: 20px;
          padding-right: 20px;
        }
      }
​

我必须将 padding-top 赋予 main div以获取固定的标题，并使用twitter的 .footer 类响应.

您可以参考下面给出的jsfiddle演示和编辑.
1. 没有内容的演示 [编辑 [ ^ ]
2. 包含内容的演示 [编辑 [ ^ ]

致谢Kevin M的博客文章. Kev @ MVC [ ^ ].

但是，我仍然觉得这不是一个完整的解决方案.也许，如果我们获得动态的高度页脚，该如何解决?总是欢迎提出建议和反馈.

Ravi Mallya
--------------------
编码就是诗歌.享受编码之美...

I have had to give padding-top to the main div to get fixed header and used twitter''s responsive for the .footer class.

You may refer to the below given jsfiddle demos and edits.
1. Demo without content[^] and edit[^]
2. Demo with content[^] and edit[^]

Credit goes to a blog post of Kevin M. Kev @ MVC[^].

However, I still feel that it''s not a complete solution for this. Perhaps, what the solution if we get dynamic height footer? Suggestions and feedback are always welcome.

Ravi Mallya
--------------------
Coding is Poetry. Enjoying the beauty of coding...

这篇关于固定页脚具有100％的高度和可滚动菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！