5

2 ページ内 + コンテンツ外にコンテンツを移動するために、この問題を回避する方法がわかりません。

私は次のレイアウトを持っています：

  • ヘッダー + フッター
  • 本
  • 固定幅と高さのページ。

ページスクロールバーなしでメインスクロールバーからページコンテンツをスクロールしたい(gmailの作成例のように)

主な問題は. 本はヘッダーの後に表示されます。ユーザーが小さい画面解像度を使用している場合は、下にスクロールして本を正しく表示するためのスクロールバーが表示されます。

次に、コンテンツが互いに異なり、各ページが他のページよりも長くなる可能性がある2つのページがあります。そのため、再びフッターに戻る前に、すべてのデータをスクロールしたいと考えています。

jsFiddle Example: http://jsfiddle.net/7vqzF/2/

css だけでこれを解決するのは素晴らしいことです。

レイアウト構造: (ソリューションには、メイン ブラウザのスクロールバーが 1 つだけあり、そこからページと外部の本のコンテンツを制御する必要があります。) レイアウト構造

4

3 に答える 3

6

あなたの質問が正しければ、あなたは CSS 属性を探していますfixed。これは、あなたが求めていることを正確に行うかもしれない CSS を含むいくつかの HTML です:

<html>
  <head>
    <style>
      body {
        margin-top: 150px;
      }

      .header {
        width: 100%;
        position: fixed;
        top: 0;
        background-color: white;
        border-bottom: 2px solid lightblue
      }

      .footer {
        width: 100%;
        position: fixed;
        bottom: 0;
        background-color: white;
        border-top: 2px solid lightblue
      }

      .book table td {
        vertical-align: top;
      }

      .page1, .page2 {
        border: solid 1px red;
        width: 400px;
      }
    </style>
  </head>

  <body>
    <div class="header">
      <h1>Header</h1>
      <ul>
        <li>home</li>
        <li>contact us</li>
      </ul>
    </div>

    <div class="book">

      <table>
        <tr>
          <td>
            <div class="page1">
              <h2>Page1</h2>
              scroll from main scrollbar<br/>
              scroll from main scrollbar<br/>
              scroll from main scrollbar<br/>
              ...
            </div>
          </td>
          <td>
            <div class="page2">
              <h2>Page2</h2>
              scroll from main scrollbar<br/>
              scroll from main scrollbar<br/>
              ...
            </div>
          </td>
        </tr>
      </table>
    </div>

    <div class="footer">
      My Footer
    </div>     

  </body>
</html>

上記の HTML を表示しているブラウザのスクリーンショットを次に示します。 ここに画像の説明を入力

Browser-Scrollbar は、page1/page2 要素のみをスクロール<div>し、ヘッダー要素とフッター要素はスクロールしません。

最後に、オンライン デモのjsFiddle リンクを示します。

于 2013-08-21T10:07:44.183 に答える
1

固定する必要があるヘッダー部分を別の div に配置し、これらのスタイルを適用します。

  <div class="fix">
    <h1> Header</h1>
    <menu><ul><li>home</li><li>contact us</li></ul></menu>
    </div>
.fix{
 position:fixed;
    top:0px;
    left:0px;
    background:#FFF;
    width:100%;
    border-bottom:1px solid black;
}

スペースのために、ヘッダーの下部に別の div を追加します

<div class="space"></div>
.space{
 width:100%;
 height:150px;   
}

ここにjsfiddleがあります。

于 2013-08-27T10:52:51.750 に答える
0

純粋な CSS を使用し、テーブルを使用しない次のアプローチを使用できます。

ここでオンライン デモを参照してください。

結果：

例

ただし、ドキュメント構造を少し変更する必要があることを意味します (私は HTML5 要素を使用していますが、必要に応じてこれを通常の div に簡単に変更できます)。構造がかなり単純であることがわかります。

<header>Header
    <nav>Menu</nav>
</header>

<main>
    <div class="page">
        <h3>Page 1</h3>
        scroll from main scrollbar
        ....
    </div>
    <div class="page">
        <h3>Page 2</h3>
            scroll from main scrollbar
            ....
    </div>
</main>

<footer>Footer</footer>

メインスクロールバーを使用して「両方の」ページをスクロールできるように、これをスタイリングするだけです。このコンテキストで不可欠なクラスは次のとおりです。

.page {
    float:left;
    margin:70px 10px 50px 10px;
    border:1px solid #000;
    width:45%;
}

クラスの重要な部分は、pageヘッダーとフッターに一致するように上下の余白が設定されていることです。これが、ヘッダーとフッターが固定されていても、2 つのページが表示される理由です。

CSS の残りの部分は、たとえば次のとおりです。

html, body {
    width:100%;
    height:100%;
    margin:0;
    padding:0;
}
header {
    position:fixed;
    top:0;
    width:100%;
    height:70px;
    font:32px sans-serif;
    color:#fff;
    background:#555;
}
nav {
    position:absolute;
    bottom:0;
    font:12px sans-serif;
}
footer {
    position:fixed;
    width:100%;
    bottom:0;
    height:50px;
    background:#555;
}
于 2013-08-28T07:40:00.390 に答える