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％を適用する必要があります。

ポジショニングで必要なことを達成できると思います。私は1つのプロジェクトに似たようなことをしましたが、それはすべてのブラウザーで機能します。私はこれを非常に迅速に行いましたが、それはあなたにアイデアを与えるはずです：

ここでのデモ：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フレームワーク」と呼ばれるものを使用し、レイアウトを修正するためにグリッドコンポーネントを使用することを選択する理由です。これらのフレームワークの作成者/保守者は、フレームワークを多くのブラウザーに準拠させ、この制約内で可能な限りエレガントにする責任があります。

詳細については、 TwitterBootstrapまたは960.gsを参照してください。

明らかに、それがどのように行われるかを知りたい場合は、それらのソースコードを見ることができます。具体的には、960.gsは固定マージン、パディング、フローティングを使用しdivます。

これらのフレームワークのもう1つの良い点は、プラットフォーム間でうまく機能する傾向があることです。それはLinux/Mac / Android / iOs/Windowsなどです。

于 2013-01-28T16:48:54.200 に答える