将粘性页脚放置在粘性页眉下的固定左列旁边

【问题标题】：Position a sticky footer next to a fixed left column under a sticky header将粘性页脚放置在粘性页眉下的固定左列旁边
【发布时间】：2015-12-31 16:19:39
【问题描述】：

大家新年快乐！我需要一位更有经验的 html/css 架构师的帮助。我无法创建仅 CSS 和 Html（无 Javascript）自定义布局。其中包括：

1.顶部粘性标题，完全拉伸到页面宽度的 100%

2. 位于页眉下方的左侧菜单，高度完全拉伸到页面底部，如果您调整 页面宽度（媒体最小宽度为 845px）

3.一个粘滞页脚，位于左侧菜单旁边，但拉伸了页面的全部剩余宽度。

这是我目前的布局：http://jsfiddle.net/fksxb09y/

我的 HTML：

<div class="wrap">

  <div class="header">STICKY HEADER</div>
    <!-- Sidebar -->
        <div id="sidebar-wrapper">
            <ul class="sidebar-nav">
                <li class="sidebar-brand">
                    <a href="#">
                        Start Bootstrap
                    </a>
                </li>
                <li>
                    <a href="#">Dashboard</a>
                </li>
                <li>
                    <a href="#">Shortcuts</a>
                </li>
                <li>
                    <a href="#">Overview</a>
                </li>
                <li>
                    <a href="#">Events</a>
                </li>
                <li>
                    <a href="#">About</a>
                </li>
                <li>
                    <a href="#">Services</a>
                </li>
                <li>
                    <a href="#">Contact</a>
                </li>
            </ul>
        </div>
        <!-- /#sidebar-wrapper -->
  <div class="content">CONTENT
    <br />CONTENT
    <br />CONTENT
    <br />CONTENT
    <br />CONTENT
    <br />CONTENT
    <br />CONTENT
    <br />CONTENT
    <br />CONTENT
    <br />CONTENT
    <br />CONTENT
    <br />CONTENT
    <br />CONTENT
    <br />
        <br />CONTENT
    <br />CONTENT
    <br />CONTENT
    <br />CONTENT
    <br />CONTENT
    <br />CONTENT
    <br />CONTENT
    <br />CONTENT
    <br />CONTENT
    <br />CONTENT
    <br />CONTENT
    <br />CONTENT

  </div>
  <div class="push"></div>
</div>
<div class="footer">STICKY FOOTER</div>

我的 CSS：

> html, body, .wrap {   height: 100%; } .wrap { box-sizing:border-box; }
> 
> form {height:100%} .wrap {   min-height: 100%;   height: auto
> !important;   height: 100%;   margin-bottom: -60px;   /* for sticky
> footer to not go below page */   /* for sticky header to not overlap
> content */ } .push, .footer {   height: 60px; } .footer {  
> background-color: green;     height: 60px;   width: 100%;   position:
> fixed;   bottom: 0; } .content {   padding-top: 60px;  height:100% 
> !important;    background-color: yellow; } .header {  
> background-color: blue;   height: 60px;    width: 100%;   position:
> fixed;   top: 0; }
> 
> 
> #sidebar-wrapper {
>     z-index: 1000;
>     position: fixed;
>     left: 250px;
>     width: 0;
>     height: 100%;
>     margin-left: -250px;
>     overflow-y: auto;
>     background: #000;
>     -webkit-transition: all 0.5s ease;
>     -moz-transition: all 0.5s ease;
>     -o-transition: all 0.5s ease;
>     transition: all 0.5s ease; }
> 
> #wrapper.toggled #sidebar-wrapper {
>     width: 250px; }
> 
> #page-content-wrapper {
>     width: 100%;
>     position: absolute;
>     padding: 15px; }
> 
> #wrapper.toggled #page-content-wrapper {
>     position: absolute;
>     margin-right: -250px; }
> 
> /* Sidebar Styles */
> 
> .sidebar-nav {
>     position: absolute;
>     top: 0;
>     width: 250px;
>     margin: 0;
>     padding: 0;
>     list-style: none; }
> 
> .sidebar-nav li {
>     text-indent: 20px;
>     line-height: 40px; }
> 
> .sidebar-nav li a {
>     display: block;
>     text-decoration: none;
>     color: #999999; }
> 
> .sidebar-nav li a:hover {
>     text-decoration: none;
>     color: #fff;
>     background: rgba(255,255,255,0.2); }
> 
> .sidebar-nav li a:active, .sidebar-nav li a:focus {
>     text-decoration: none; }
> 
> .sidebar-nav > .sidebar-brand {
>     height: 65px;
>     font-size: 18px;
>     line-height: 60px; }
> 
> .sidebar-nav > .sidebar-brand a {
>     color: #999999; }
> 
> .sidebar-nav > .sidebar-brand a:hover {
>     color: #fff;
>     background: none; }
> 
> @media(min-width:768px) {
>     #wrapper {
>         padding-left: 250px;
>     }
> 
>     #wrapper.toggled {
>         padding-left: 0;
>     }
> 
>     #sidebar-wrapper {
>         width: 250px;
>     }
> 
>     #wrapper.toggled #sidebar-wrapper {
>         width: 0;
>     }
> 
>     #page-content-wrapper {
>         padding: 20px;
>         position: relative;
>     }
> 
>     #wrapper.toggled #page-content-wrapper {
>         position: relative;
>         margin-right: 0;
>     } }

如您所见，当我拉伸内容部分时，我在填充内容部分的整个高度时遇到了问题，而底部没有空白区域。

左栏布局覆盖页眉和页脚，而不是将页眉放在顶部，将页脚放在左栏的一侧。

我现在陷入了无望的困境，需要帮助来弄清楚这个布局。任何正确方向的帮助或提示将不胜感激。谢谢！

更新 1：感谢@DaMaGeX http://jsfiddle.net/fksxb09y/9/ 几乎解决了问题

现在我只需要弄清楚：

1. 为什么身体在 调整大小时底部。

2. 调整浏览器高度时 窗口粘性页脚与页眉重叠，最小高度 内容部分消失。调整大小时应该有足够大的空间容纳内容。

更新 2： 现在还有一个问题，我没有注意到左侧菜单上的底部箭头在调整大小时消失了，底部的内容也消失了。 http://jsfiddle.net/fksxb09y/9/

【问题讨论】：

  • 感谢新年快乐！！！并且很好地描述了您的问题
  • 谢谢@MarioKurzweil 也祝你新年快乐！

标签： html twitter-bootstrap css


【解决方案1】：

好的，我已经调查过了，结果如下：http://jsfiddle.net/fksxb09y/9/

我做了以下事情：

.content {
  position: absolute;
  width: 100%;
  top: 60px;
  bottom: 60px;
  z-index: -1;
}

#sidebar-wrapper {
    top: 60px; //Leave the other values in.
}

@media screen and (min-width:768px) {
    .content, .footer {
        width: 75%;
        right: 0;
    }

    #sidebar-wrapper {
        width: 25%;
    }
}

【讨论】：

  • 你太棒了！我根据您的更改更新了代码，并概述了代码的 2 个剩余问题。调整内容部分的大小时，这是一个间距问题
  • 是的，我还建议您将菜单的左边距设置为 -25% 而不是 -250px 等 - 我不知道您所说的间距问题是什么意思，但如果是几秒钟后可见的空白然后添加过渡到 .content 和 .footer 元素。
  • 我添加了问题的截图。问题是在调整大小时粘性页脚会超出粘性页眉（我们不能将页眉保持在顶部吗？并为内容添加最小高度？，并且内容窗口在调整大小时会在底部显示一个空白。跨度>
  • 在这种情况下，您可以选择为 body 元素赋予背景色。对于页脚 z-index：-1;
  • 感谢您的回答，我已经添加了更改，我只是注意到我们都忽略了一个错误。当您调整浏览器窗口的大小时，左侧菜单上没有可见的向下箭头或内容。它只是消失在屏幕的底部。查看我的更新2。
【解决方案2】：

这是一个可以解决问题的骨架：

<!DOCTYPE html>
<html>
    <head>
        <title>So many stickies!</title>
        <style type="text/css">
            /* My screen resolution is 1280x1024. I'm sizing elements relative to that */
            body {
                margin: 0px;
                overflow: hidden;
            }
            #header {
                background-color: yellow;
                width: 100%;
                position: fixed;
                top: 0px;
                height: 50px;
            }
            #left {
                background-color: blue;
                height: auto;
                position: absolute;
                top: 50px;
                left: 0px;
                width: 280px;
                max-height: 974px;
                overflow: auto;
            }
            #right {
                height: 974px;
                width: 1000px;
                position: absolute;
                top: 50px;
                left: 280px;
            }
            #bodyContent {
                width: 100%;
                overflow: auto;
                height: auto;
                max-height: 874px;
                position: relative;
                top: 0px;
            }
            #footer {
                width: 100%;
                background-color: red;
                height: 100px;
                position: fixed;
                bottom: 0px;
            }
        </style>
    </head>
    <body>
        <div id="header">
            Your header.
        </div>
        <div id="content">
            <div id="left">
                <p>This is a paragraph</p>
                <p>This is a paragraph</p>
                <p>This is a paragraph</p>
                <p>This is a paragraph</p>
                <p>This is a paragraph</p>
                <p>This is a paragraph</p>
                <p>This is a paragraph</p>
                <p>This is a paragraph</p>
                <p>This is a paragraph</p>
                <p>This is a paragraph</p>
                <p>This is a paragraph</p>
                <p>This is a paragraph</p>
                <p>This is a paragraph</p>
                <p>This is a paragraph</p>
                <p>This is a paragraph</p>
                <p>This is a paragraph</p>
                <p>This is a paragraph</p>
                <p>This is a paragraph</p>
                <p>This is a paragraph</p>
                <p>This is a paragraph</p>
                <p>This is a paragraph</p>
                <p>This is a paragraph</p>
                <p>This is a paragraph</p>
                <p>This is a paragraph</p>
                <p>This is a paragraph</p>
                <p>This is a paragraph</p>
                <p>This is a paragraph</p>
                <p>This is a paragraph</p>
                <p>This is a paragraph</p>
                <p>This is a paragraph</p>
                <p>This is a paragraph</p>
                <p>This is a paragraph</p>
                <p>This is a paragraph</p>
                <p>This is a paragraph</p>
                <p>This is a paragraph</p>
                <p>This is a paragraph</p>
                <p>This is a paragraph</p>
                <p>This is a paragraph</p>
                <p>This is a paragraph</p>
                <p>This is a paragraph</p>
                <p>This is a paragraph</p>
                <p>This is a paragraph</p>
                <p>This is a paragraph</p>
                <p>This is a paragraph</p>
                <p>This is a paragraph</p>
                <p>This is a paragraph</p>
                <p>This is a paragraph</p>
                <p>This is a paragraph</p>
                <p>This is a paragraph</p>
                <p>This is a paragraph</p>
                <p>This is a paragraph</p>
                <p>This is a paragraph</p>
                <p>This is a paragraph</p>
                <p>This is a paragraph</p>
                <p>This is a paragraph</p>
                <p>This is a paragraph</p>
                <p>This is a paragraph</p>
                <p>This is a paragraph</p>
                <p>This is a paragraph</p>
                <p>This is a paragraph</p>
                <p>This is a paragraph</p>
                <p>This is a paragraph</p>
                <p>This is a paragraph</p>
                <p>This is a paragraph</p>
                <p>This is a paragraph</p>
                <p>This is a paragraph</p>
            </div>
            <div id="right">
                <div id="bodyContent">
                    The body
                </div>
                <div id="footer">
                    The footer
                </div>
            </div>
        </div>
    </body>
</html>

【讨论】：

  • 感谢您的回答。调整大小时，我的代码似乎与上述小提琴 jsfiddle.net/fksxb09y/9 有类似的问题，我在内容部分得到一个空白，页脚越过页眉
  • 这很奇怪......我没有经历过这样的事情。我用的是最新版的chrome来测试代码
  • 您可以尝试在我的代码中使用 em 测量而不是 px 测量
  • jsfiddle.net/b8mL847g 我已经在最新的 Chrome、Firefox 和 IE 上尝试过同样的问题。左侧菜单的向下箭头和内容从屏幕底部消失。
  • 它不会消失。发生的情况是，当您的浏览器调整框的高度时，框的高度没有调整大小，因此它的某些区域超出了浏览器的视口
【解决方案3】：

我没有完全理解这个问题，但我有一些建议。如果导航和页脚将被修复，您应该为内容 div 提供一些填充，例如 

padding: 70px 10px;

上下70px，左右10px。

如果你想将内容 div 的高度设置为浏览器窗口的 100%，你应该设置 css 

height:100vh;

vh 是设备屏幕高度的 100%，vw 是宽度。

希望对你有帮助。

【讨论】：

    【解决方案4】：

    好的，这是正确的代码，在@damagex 的帮助下我弄清楚了布局，并解决了导致底部滚动条间距问题的问题。

    按照上面最新的代码：在 CSS 部分我基本上删除了 height 和 div 中的 ma​​rgin-bottom:60px 参数： #sidebar-wrapper 并添加了 bottom:0px. 以将侧边栏拉伸到底部。 （注意：无论高度如何，这都会使左侧菜单调整大小而不会将底部滚动条或内容推出视口）

    这是正确的小提琴： http://jsfiddle.net/fksxb09y/11/

    现在是整个代码，对于那些可能与我有类似问题的用户。大家2016新年快乐！ :)

    HTML

    <div class="wrap">

  <div class="header">STICKY HEADER</div>
    <!-- Sidebar -->
        <div id="sidebar-wrapper">
            <ul class="sidebar-nav">
                <li class="sidebar-brand">
                    <a href="#">
                        Start Bootstrap
                    </a>
                </li>
                <li>
                    <a href="#">Dashboard</a>
                </li>
                <li>
                    <a href="#">Shortcuts</a>
                </li>
                <li>
                    <a href="#">Overview</a>
                </li>
                <li>
                    <a href="#">Events</a>
                </li>
                <li>
                    <a href="#">About</a>
                </li>
                <li>
                    <a href="#">Services</a>
                </li>
                <li>
                    <a href="#">Contact</a>
                </li>
                                <li>
                    <a href="#">Shortcuts</a>
                </li>
                <li>
                    <a href="#">Overview</a>
                </li>
                <li>
                    <a href="#">Events</a>
                </li>
                <li>
                    <a href="#">About</a>
                </li>
                <li>
                    <a href="#">Services</a>
                </li>
                <li>
                    <a href="#">Contact</a>
                </li>

            </ul>
        </div>
        <!-- /#sidebar-wrapper -->
  <div class="content">CONTENT
    <br />CONTENT
    <br />CONTENT
    <br />CONTENT
    <br />CONTENT
    <br />CONTENT
    <br />CONTENT
    <br />CONTENT
    <br />CONTENT
    <br />CONTENT
    <br />CONTENT
    <br />CONTENT
    <br />CONTENT
    <br />
        <br />CONTENT
    <br />CONTENT
    <br />CONTENT
    <br />CONTENT
    <br />CONTENT
    <br />CONTENT
    <br />CONTENT
    <br />CONTENT
    <br />CONTENT
    <br />CONTENT
    <br />CONTENT
    <br />CONTENT

  </div>
  <div class="push"></div>
</div>
<div class="footer">STICKY FOOTER</div>

    CSS：

    html, body, .wrap {
  height: 100%; 
}
body {
background-color: yellow;
}

.wrap { box-sizing:border-box; }

form {height:100%}
.wrap {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin-bottom: -60px;
  /* for sticky footer to not go below page */
  /* for sticky header to not overlap content */
}
.push, .footer {
  height: 60px;
}

.footer {
  background-color: green;  
  height: 60px;
  width: 100%;
  position: fixed;
  bottom: 0;
}
.content {
  position: absolute;
  width: 100%;
  top: 60px;
  z-index: -1;
}
.header {
  background-color: blue;
  height: 60px; 
  width: 100%;
  position: fixed;
  top: 0;
}


#sidebar-wrapper {
    z-index: 1000;
    position: fixed;
    left: 250px;
    top: 60px;
    width: 0;
    bottom:0px;
    margin-left: -250px;
    overflow-y: auto;
    overflow-x:hidden;
    background: #000;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

#wrapper.toggled #sidebar-wrapper {
    width: 250px;
}

#page-content-wrapper {
    width: 100%;
    position: absolute;
    padding: 15px;
}

#wrapper.toggled #page-content-wrapper {
    position: absolute;
    margin-right: -250px;
}

/* Sidebar Styles */

.sidebar-nav {
    position: absolute;
    top: 0;
    width: 250px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sidebar-nav li {
    text-indent: 20px;
    line-height: 40px;
}

.sidebar-nav li a {
    display: block;
    text-decoration: none;
    color: #999999;
}

.sidebar-nav li a:hover {
    text-decoration: none;
    color: #fff;
    background: rgba(255,255,255,0.2);
}

.sidebar-nav li a:active,
.sidebar-nav li a:focus {
    text-decoration: none;
}

.sidebar-nav > .sidebar-brand {
    height: 65px;
    font-size: 18px;
    line-height: 60px;
}

.sidebar-nav > .sidebar-brand a {
    color: #999999;
}

.sidebar-nav > .sidebar-brand a:hover {
    color: #fff;
    background: none;
}

@media screen and (min-width:768px) and (min-height:405px) {
    #wrapper {
        padding-left: 250px;
    }

    #wrapper.toggled {
        padding-left: 0;
    }

    #sidebar-wrapper {
        width: 25%;
    }

    .content, .footer {
        width: 75%;
        right: 0;
    }

    #wrapper.toggled #sidebar-wrapper {
        width: 0;
    }


    #page-content-wrapper {
        padding: 20px;
        position: relative;
    }

    #wrapper.toggled #page-content-wrapper {
        position: relative;
        margin-right: 0;
    }
}

    【讨论】：

      猜你喜欢
      • 2012-08-15
      • 2015-05-06
      • 2012-12-28
      • 2014-03-02
      • 2012-02-28
      • 1970-01-01
      • 1970-01-01
      • 2013-02-23
      相关资源
      最近更新 更多
      热门标签
      Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode