用于修复/浮动左侧输入面板的css样式

Question

我的页面设计了一个页眉，一个页脚，一个带有输入的左面板，一个用引导4输出的右面板。

左面板比右面板短得多。左面板的高度可能高于窗口高度，也可能小于窗口高度。有关整个页面布局的示例，请参见下面的图片。

我想要更新这个设计，以修复/浮动左面板时，右面板滚动向下允许用户可以改变一些输入，即用户可以始终看到左面板。

• 如果窗口高度小于窗口高度，则左侧面板固定/浮动在窗口顶部；如果窗口高度大于窗口高度，则左侧面板固定/浮动在窗口底部。

我不确定我的问题说得很清楚。请让我澄清。

​

​

这是重现我的布局的最起码的例子。

<html>

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>

<body>
  <header style="height:100px;background-color:#ffd800"></header>
  <div class="container">
    <div class="row">
      <div class="col-4" style="background-color:#00ff21;min-height:500px;height:1000px;">
      </div>

      <div class="col-8" style="background-color:#00ffff;min-height:1000px;height:3000px;">
      </div>
    </div>
  </div>
  <footer style="height:100px;background-color:#b6ff00"></footer>
</body>

</html>

Answer 1

你可以用这样的东西：

.col-4 {
  position: sticky !important;
  top: 0px;
  left: 0;
  height: 200px;
}

这样，侧边栏将始终显示。但是，如果您想将侧边栏放在底部，我认为没有javascript就无法做到这一点。

请注意，我使用important覆盖您的内联样式。