2017-02-07 20 views
0

私はページの下部にあるdivを持っていますが、問題は左側のサイドバーと重なっていることです。どうすればそれを覆うことができますか?私は浮き沈みをするのに慣れています:そうですが、何もしていないようです。固定されているので、私は推測しています。私はまた、幅を変更しようとしましたが、それはちょうど右側からそれをカットします。では、サイドバーがないページの残りの部分を取り上げるだけで、どうすればそれを手に入れることができますか?フッターを右に移動するにはどうすればよいですか?

私はこの外観のために撮影しています:Example

.footer {position:fixed; bottom:0; float:right; background-color:lightgray; font-size:90%} 
+0

私は実際のHTMLとCSSを追加する必要があると思います。どのように要素が入れ子にされているかは、レイアウトにおいて重要な役割を果たします。 – Harriet

+0

ネストされているものはありません。 –

+0

あなたのコードでjsfiddleを作成してください。 – Harriet

答えて

0

あなたはあなたのレイアウト

JSFIDDLEを提供していませんでしたので、私はフレキシボックスを使用して少しバイオリンを作ったこと

ためFLEXBOXを使用することができます

0

フッターの固定プロパティは必須ではありません。

また、フッタ要素をブロックとして指定すると、 はスタイルを適用するときに適切な動作を保証します。

.footer {位置:相対;表示ブロック;背景色:#f2f2f2;フロート:右。 font-size:90%;幅:自動;オーバーフロー:隠された; }

私はあなたのサイドバーの正確なサイズではないので、幅はautoに設定されていました。数値に設定するには、何らかの計算を実行する必要があります。たとえば、次のようになります。

サイドバーの幅が30%で、境界線がある場合、幅の合計は30.2%です。

つまり、左に1px、右に1pxの境界があります。

ただし、サイズは境界線の幅によって異なります。

境界線がない場合は、フッターの幅を68.8%または68.75%に設定する必要があります。

+0

私はこれを行うと、フッターはページ上部の見出しのすぐ下にジャンプします。それはなぜですか? –

+0

ほとんどの場合、これはページ上のコンテンツが少ないために発生します。 ''

スタイルを追加フッター前に、この要素を追加します。 '.clear_footer { クリア:両方; float:なし; } ' うまくいけば、これで修正されるはずです。 –

+0

それでもまだ上に移動し、サイドバーと重なっています。サイドバーCSSに何か問題がありますか? .sideBar {カラー:ホワイト;背景色:グレー; float:left;幅:12%;位置:絶対;トップ:0; bottom:0;} –

関連する問題