css - Sidebar Div extend entire height of container

Question

I have one container div holding two sidebars on each side and a content box in the middle. Standard 'blog' layout. The content is way past the sidebars, and the sidebar height stops at my last sentence. How can I extend the height so that is auto extends to the bottom of the page, thus the end of the content box in the middle?

Answer 1

これを行う方法は次のとおりです。

HTML：

<div id="container">
    <div id="main">
        Content...
    </div>
    <div id="sidebar">
        Content...
    </div>
</div>

CSS：

#container {
   width: 1000px;
   background: url(http://yourwebsite.com/images/dot.jpg) repeat;
   overflow: auto;
}
#main {
   width: 70%;
   float: left;
}
#sidebar {
   width: 30%;
   float: right;
}

「dot.jpg」の作り方：

1. Photoshopまたは任意の画像エディタを開く
2. 高さ1px、幅1pxの新しい画像を作成します。
3. 背景を好きな色に変えてください。
4. 画像を「dot.jpg」として保存し、Webサイトの「images」フォルダにアップロードします。

---

動作しませんか？

http://yourwebsite.com/images/dot.jpgにアクセスして、ドット画像が表示されるかどうかを確認してください。「404notfound」エラーが表示された場合は、間違ったURLを使用しています。URLを修正すれば機能します。

ノート：

「yourwebsite.com」を自分のWebサイトに変更します。

幸運を！

Answer 2

CssPlay.co.ukをご覧ください

Answer 3

Unfortunately, there is no fool-proof way of achieving this.

One way to do the following without using JavaScript is via a technique called Faux-Columns.

It basically involves applying a background-image to the parent elements of the floated elements which makes you believe that the two elements are the same height.

More information available at:

A List Apart: Articles: Faux Columns

Answer 4

Basically you can't. If you're trying to get a design element (say a background image) to extend all the way to the bottom, the best way is to fake it. What I mean by this is create a wrapper that wraps all your sidebars and content and make your background image the background of that wrapper. Then it will extend all the way to the bottom.

Another way to do this, if you really want (cringe) is to use tables. But please don't.

Answer 5

さまざまなプロジェクトでこの問題に何度か遭遇しましたが、自分に合った解決策を見つけました。4つのdivタグを使用する必要があります。1つはサイドバー、メインコンテンツ、およびフッターを含みます。

まず、スタイルシートの要素のスタイルを設定します。

#container {
width: 100%;
background: #FFFAF0;
}

.content {
width: 950px;
float: right;
padding: 10px;
height: 100%;
background: #FFFAF0;
}

.sidebar {
width: 220px;
float: left;
height: 100%;
padding: 5px;
background: #FFFAF0;
}

#footer {
clear:both;
background:#FFFAF0;
}

さまざまな要素を好きなように編集できますが、フッタープロパティ「clear：both」は変更しないでください。これはそのままにしておくことが非常に重要です。

次に、次のようにWebページを設定するだけです。

<div id=”container”&gt;
<div class=”sidebar”&gt;</div>
<div class=”content”&gt;</div>
<div id=”footer”&gt;</div>
</div>

これについてのより詳細なブログ投稿をhttp://blog.thelibzter.com/how-to-make-a-sidebar-extend-the-entire-height-of-its-containerに書きました。ご不明な点がございましたらお知らせください。お役に立てれば！

Answer 6

あなたが正しい！良いキャッチ - 100% の高さの宣言は必要ありません! ありがとう :) 2 つの最も重要なことは、サイドバーの背景画像または色がコンテナーの背景画像または色と同じであること、および下部の div (この例では「フッター」) に「clear:both」プロパティがあることです。それ以外はいくらでも編集できると思いますが…