0

私を困惑させているフロントエンドのウェブ開発の専門家に質問があります。

私のページには、ページの右側に固定されたサイドバーがあり、次にブラウザウィンドウの幅よりも多くを占めるコンテンツの大きなブロック（固定幅）があります。問題は、divの右端のコンテンツが、固定サイドバーの後ろにあるために表示されないことです。

これは、jsFiddleでの私の問題の非常に簡略化された例です。

編集： これが私の問題のより完全な例です。

padding-right： "width of sidebar" pxを本文またはラッパーdivに適用するか、margin-right： "width of sidebar" pxをコンテンツdivに適用するだけで問題が解決すると思いましたが、どちらも機能しません。CSSでこの効果を達成する方法がない限り、フィラーdivを挿入することに頼りたくありません。

グーグルなどで問題を検索しましたが、右側から空白を削除する方法についての質問しか見つかりませんでした。これは、私がやりたいことの反対です。

このスタンパーを解決できる人に感謝します！

編集：なぜ私が単に物事を異なって設定することができないのかについての複数の質問を見た後、私が達成しようとしていることのより詳細な例を示すことによって明確にしたいと思いました。あなたはここでそれを見ることができます。テーブルの列は固定幅である必要があり、最後の列の全内容を表示できるようにしたいと思います。それが物事を明確にするのに役立つことを願っています！

4

4 に答える 4

1

あなたはすでにjqueryソリューションを思いついたと思いますが、単純なcssルールでうまくいくと思います。

tr td:last-child { padding-right: 100px; }

固定された右側のサイドバーの幅に等しいtd、それぞれの最後にパディングを設定するだけです。tr

于 2012-07-09T18:53:06.013 に答える
0

ラッパーの位置を絶対位置にし、左0と右を110pxにしました。これは、ラッパーの代わりにコンテンツdivに配置することもできます。ヒントを与えるために... http：//jsfiddle.net/aHKU5/98/を参照してください

#wrapper {
    position: absolute;
    left: 0px; right:110px;
    border: 1px solid red;
}

編集 コンテンツが900pxを超えないようにする最大幅のバージョンも作成しますが、スペースが少ない場合はサイドバーも尊重します... http://jsfiddle.net/aHKU5/102/

#wrapper {
    position: absolute;
    left: 0px;
    max-width: 900px;
    margin-right: 110px;
    border: 1px solid red;
}
于 2012-07-09T14:33:53.890 に答える
0

固定幅が必要なことはわかっていますが、これはユーザーの画面解像度を気にすることなく、私が信じているとおりに機能します。float：rightとwidth：100％を追加しました。コンテンツdivに、それは私には良さそうです。このコードを試してください：

#content {
border: 1px solid #444;
background: #aaa;
height: 400px;
width: 100%;
float:right;
}
于 2012-07-09T14:52:48.627 に答える
0

だから私は自分の問題の解決策を見つけました。jQueryを使用して、本文の幅をテーブルの幅に右側のサイドバーの幅を加えたものに設定しました。チャームのように働いた。

将来の開発者が同じ質問でこのページに出くわした場合に使用したコードは次のとおりです。

$（'body'）。css（'width'、$（'table'）。width（）+ 150 +'px'）;

ここで、150はサイドバーの幅です。

于 2012-07-09T15:57:32.300 に答える