1

ここに画像の説明を入力

この画像のようなページを作成しようとしていました。しかし、私はサイドバーで立ち往生しています。左右に浮かせてみました。しかし、いくつかのトリッキーな問題があります！サイドバーを絶対配置にしてみました。しかし、コンテンツ領域が大きい場合、サイドバーの背景がコンテンツ領域に追いついていません。

これの基本的な構造を作成するのを手伝ってくれる人はいますか?

これは私が使用したものです！

aside{
    width: 215px;
    background: #f9f9f9;
    padding:5px 0;
    padding:5px;
    position: absolute;
    top: 128px;
    bottom:0;
    left: 0     
}
.main .content{
    background:#fff;
    padding:5px;
    margin-left: 195px;
    height:100%;
}
4

3 に答える 3

2

サイドバーの絶対配置とコンテンツのマージンでそれを行うことができます: http://jsbin.com/ucihul/1/edit

主なプロパティは次のとおりです。

  1. サイドバーとコンテンツの両方の親要素:position: relative

  2. サイドバーで:

    bottom: 0;
left: 0;
position: absolute;
top: 0;
width: 215px; /* or whatever your fixed width is */

  3. コンテンツ div: margin-left: 215px(または固定幅が何であれ)

追加のコントロールのために、サイドバーとコンテンツの両方に内部 div を含めることもできます (それらは私のデモに含まれていますが、私は何もしませんでした)。

于 2012-10-11T19:34:16.233 に答える
0

これを行う最も簡単な方法は、グラフィカルです。「.main」領域と同じ幅で高さ 1 ピクセルの画像を作成し、div の設定幅に応じて適切に色付けします。

.main{
    background:url(images/image.png) top center repeat-y;
}
aside{
    width: 215px;
    padding:5px 0;
    padding:5px;
    position: absolute;
    top: 128px;
    bottom:0;
    left: 0     
}
.main .content{
    padding:5px;
    margin-left: 195px;
}
于 2012-10-11T19:26:44.270 に答える