0

現在、サイトの 2 つの主要部分を配置するために 1 つのテーブルを使用しています。今、私に問題を引き起こしているので、純粋な CSS を使用したいと思います。

左側に 205px 幅のナビゲーション バー列があります。右側の残りのスペースを占有して、コンテナが必要です (したがって、画面の右側に、画面幅 - 200 ピクセルを占めます) このコンテナには固定の高さはありませんが、その上部が必要ですナビゲーションバーの上部に合わせます。

ここに私が現在持っているもののデモがあります。

ソリューションをそれに似たものにしたいのですが、テーブルを使用せず、コンテナの上部をサイドバーの上部に合わせます。

私はこれを何度か試みましたが (テーブルの使用を開始する前と後で)、どれもリモートで機能しませんでした。私は最後の手段としてここに来たので、誰かが助けてくれることを願っています.

4

2 に答える 2

1

フィドル 

.container{height: 100%; border: 1px solid #0f0; display: table;}
#sidebar{
    width:40%; height: 100%; display: table-cell; background: #ccc;    
}
#sidebar2{
    width:60%; height: 100%; display: table-cell; background: #f00;    
}
body, html {
    height:100%;
}

HTML

<div class="container">
  <div id="sidebar">links and whatnot go here</div>
  <div id="sidebar2">this is the container (but its top is not aligned with the sidebar as I would like)</div>    
</div>

注: table-cell プロパティは support IE8+ でサポートされています

編集: table-cell を使用できない場合は、jquery を使用して高さを計算する必要があります。このフィドルをチェック

于 2012-07-29T16:35:22.473 に答える
0

私はこのようなことをします：

. HTML:

<div id="container">
    <aside id="sidebar">Links and whatnot</aside>
    <section id="content">Content and whatnot</section>
</div>

. CSS:

html, body {
    width: 100%;
    height: 100%;
}

div#container {
    height: 100%;
}

aside#sidebar {
    background-color: #f00;
    width: 205px;
    min-height: 100%;
    float: left;
}

section#content {
    background-color: #0f0;
    min-height: 100%;
}

この fiddleで動作することがわかります。

于 2012-07-29T16:45:12.717 に答える