本文介绍了固定标题,页脚和侧边栏,滚动内容区域在中心的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

从此开始,我要创建此布局:



>



但我有以下问题:




  • 这两个侧边栏不包含在可滚动内容div中。

  • 内容div不固定大小

  • 可滚动内容溢出时不显示滚动条




有人可以帮我解决这些问题吗?

解决方案

主内容容器中的滚动条



内容框(包括侧边栏)宽度类型(百分比,像素等)。只有可滚动内容区域将滚动(侧边栏/页脚/标题将刚好溢出框)。我建议添加一些媒体查询以打破侧边栏,所以内容不会隐藏在较小的设备上,或在内容框上设置 min-height code>


> $ <$> =snippetdata-lang =jsdata-hide =falsedata-console =falsedata-babel =false>

  html,body {height:100%; margin:0; padding:0;} header {width:100%;背景:黄色;位置:固定; top:0; height:60px!important; opacity:.8;}。content {position:relative;高度:100%; width:600px; / *尺寸 - 任何长度* / padding:60px 0 30px 0; / *页眉高度和页脚高度* / margin:0 auto 0 auto; / *中心内容* / -moz-box-sizing:border-box; -webkit-box-sizing:border-box; -o-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box;}。sidebar1,.sidebar2 {background:red; top:60px; bottom:30px; width:100px;位置:绝对; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; -o-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box;}。sidebar1 {left:0;}。sidebar2 {right:0;}#scrollable2 {background:green;高度:100%; min-width:300px; margin-left:100px; margin-right:100px; overflow:auto; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; -o-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box;} footer {width:100%;背景:黄色;位置:固定; bottom:0; height:30px;}  
  top:Position Fixed  - >< header>头< / header><! - 在头后固定大小 - >< div class =content> <! - 总是在顶部。固定位置,固定宽度,相对于内容宽度 - > < div class =sidebar1> sidebar-left< / div> <! - 主要内容的可滚动div  - > < div id =scrollable2> content-main< br> content-main< br> content-main< br> content-main< br> content-main< br> content-main< br> content-main< br> content-main< br> content-main< br> content-main< br> content-main< br> content-main< br> content-main< br> content-main< br> content-main< br> content-main< br> content-main< br> content-main< br> content-main< br> content-main< br> content-main< br> content-main< br> content-main< br> content-main< br> content-main< br> content-main< br> content-main< br> content-main< br> content-main< br> content-main< br> content-main< br> < / div> <! - 总是在顶部。固定位置,固定宽度,相对于内容宽度 - > < div class =sidebar2> sidebar-right< / div>< / div><! - 始终在页面末尾 - >< footer> footer< / footer>  



使用浏览器的主滚动条



虽然使用浏览器的主滚动条是可能的,但它也会导致侧边栏与页面一起滚动。



  html,body {height:100%; margin:0; padding:0;} header {width:100%;背景:黄色;位置:固定; top:0; height:60px!important; z-index:100;}。content {position:relative; min-height:100%; width:600px; / *尺寸 - 任何长度* / padding:60px 0 30px 0; / *页眉高度和页脚高度* / margin:0 auto 0 auto; / *中心内容* /}。sidebar1,.sidebar2 {background:red;高度:100%; width:100px; top:0; padding-top:60px;位置:绝对; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; -o-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box;}。sidebar1 {left:0; } .sidebar2 {right:0;}#scrollable2 {height:100%;背景:绿色; min-width:300px; margin-left:100px; margin-right:100px; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; -o-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box;} footer {width:100%;背景:黄色;位置:固定; bottom:0; height:30px;}  
 < top:Position Fixed  - >< header>头< / header><! - 在头后固定大小 - >< div class =content> <! - 总是在顶部。固定位置,固定宽度,相对于内容宽度 - > < div class =sidebar1> sidebar-left< / div> <! - 主要内容的可滚动div  - > < div id =scrollable2> content-main< br> content-main< br> content-main< br> content-main< br> content-main< br> content-main< br> content-main< br> content-main< br> content-main< br> content-main< br> content-main< br> content-main< br> content-main< br> content-main< br> content-main< br> content-main< br> content-main< br> content-main< br> content-main< br> content-main< br> content-main< br> content-main< br> content-main< br> content-main< br> content-main< br> content-main< br> content-main< br> content-main< br> content-main< br> content-main< br> content-main< br> < / div> <! - 总是在顶部。固定位置,固定宽度,相对于内容宽度 - > < div class =sidebar2> sidebar-right< / div>< / div><! - 始终在页面末尾 - >< footer> footer< / footer>  


Starting with this Demo Template, I would like to create this layout:

But I have the following problems:

  • The two sidebars are not contained inside the scrollable content div.
  • The content div does not take a fixed size
  • The scrollable content does not present a scrollbar when it overflows
  • It is preferred if the browser's main scrollbar is used

Can someone help me to fix these issues?

解决方案

Scrollbar in main content container

The content box (including the sidebars) can be set to any type of width (percent, pixel, etc). Only the scrollable content area will scroll (sidebars/footer/header will just overflow the box). I'd suggest adding some media queries to break out of the sidebars so content isn't hidden on smaller devices, or set a min-height on the content box and a min-width on the body.

html, body {
    height:100%;
    margin:0;
    padding:0;
}
header{
    width: 100%;
    background: yellow;
    position: fixed;
    top: 0;
    height: 60px !important;
    opacity:.8;
}

.content {
    position:relative;
    height: 100%;
    width:600px; /* Sizing - any length */
    padding:60px 0 30px 0; /* Header height and footer height */
    margin:0 auto 0 auto; /* Center content */
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -o-box-sizing:border-box;
    -ms-box-sizing:border-box;
    box-sizing:border-box;
}

.sidebar1, .sidebar2 {
    background: red;
    top:60px;
    bottom:30px;
    width: 100px;
    position:absolute;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -o-box-sizing:border-box;
    -ms-box-sizing:border-box;
    box-sizing:border-box;
}

.sidebar1 {
    left:0;
}

.sidebar2 {
    right: 0;
}

#scrollable2 {
    background:green;
    height: 100%;
    min-width: 300px;
    margin-left: 100px;
    margin-right: 100px;
    overflow:auto;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -o-box-sizing:border-box;
    -ms-box-sizing:border-box;
    box-sizing:border-box;
}

footer {
    width: 100%;
    background: yellow;
    position: fixed;
    bottom: 0;
    height: 30px;
}
<!-- Always on top: Position Fixed-->
<header>
    header
</header>
<!-- Fixed size after header-->
<div class="content">
    <!-- Always on top. Fixed position, fixed width, relative to content width-->
    <div class="sidebar1">
        sidebar-left
    </div>
    <!-- Scrollable div with main content -->
    <div id="scrollable2">
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
    </div>
    <!-- Always on top. Fixed position, fixed width, relative to content width -->
    <div class="sidebar2">
        sidebar-right
    </div>
</div>
<!-- Always at the end of the page -->
<footer>
    footer
</footer>

Using the browser's main scrollbar

While using the browser's main scrollbar is possible, it also causes the sidebars to scroll with the page.

html, body {
    height:100%;
    margin:0;
    padding:0;
}
header{
    width: 100%;
    background: yellow;
    position: fixed;
    top: 0;
    height: 60px !important;
    z-index:100;
}

.content {
    position:relative;
    min-height: 100%;
    width:600px; /* Sizing - any length */
    padding:60px 0 30px 0; /* Header height and footer height */
    margin:0 auto 0 auto; /* Center content */
}

.sidebar1, .sidebar2 {
    background: red;
    height:100%;
    width: 100px;
    top:0;
    padding-top:60px;
    position:absolute;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -o-box-sizing:border-box;
    -ms-box-sizing:border-box;
    box-sizing:border-box;
}

.sidebar1 {

    left:0;

}

.sidebar2 {
    right: 0;
}

#scrollable2 {
    height:100%;
    background:green;
    min-width: 300px;
    margin-left: 100px;
    margin-right: 100px;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -o-box-sizing:border-box;
    -ms-box-sizing:border-box;
    box-sizing:border-box;
}

footer {
    width: 100%;
    background: yellow;
    position: fixed;
    bottom: 0;
    height: 30px;
}
<!-- Always on top: Position Fixed-->
<header>
    header
</header>
<!-- Fixed size after header-->
<div class="content">
    <!-- Always on top. Fixed position, fixed width, relative to content width-->
    <div class="sidebar1">
        sidebar-left
    </div>
    <!-- Scrollable div with main content -->
    <div id="scrollable2">
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
    </div>
    <!-- Always on top. Fixed position, fixed width, relative to content width -->
    <div class="sidebar2">
        sidebar-right
    </div>
</div>
<!-- Always at the end of the page -->
<footer>
    footer
</footer>

这篇关于固定标题,页脚和侧边栏,滚动内容区域在中心的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

05-28 08:39
查看更多