具有固定页眉和页脚,固定宽度侧边栏和灵活内容的布局
mck*_*mck 22 html javascript css css3 twitter-bootstrap
我正在尝试设置一个如下所示的布局:
我想在项目中使用twitter bootstrap,但我知道它可能不是最好的方法来实现这样的基本布局.我知道如何设置页眉和页脚固定在顶部和底部,但我很难让我的侧边栏恒定宽度和独立滚动.
我目前的实现在这里:http://jsfiddle.net/Mwkrw/3/.
我尝试使用流畅的twitter bootstrap 2.0中的固定侧边栏导航设置固定边栏,并在堆栈溢出时使用其他几个类似的答案,但是当侧边栏比内容长时它们都会中断,据我所知,没有办法给它一个独立的卷轴.
理想情况下我喜欢用纯css做这个 - 没有javascript.我确信这是可能的,这是我缺乏技能和知识阻止我正确地做到这一点,所以没有必要添加javascript代码.(我还在添加一个javascript标签,以防万一)
感谢您的帮助!
编辑:所以我的标题显然不需要固定位置.这是新的和改进版本:http://jsfiddle.net/Mwkrw/4/我仍然在努力使用两个可滚动的div.
st-*_*ost 13
神奇的是box-sizing:border-box;.为了与Firefox,chrome <10和safari <5.1兼容,请添加-webkit-和-moz-前缀.IE从8.0开始支持它.
<!doctype html>
<html lang='en'>
<head>
<meta charset='utf-8'>
<title>very structured layout</title>
<style type='text/css'>
* {margin:0; padding:0;}
body {background:#fff; position:absolute; width:100%; height:100%;}
#main {background:#888; height:100%; padding:60px 0 40px; box-sizing:border-box;}
#head {background:#f8f; position:absolute; width:100%; height:60px;}
#left {background:#ff8; float:left; width:250px; height:100%; overflow:scroll;}
#right {background:#8f8; height:100%; overflow:scroll;}
#foot {background:#f88; position:absolute; bottom:0; width:100%; height:40px;}?
</style>
</head>
<body>
<div id='head'>header: width = 100%, height = 40px</div>
<div id='main'>
<div id='left'>left: width = 250px, height = 100%</div>
<div id='right'>right: width = 100% - 250px, height = 100%</div>
</div>
<div id='foot'>foot: width = 100%, height = 60px</div>?
</body>
</html>
编辑:在Andres的解决方案让我意识到我可以实现更大的兼容性之后,我搞砸了一些并提出了一个替代解决方案,我认为这也更直观.它在IE7中不起作用,但它在IE8中有效.
该页面与上面的相同,唯一的变化是CSS被替换为:
* {margin:0; padding:0;}
body {background:#fff;}
#main {background:#888; position:absolute; top:40px; bottom:60px; width:100%;}
#head {background:#f8f; position:absolute; width:100%; height:40px;}
#left {background:#ff8; position:absolute; width:250px; height:100%; overflow:scroll;}
#right {background:#8f8; margin-left:250px; height:100%; overflow:scroll;}
#foot {background:#f88; position:absolute; bottom:0; width:100%; height:60px;}
请注意,对于这两个版本,#head并且#foot需要具有overflow其他属性,visible否则其内容将从页面扩展.
我设法通过首先创建一个纵向和横向100%拉伸的主容器类来获取您在帖子中模拟的布局,这样我们就可以将内容完全拉伸到视口的整个高度.在这个容器div中我创建了另一个容器,并在向所有方向拉伸它时绝对定位top, left, bottom, right,我觉得这种方法更清洁,因为这样我可以轻松定位页眉和页脚而不需要负边距(尝试过这样但是它不起作用).
这是一个布局演示:http://jsfiddle.net/andresilich/gbzTN/1/show,在这里编辑.
和代码:
CSS
html, body {
height: 100%;
}
.main {
*zoom:1;
}
.main, .row-fluid {
height: 100%;
}
.main:before, .main:after,
.column:before, .column:after {
content: "";
display: table;
}
.main:after,
.column:after {
clear: both;
}
.column {
height: 100%;
overflow: auto;
*zoom:1;
}
.column .padding {
padding: 20px;
}
.box {
bottom: 40px;
left: 0;
position: absolute;
right: 0;
top: 40px;
}
.span9.full {
width: 100%;
}
.footer {
height: 40px;
width: 100%;
z-index: 100;
background-color: red;
bottom: 0;
left:0;
right:0;
position: fixed;
}
HTML
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">Project name</a>
<div class="btn-group pull-right">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
<i class="icon-user"></i> Username
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#">Profile</a></li>
<li class="divider"></li>
<li><a href="#">Sign Out</a></li>
</ul>
</div>
<div class="nav-collapse">
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<div class="main clearfix">
<div class="box">
<div class="row-fluid">
<div class="column span3">
<div class="padding">
.. content ..
</div>
</div>
<div class="column span9">
<div class="padding">
<div class="full span9">
.. content ..
</div>
</div>
</div>
</div>
</div>
</div>
<div class="footer clearfix">
<h3>footer</h3>
</div>
编辑:注意到这个解决方案在IE7中没有按预期工作(在IE8及以上版本中完美运行)所以这里是一个条件评论,针对IE8下面的所有内容,应该解决问题并使其按预期工作:
CSS
<!--[if lt IE 8]>
<style type="text/css">
html {
margin: 40px 0px;
overflow: hidden
}
.main {
zoom:1;
}
.column {
overflow-x: hidden !important;
overflow-y: scroll !important;
zoom: 1;
}
.box {
position: relative !important;
min-height: 100%;
height:100%;
zoom: 1;
top:0 !important;
}
.main {
margin: 40px 0px;
}
</style>
<![endif]-->