Milligram: 如何使用我的侧边栏将其他元素推到右边？

创建于 2017-10-27 · 5评论 · 资料来源: milligram/milligram

我想创建一个简单的侧面导航，占据整个屏幕的高度。我在用
我的基地的毫克数，我希望我的侧导航能够使用它。我有以下设置：

代码笔演示

如您所见，我的侧边栏是以下元素

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

具有以下样式：

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

这种作品，侧边栏出现在所有其他东西之上，但其他一切都不会被推到一边。如果屏幕很小，内容会与侧边栏发生冲突。

我怎样才能使侧边栏将其他所有内容（包括导航栏）向右推 250 像素（其宽度）？我知道这会使小屏幕上的东西无法使用，但我会给用户一种切换它的方法。

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 属性：

如果您对如何使用Milligram Grid有任何疑问，请告诉我。

cjpatoilo 于 2018-02-07

👍1

@fooksupachai目前，我将关闭此问题。
如果您需要帮助，请随时重新打开或打开新问题。

cjpatoilo 于 2020-05-19

此页面是否有帮助？

0 / 5 - 0 等级