6

cssを使用して単純な2列のレイアウトを作成するのがこれほど複雑だとは思ってもみませんでした。

私がやりたいことは次のとおりです。

  1. コンテンツdivの高さが画面サイズの高さを超える場合、スクロールバーはコンテンツdivにのみ存在します。ユーザーはコンテンツdivをスクロールすることしかできませんが、サイドバーは静的なままです

  2. 2つの列の高さは同じである必要があります

    私のレイアウトは次のとおりです。

<---------------コンテナ------------------->

<-------------------ヘッダー------------------>

<-----サイドバー-------><---------コンテンツ--->

<------------------フッター------------------->

<---コンテナの終わり------------------------->

これが私のcssファイルです：http： //137.189.145.40/c2dm/css/main.css

ありがとうございました/

4

3 に答える 3

2 
#WorldContainer
{
     width: 1000px;
     margin: auto;
     overflow: hidden;
}

.ContentColumn
{
     float: left;
     width: 500px;
     overflow: auto;
}

<div id="WorldContainer">
   <div class="ContentColumn">
        Content goes here!
   </div>
   <div class="ContentColumn">
        Content goes here!
   </div>
</div>

これにより、メインのdivはスクロールできませんが、2つのdiv列はスクロールできるページが表示されます。それらは並んでいます。あなたの質問は正確には明確ではなかったので、うまくいけば、これがあなたが求めていたものです。

編集：サンプルサイトを表示することに応じて。

あなたの問題は本当に簡単です。

すべてのdivには、高さのルールがあります。高 さのheight: 100%; パーセンテージを使用すると、それが含まれるコンテナー、つまり親コンテナーのパーセントになります。ウィンドウ全体の高さのパーセンテージではありません。

すべてのコンテナは高さのパーセンテージを指定しているため、結果は高さ0になります。最も外側のdivに固定の高さを指定すると、問題が解決されます。

追加の編集：

最も外側のdivが常にウィンドウの下部まで伸びることを確認することに関心がある場合、これは絶対配置を使用したcssソリューションです。

#OutermostDiv
 {
    position: absolute;
    top: 0;
    bottom: 0;
 }

このアプローチを使用すると、外側のdivにハードコードされた高さがなくても、計算された高さが発生します。これにより、内側のdivでパーセンテージの高さを使用し、表示されているウィンドウの上から下に伸びる外側のdivを維持できます。

于 2011-10-09T02:33:40.717 に答える
0

コンテナ要素をに設定しoverflow:hidden;、コンテンツdivをに設定する必要があります（水平スクロールバーを非表示にするoverflow:scroll;場合もあります）。overflow-x:hidden;これに伴う問題は、サイドバーとコンテンツが同じ高さになる場合、2つのスクロールバーが必要になることです。1つはコンテンツ用、もう1つはサイドバー用です。

おそらく、サイドバーとコンテンツだけの周りに別のコンテナ要素を使用しoverflow: scrollbar; overflox-x:hidden;、サイドバー/コンテンツの代わりにその要素を設定することで、これを解決できます。

于 2011-10-09T02:26:57.273 に答える
0

display:tableで問題が発生した場合は、とを使用display:table-cellして列を作成することもできますfloat。CSSは次のとおりです。

#container
{
width:960px;
margin:0;
padding:0;
display:table;
}
#sidebar
{
width:300px;
display:table-cell;
}
#content
{
width:660px;
display:table-cell;
}

HTMLは次のとおりです。

<div id="container">

<div id="sidebar">
<!-- Sidebar Content Here -->
</div>

<div id="content">
<!-- Content Here -->
</div>

</div>

これで問題が解決することを願っています。ただしdisplay:table、一部の古いブラウザでは機能しません。

于 2011-10-09T07:39:45.853 に答える