问题描述
从此开始,我想创建此布局:
>
但我有以下问题:
- 这两个侧边栏不包含在可滚动内容div中。
- 内容div不占用固定大小
- 可滚动内容溢出时不显示滚动条
- 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
有人可以帮助我解决这些问题吗?
主内容容器中的滚动条
内容框(包括侧边栏)宽度类型(百分比,像素等)。只有可滚动内容区域将滚动(侧边栏/页脚/标题将刚好溢出框)。我建议添加一些媒体查询以打破侧边栏,因此内容不会隐藏在较小的设备上,或在内容框上设置 min-height
code> 在
。正文
上创建code> min-width
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; 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;高度:100%; min-width:300px; margin-left:100px; margin-right:100px; overflow:auto; -moz-box-size: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> <! - 固定大小在标题之后 - >< 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; 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%;背景:绿色; 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> <! - 总是在上面。固定位置,固定宽度,相对于内容宽度 - > < 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:
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>
这篇关于固定标题,页脚和侧边栏,滚动内容区域在中心的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!