Question

我正在构建一个网站，其布局类似于Google Maps：标题，左侧是侧边栏，右侧是地图。

在Google地图网站上，当侧边栏的内容超出屏幕高度时，旁边会显示一个垂直滚动条（例如，如果您在搜索框中键入“餐馆”）。我正在尝试实现类似的效果，并尝试了各种选项，但似乎没有什么工作正确的方式。将侧边栏的高度设置为auto或100%不起作用，因为侧边栏不会从页面顶部开始 - 垂直滚动条太短而无法到达页面底部（在auto高度的情况下）或太长并且超过页面的高度（在100%高度的情况下）。我认为Google使用JS来计算侧边栏的高度。

关于如何让它发挥作用的任何想法？

Answer 1

您可以将左侧列设为包含以下内容的css的div：

overflow: scroll

如果有任何溢出，则会出现一个滚动条，该div将可滚动。您需要将所有内容包装在固定宽度的div中，这样您就不会获得水平滚动条。

编辑：示例。

<html>
  <head>
    <style type="text/css">
      #example{
        overflow: scroll;
        height: 200px;
        width: 100px;
        border: 1px solid red;
        color: #FFF;
        background-color: #000;
      }
    </style>
  </head>
  <body>
    <div id="example">Hello, World!</div>
  </body>
</html>

现在，如果你替换“Hello，World！”用：

Line One<br />
Line Two<br />
Line Three<br />
Line Four<br />
Line Five<br />
Line Six<br />
Line Seven<br />
Line Eight<br />
Line Nine<br />
Line Ten<br />

如果文本太长而无法填充div，则应立即进行滚动操作。

Answer 2

我最终使用了ui.layout jquery插件，它对我来说很有效：http://layout.jquery-dev.net/index.html

垂直滚动条，用于未知高度的列

2 个答案: