Question

大家新年快乐！我需要更有经验的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/

Answer 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%;
    }
}

Answer 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>

Answer 3

我不明白这个问题，但我有一些建议。如果导航和页脚将被修复，你应该给内容div添加一些填充

padding: 70px 10px;

顶部和底部为70px，左侧和右侧为10px。

如果您想将内容div的高度设置为浏览器窗口的100％，则应设置css

height:100vh;

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

我希望它会对你有所帮助。

Answer 4

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

按照上面的最新代码：在CSS部分我基本上删除了高度来自div的 margin-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;
    }
}

在粘性标题

4 个答案: