个人中心
gpt4 book ai didi

css - 固定顶栏 + 100% 高度固定侧边栏？

转载 作者：行者123 更新时间：2023-11-28 17:50:33 27 4
gpt4 key购买 nike

我想知道如何为带有边栏的固定导航栏标记制作适当的布局。我要实现的目标:

  1. 固定导航栏
  2. 固定右栏(侧边栏)
  3. 流体左列(内容)

边栏

除导航栏外，侧边栏高度始终为窗口高度的 100%。当侧边栏内容高度大于侧边栏高度时，我需要滚动它的内容。在侧边栏滚动的终点(然后侧边栏滚动到底部)我希望主要内容开始滚动，反之亦然。

这是布局:

enter image description here

我现在得到的是:http://jsfiddle.net/MNN28/1/ 

html,
body {
  width  : 100%;
  height : 100%;
}
body {
  background-color: #f4f4f4;
}
.container {
  width    : 100%;
  height   : 100%;
  overflow : hidden;
}
.navbar {
  position : fixed;
  height   : 45px;
  width    : 100%;
  z-index  : 9;
}
.main {
  position : absolute;
  top      : 45px;
  width    : 100%;
  height   : 100%;
  overflow : hidden;
}
.main-container {
  overflow : scroll;
  width    : 1200px;
  margin   : 0px auto;
}
.main-container-center {
  width    : 600px;
  height   : 100%;
  float    : left;
  overflow : scroll;
}
.main-container-right {
  position    : fixed;
  width       : 600px; 
  height      : 100%;
  float       : left;
  margin-left : 975px;
  overflow    : scroll;
}

这个标记有两个主要问题:

  1. 我不想为内容列设置单独的滚动条，应该是 native 页面滚动。
  2. 内容和侧边栏区域中的一些文本即使在滚动后也会被剪切(我想这是因为导航栏高度)。

如何更正我的标记以使其按预期工作？谢谢。

最佳答案

我认为这就是您所描述的。你可以滚动你的 <body>内容一如既往，并具有最大高度的固定侧边栏。

http://jsfiddle.net/MNN28/2/ 

.container {
  width: 100%;
  height: 100%;
}
.navbar {
  position: fixed;
  height: 45px;
  width: 100%;
  background-color: #262626;
  z-index: 9;
}
.main {
  position: relative;
  top: 45px;
  width: 100%;
  bottom:0;
}
.main-container {
  width: 1200px;
  margin: 0px auto;
  background-color: #e9e9e9;
}
.main-container-center {
  width: 600px;
  top: 45px;
  background-color: #e5e5e5;
}
.main-container-right {
  position: fixed;
  background-color: #d9d9d9;
  width: 600px;
  bottom:0;
  margin-left: 600px;
  overflow: auto;
  top: 45px;
}

关于css - 固定顶栏 + 100% 高度固定侧边栏？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22401876/

27 4 0
文章推荐： javascript - 删除数组中负的重复值
文章推荐： python - 我可以跨 GAE Pipeline API worker 保持状态吗？
文章推荐： ios - Xcode 每次重新打开窗口时意外退出
文章推荐： javascript - 物化模式未显示