Question

我正在尝试设置一个如下所示的布局： enter image description here

我想在项目中使用twitter bootstrap，但我知道它可能不是最好的方式来获得这样的基本布局。我知道如何设置页眉和页脚固定在顶部和底部，但我很难让我的侧边栏恒定宽度并且可以独立滚动。

我目前的实施方法是：http://jsfiddle.net/Mwkrw/3/。

我尝试使用Fixed sidebar navigation in fluid twitter bootstrap 2.0设置固定侧边栏以及堆栈溢出时的其他类似答案，但是当侧边栏比内容长时它们都会中断，据我所知，没有办法给它一个独立的卷轴。

我希望用纯css做这个 - 没有javascript。我确信这是可能的，这是我缺乏技能和知识阻止我正确地做到这一点，所以没有必要添加javascript代码。（我还在添加javascript标签以防万一）

感谢您的帮助！

编辑：所以我的标题显然不需要固定位置。这是新的和改进的版本：http://jsfiddle.net/Mwkrw/4/我仍然在努力使用两个可滚动的div。

Answer 1

魔法在box-sizing:border-box;。为了与Firefox，chrome＆lt; 10以及safari＆lt; 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>

fiddle

编辑：在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;}

fiddle

请注意，对于这两个版本，#head和#foot需要overflow属性而不是visible，如果其内容会延伸到页面之外。

Answer 2

我设法通过首先创建一个纵向和横向100％拉伸的主容器类来获取您在帖子中模拟的布局，这样我们就可以将内容完全拉伸到视口的整个高度。在这个容器div中我创建了另一个容器，并在向所有方向伸展它时绝对定位它top, left, bottom, right，我觉得这种方法更干净，因为这样我可以轻松定位页眉和页脚而不需要负边距（尝试过这样但是没有用。）

以下是布局演示：http://jsfiddle.net/andresilich/gbzTN/1/show，编辑here。

代码：

<强> 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]-->

具有固定页眉和页脚，固定宽度侧边栏和灵活内容的布局

2 个答案: