2

私はcssを初めて使用しますが、問題があります。サイドバーのコンテンツの高さを本体と同じか同じ高さにしたいと思います。私は現在使用していますが、それは記載の高さのためだけに良いです：

   min-height: 240px;

あなたはここでサイトを見つけることができます：http：//jsfiddle.net/ZPvLb/

本文が表示されるまでページを下にスクロールし、右側にサイドバーが表示されます。違いを見ます？

これを行う方法についての提案やヘルプはありますか？ありがとう！

4

4 に答える 4

2

Javascriptが無効になっていることに人々が実際に懸念しているとは信じられません。それはそのような存在しない問題です。FrankGに同意します。JSを無効にすることも選択肢ではありません。

ユーザーがJSを有効にしていないことを心配する必要はありません。それは、ただ休止する必要があります。

于 2013-01-15T23:46:54.917 に答える
1

これはCSSの「聖杯」と呼ばれていますが、これには正当な理由があります。主にCSSの高さの仕組みが原因で、非常に直感的ではありません。

ただし、希望はあります。MatthewTaylorはこの問題について優れた記事を書いていますが、彼のソリューションを使用するには、構造を少し編集する必要があると思います。

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

于 2012-09-01T21:14:36.690 に答える
1

jQueryにタグを付けたので、javascriptを使用してこれを行うことができます。

<script type="text/javascript">
    $(document).ready( function() {
        $('.content', '#side').height($('.content', '#main').height());
    });
</script>

これにより、サイドバーのコンテンツの高さがメインのコンテンツの高さに一致します。これをheadタグ内に配置し、jQueryライブラリを必ず含めてください。

純粋なCSSソリューションは、すでに指摘したように、はるかに多くの作業を必要とします。

jsfiddleに含まれる変更は次のとおりです

于 2012-09-01T21:19:39.760 に答える
0

そこにある多くのソリューションは、機能しないか、複雑すぎます。（これがテーブルでとても簡単であることを考えると、イライラします。）

特に接続速度が遅い場合は、サイドバーのサイズを変更する前にフォントや画像を読み込む機会がなかったため、通常はホームページが壊れています。

まず、CSSを使用してすべての画像の幅と高さを明示的に定義します。画像のサイズを指定しない場合、ブラウザはページの高さまたは幅（テキストを折り返すため）を知る方法がありません。

次に、Webフォントに関しては、これが私の解決策です。jQueryを使用してコンテンツを所定の位置に「スライド」させるだけです。これは、ホームページで1回だけ発生する必要があります。

$(function() {
    $("#content").slideDown('slow').promise().always(function(){
        $("#sidebar").height($("#content").height()); // drop sidebar down
    }); // Just show homepage content
});

確かに、あなたのページは異なります。より完全な例を次に示します。

基本的に、サイドバーは所定の位置にスライドした後にサイズ変更されます。これにより、フォントが読み込まれる前にサイドバーのサイズが短くなりすぎないようにします。

于 2014-11-11T01:20:15.990 に答える