Milligram: サイドバーを使用して他の要素を右に押すにはどうすればよいですか？

作成日 2017年10月27日 · 5コメント · ソース: milligram/milligram

画面全体の高さを占めるシンプルなサイドナビゲーションを作成したいと思います。私は使っている
私のベースのミリグラム、そして私は私のサイドナビがそれで動作することを望みます。私は次の設定をしています：

Codepenデモ

ご覧のとおり、私のサイドバーは次の要素です

<div class="sidebar"></div>

次のスタイルで：

div.sidebar { 
      position: absolute; width: 250px; 
      height: 100%;
      z-index: 99; 
      background-color: black;
 }

この種の作業では、サイドバーが何よりも表示されますが、他のすべてが横に押し出されることはありません。また、画面が小さい場合、コンテンツはサイドバーと衝突します。

サイドバーが他のすべて（ナビゲーションバーを含む）を250px（幅）だけ右に押すようにするにはどうすればよいですか？これにより小さな画面では使用できなくなることはわかっていますが、ユーザーに切り替える方法を提供します。

Hacktoberfest help wanted

ソース

fooksupachai

👍1

全てのコメント5件

私もこの問題を見つけました。うまくいけば、誰かがこの問題を手伝ってくれるでしょう。

abc985 2017年12月14日

フレームワークの問題ではありません。あなたが本質的に求めているのは、キャンバス外のサイドバーです。私はあなたのCodepenをそれが機能するように変更しました： https ：//codepen.io/chillyorange/pen/EQYJvQ

サイドバーに固定位置を適用し、サイドバーの幅に一致する左マージンで追加の要素内にコンテンツをラップしました。

chillyorange 2018年01月29日

👍1

@chillyorangeの応答はあなたの問題を解決する

修正されたアイテムは下にスクロールしません。したがって、サイドバーの高さは必要に応じて100％になります。

umitkucuk 2018年01月29日

@fooksupachai私はあなたを助けることができます！

position: absoluteを定義すると、この要素は他の要素とオーバーラップします。ミリグラムグリッドを使用して、期待どおりの動作を試みることができます。

ミリグラムグリッド：

位置CSSプロパティ：

ミリグラムグリッドの使用方法についてご気軽にお問い合わせください。

cjpatoilo 2018年02月07日

👍1

@fooksupachaiとりあえず、この問題を閉じます。
サポートが必要な場合は、お気軽に再開するか、新しい問題を開いてください。

cjpatoilo 2020年05月19日

このページは役に立ちましたか？

0 / 5 - 0 評価

Milligram: サイドバーを使用して他の要素を右に押すにはどうすればよいですか？

全てのコメント5件

関連する問題