0

私は、私が推定しているように、単純な問題であると考えています。ページに独自の色のサイドバーがあり、メインコンテンツ領域のテキストに基づいて拡大縮小し、ナビゲーションバーからフッターまで伸びるようにしたいと思います。高さを設定してみましたが、コンテンツ領域全体の下部に大量の空白が必要になります。サイドバーの高さは、メインエリアのコンテンツの量によって決まります。

サイドバーのCSSは次のとおりです（さらにコードを投稿する必要がある場合はお知らせください）：

.LeftSidebar
{
float: left;
background-color: #1b619c;
color: White;
width: 175px;
text-align: center;
padding: 20px;
clear:both;
}

私はまだ学ぼうとしているので、どんな助けもいただければ幸いです。前もって感謝します！

4

3 に答える 3

2

あなたが探しているのはcss列です。3列のレイアウトまたは2列のレイアウトを設定するcssラッパーを使用して実行できるオプションがいくつかあります。次のWebサイトを参照してください。

http://matthewjamestaylor.com/blog/perfect-2-column-left-menu.htm

または、CSS3マークアップを使用している場合は、display：tableおよびdisplay：table-cellマークアップを使用して列を設定することもできます。このサイトを参照してください：

http://www.onenaught.com/posts/201/use-css-displaytable-for-layout

div#ContentWrapper { display: table; }
div#LeftSidebar { display: table-cell; }
div#MainContent { display: table-cell; }

クラスを使用する必要があるのは、同じページにそのクラスへの複数の参照がある場合のみであるため、IDを表示しています。

ただし、サイドバー列のcssを変更するよりも少し複雑になります。

于 2012-04-09T14:35:19.547 に答える
0

height:100%jQueryを使用して、ディスプレイ（画面、モニター）のサイズに応じて高さを設定または調整できます。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
function updateView()
    {   
         var obj = $(".LeftSidebar");
         var sc_size = $(window).height()

         var obj_height = sc_size - 90 //90 is example of footer os smthg else height

         $(".LeftSidebar").css({'height': obj_height});
    }
</script>

updateView()やりなさい<body onload="updateView()">

于 2012-04-09T14:34:50.303 に答える
0

サイドバーとしてDIV要素があり、幅が固定されている場合、コンテンツのサイズに応じて自動的に垂直方向に伸びます。

そして私の口があるところにお金を入れさせてください：http：//jsfiddle.net/alexpeta/NkHY5/

于 2012-04-09T14:43:14.540 に答える