0

Google マップに似たレイアウトの Web サイトを構築しています。ヘッダー、左側にサイドバー、右側に地図があります。

Google マップの Web サイトでは、サイドバーのコンテンツが画面の高さを超えると、横に垂直スクロールバーが表示されます (たとえば、検索ボックスに「レストラン」と入力した場合)。私は同様の効果を達成しようとしており、さまざまなオプションを試しましたが、何も正しく機能していないようです. サイドバーの高さを に設定するautoか100%、サイドバーがページの上部から始まらないため機能しません - 垂直スクロールバーが短すぎてページの下部に到達しない (auto高さの場合) または長すぎますページの高さを超える（高さの場合100%）。Google は 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 に答える