0

我正在构建一个布局类似于谷歌地图的网站：标题、左侧的侧边栏和右侧的地图。

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

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

4

2 回答 2

2

您可以使用包含以下内容的 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，您应该立即获得滚动操作。

于 2009-08-01T03:38:59.617 回答
0

我最终使用了 ui.layout jquery 插件，它非常适合我：http ://layout.jquery-dev.net/index.html

于 2009-08-01T06:02:33.663 回答