0

我试图有一个很好的流体 2 列布局（下面的链接）。我有几个问题！

http://jsfiddle.net/En3h8/3/

1）我希望我的标签包装器始终扩展页面的整个高度（不知道为什么它不起作用）

2）我希望我的“主” div 紧贴标签包装，并扩展页面的整个高度，但也填充右侧的其余空间。

任何帮助将不胜感激。我确定这是我错过的一些愚蠢的事情。

CSS

  body{
    font-family: Calibri, sans-serif;
    top:0px;
    left:0px;
    margin:0px;
    padding:0px;
  }
  #page{
    position: relative;
    width:100%;
    height:100%;          
  }
  .tab{
    min-height:75px;
    padding:5px;
    border-bottom: 1px solid #2a2a2a;
    text-align: center;
    color: #717171;
    cursor: pointer;
    line-height:75px;
  }
  .no-icon{
    line-height: 75px;
  }
  .active{
    background-color: #3c3c3c;
    color: #ffffff;
  }
  #tab-wrapper{
    display:inline-block;
    height:100%;
    width:10%;
    border: 1px solid black;
    float: left;
    background-color: #464646;

  }
  #main{
    display:inline-block;
    width:80%;
    height:100%;
    background-color: #dbdbdb;
    padding:30px 20px;

  }
  #footer{
    clear:both;
    width:100%;
    border:1px solid black;
  }

HTML

<div id="page">
  <div id="tab-wrapper">
    <div id="tab1" class="tab active">
      Tab 1
    </div>
    <div id="tab2" class="tab">
      Tab 2
    </div>
    <div id="tab3" class="tab">
      Tab 3
    </div>
  </div>
  <div id="main">
   Lorem ipsum etc
  </div>
</div>
4

2 回答 2

2

首先要使元素的高度为 100%，您必须对 body 和 html 应用 100%。

我认为您可以通过定位来实现您所需要的。我做了类似于一个项目的事情，它适用于每一个浏览器。我做得很快，但它应该给你的想法：

在这里演示：http: //jsfiddle.net/c4Tn7/

HTML

<div id="tab_wrapper">
    <a class="tab">Tab 1</a>
    <a class="tab">Tab 2</a>
    <a class="tab">Tab 3</a>
</div>

<div id="content">
    Mauris pharetra malesuada tempus. Sed faucibus commodo nisi, malesuada sodales sem aliquam vitae. Fusce laoreet elementum mattis. Aliquam vulputate ligula vitae velit condimentum sed suscipit ligula gravida. Sed ullamcorper, mi sed sollicitudin pulvinar, metus enim accumsan nisl, sit amet gravida ante dolor eu mauris. Phasellus in nulla massa, sed porttitor neque. Ut ut ligula vitae ipsum lacinia accumsan et nec elit. Pellentesque congue rutrum hendrerit. Donec sed dolor in ante dignissim tempus. Aliquam vestibulum, mauris sed pulvinar eleifend, eros ipsum vehicula mauris, at pulvinar ligula mi ut magna. Integer et augue et enim semper pharetra. Phasellus et ante diam. Quisque condimentum ultricies quam et auctor. Vivamus dignissim nunc ac augue pretium ac porta nisl iaculis.
</div>

<div id="footer">
    THIS IS FOOTER
</div>

CSS

body,html{
    width: 100%;
    height: 100%;
}
body {
    position: relative;
}
#tab_wrapper {
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 40px;
    width: 100px;
    background: #000;
}
#tab_wrapper .tab{
    display: block;
        min-height:75px;
        padding:5px;
        border-bottom: 1px solid #2a2a2a;
        text-align: center;
        color: #717171;
        cursor: pointer;
        line-height:75px;
}
#content {
    position: absolute;
    top: 0px;
    left: 100px;
    right: 0px;
    bottom: 40px;
    background: #666;
    padding: 20px;
    overflow: auto;
}
#footer {
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
    height: 40px;
    background: red;
}
于 2013-01-28T17:15:29.333 回答
1

这个问题有理论答案，也有实际答案。

理论上的一个提到属性及其语义。

实用的承认一个事实，即许多浏览器不太关心标准行为，尤其是在涉及良好、流畅的布局时，并且您必须为每个浏览器维护许多专业化。

这就是许多人选择使用所谓的“CSS 框架”并使用他们的Grid组件来修复布局的原因。这些框架的创建者/维护者有责任使它们与许多浏览器兼容，并在此约束内尽可能优雅。

查看Twitter Bootstrap或960.gs了解更多信息。

显然，如果你想知道它是如何完成的，你可以看看他们的源代码。具体来说，960.gs 使用固定边距、填充和浮动divs。

这些框架的另一个好处是它们倾向于跨平台运行良好。即 Linux/Mac/Android/iOs/Windows 等。

于 2013-01-28T16:48:54.200 回答