css - 定位 div 的问题

Question

我正在尝试使用流畅的 2 列布局(下面的链接)。我有几个问题!

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

1) 我希望我的 tab-wrapper 始终扩展页面的整个高度(不确定为什么它不起作用)

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>

Answer 1

首先要使元素 100% 高度，您必须将 100% 应用到正文和 html。

我认为您可以通过定位实现所需的功能。我做过类似于一个元素的事情，它适用于每个浏览器。我很快就完成了这项工作，但它应该会给你一个想法:

此处演示: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;
}