0

私は周りを見回しましたが、私が探しているものがまだかなり見つかりませんでした。そのため、この質問が他の場所でまだ回答されていないことを願っています。

とにかく、問題のレイアウトはここにあります。私が達成しようとしているのは、固定幅の左の列と流体幅のコンテンツ領域です。ほとんどの場合、問題なく動作します。ただし、コンテンツがブラウザウィンドウの高さまたは幅を超えて拡張されると、セクションが希望どおりに拡張されないように見えます。上部の灰色のバーがページコンテンツの右側に到達せず、左側の列の高さもページコンテンツの下部に到達しないことに注意してください。

これは、CSSを介して高さを100％または幅を100％に設定することが静的であるという事実に起因すると私は考えていますか？つまり、CSSが呼び出されたときのブラウザウィンドウの高さ/幅が何であれ、保存されます。

その場合は、要素の高さと幅を設定する他の方法を調べる必要があるかもしれません。何か案は？また、ページ内のダミーコンテンツは今のところ画像であることに注意してください。データを非公開にするために、名前などをぼかしたいと思いました。

あなたの助けのすべてに感謝します!!!

4

2 に答える 2

1

このようなものはどうですか...

ただし、左の列は右のコンテンツまでしか移動しません。塗りつぶすのに十分なコンテンツがないときにビューポートの高さまで拡大したい場合は、JavaScript が必要になるか、塗りつぶす繰り返し背景を使用する必要があります。html

デモ: http://jsfiddle.net/wdm954/KyUfN/

<div id="wrapper">
    <div id="left">left</div>
    <div id="right">       
        <div id="content">
        <div id="top">top</div>
            content
        </div>
    </div>
</div>

CSS...

/* clearfix */
#wrapper:after, #right:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    font-size: 0;
}

#wrapper, #right {
    display: inline-block;
}

#wrapper, #right {
    display: block;
    -height: 1px;
}
/* end clearfix */

#wrapper {
    background-color: #000000;
}

#left {
    float: left;
    width: 300px;
    color: #FFF;
}

#right {
    margin-left: 300px;
}

#top {
    height: 100px;
    background-color: #DEDEDE;
    border-bottom: 1px solid #B8B8B8;
}

#content {
    background-color: #F4EBEB;
    height: 600px;
    width: 1200px;
}
于 2011-04-17T23:14:02.047 に答える
0

背景が主な問題である場合は、ラッパーのスタイルを設定できます。JS に頼りたくなかったのと、他の解決策がうまくいかなかったので、これは私が手に負えないサイドバーのためにやったことです。私の場合、サイドバーの問題は、テーマの一部である jQuery タブが原因で発生しました。タブに切り替えると、サイドバーが高さいっぱいまで伸びないので、背景も伸びません。

HTML

<div id="wrapper" class="sidebar-right">
    <div id="maincontent">
    #content
    </div>
    <div id="sidebar-right">
    #sidebar content
    </div>
</div>

CSS (これは、280px のサイドバーで 960 グリッドを想定しています)

#wrapper.sidebar-right{
    background: white url('images/bg.png');
    background-repeat: repeat-y; /*repeats down the length of the page*/
    background-position: 680px 0px; /*moves it into place*/
    }

別のサイドバーまたは全幅レイアウトがある場合は、それに応じて背景画像/位置およびスタイルを変更します。それが誰かを助けることを願っています。

于 2013-02-01T01:58:38.070 に答える