【问题标题】:Create fixed sidebar and fixed menu bar with css/html with "browser chosen width/height"使用“浏览器选择的宽度/高度”使用 css/html 创建固定侧边栏和固定菜单栏
【发布时间】:2020-02-14 21:56:23
【问题描述】:

我想用 bootstrap 创建一个固定的侧边栏和固定的菜单栏和一个内容页面,比如这个例子:

对于菜单栏,我使用以下 css(有效)

.fixed-top {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 0;
}

但是我应该为侧边栏使用什么 css 呢?因为我不知道菜单栏的高度(我不想明确设置它,而是让浏览器选择)。如何将侧边栏附加到菜单栏底部?

.fixed-left {
  position: fixed;
  left: 0;
  z-index: 0;
  .... (how to set it fixed to the bottom of the menubar?)
}

谢谢!

【问题讨论】:

  • 尝试将top: 0bottom: 0添加到.fixed-left

标签: css bootstrap-4 angular-ui-bootstrap


【解决方案1】:

修改.fixed-left中的一些css

.fixed-left {
  position: fixed;
  top: 0; // set it equal as the height of fixed-top 
  bottom: 0; // so that it will stick to bottom
  left: 0;
  z-index: 0;
  overflow-y: auto; // it will have the scroll if it has more content
  width: 250px; // set as per your requirement
}

【讨论】:

  • 谢谢 - 但是上面示例中的“搜索框”会移动到菜单栏下方。如何避免?
  • @Defarine 您可以将margin-top 添加到search-box,或者您可以将padding-top 添加到fixed-left。解决方案可能会根据您的标记和要求而有所不同。
猜你喜欢
  • 2014-04-19
  • 1970-01-01
  • 2015-08-13
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多