1

TLDR (長すぎて読めなかった) コメントを受け取ったので、私が試したすべてを含めて、これの 90% を取り除きました。

レイアウトはとてもシンプルです。

-----------------------------------------------------------------
|                                                               |
|   This menu area is fixed and does not scroll up off the page |
|              - NO SCROLL BARS -                               |
|---------------------------------------------------------------|
|                                                               |
|   | ------------------------------------------------------|   |
|   |                                                       |   |
|   |                                                       |   |
|   |      This area, with padding on the left and right,   |   |
|   |      has a scroll bar on its right side (not all      |   |
|   |      the way to the right side of the page), and is   |   |
|   |      attached to the bottom of the browser window -   |   |
|   |      when the bottom of the browser is resized up,    |   |
|   |      this windows shrinks, and scroll bars DO NOT     |   |
|   |      appear on the far right side of the page.        |   |
|   | ------------------------------------------------------|   |
|---------------------------------------------------------------|

フレームを使用して上記を実装するコードは、IE7、IE8、および Firefox 3.6 で動作し、ブラウザーに依存するコードはありません。フレーム コードは、2 つの .html ページを取り込み、上の 2 つの「ウィンドウ」を埋めます。単純。Googleにとってひどい。

動作しない CSS コードの例を次に示します。それらをすべて保存した場合、そのような例は100以上になります。SSI を取り込むために、ローカルで Apache サーバーを実行しています。

<html>
<body>

<div style="float: top; position: fixed; width: 95%; height: 140; border-style: solid">
<!-- SSI code deleted - includes code from another page --> 
</div>

<div style="overflow: auto; top: 100; width: 900; height: 500; background-color:white;
 color:black; text-decoration:none">
<!-- SSI code deleted - includes code from another page -->
</div>

</body>
</html>
  • このコードが Firefox で行うこと: 下部のスクロール ウィンドウがページの上部に表示されます (余白なし)。(大間違いです。) ブラウザ ウィンドウの下部を上に移動すると (ブラウザ ウィンドウが小さくなります)、ページの右側にスクロール バーが表示されます。（違う。）
  • このコードが IE 8 で行うこと: 下部のスクロール ウィンドウは上部のメニュー ウィンドウの下に適切に配置されますが、右側に画面全体のスクロール バーがあり、両方のスクロール バーを使用して下部に移動する必要があります。文章。(これは私が IE 8 で試した唯一の例です。Firefox で動作させるためにずっと時間を費やしてきたからです。)

私はあまりにも多くのオンラインのアイデアを試しましたが、TLDR のコメントのせいで、私が試したことを削除しました。

含まれている 2 つの HTML ファイルdivでは、ほぼすべてのテキスト行で s があらゆる場所で使用されており、いくつかのposition:absolute宣言が含まれていることに注意してください。(私は書いていません...) 2 番目の HTML ファイルもテーブルを使用しています。含まれているコードをご覧になりたい場合は、その URL をお知らせしますが、掲載したくありません。

4

2 に答える 2

3

次のようなものを使用することを検討してください。

<!DOCTYPE html>
<html>
<head>
<title>Your page title</title>
<style>
    .header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 140px;
        overflow: hidden;
    }

    .content {
        position: absolute;
        top: 150px; /* 140px (header) + 10px top padding */
        left: 10px; /* 10px padding */
        right: 10px; /* 10px padding */
        bottom: 10px; /* 10px padding */
        overflow: auto;

    }
</style>
</head>

<body>

<div class="header">
    <!--#include virtual="/nav2.html" -->
</div>

<div class="content">
    <!--#include virtual="/main2.html" -->
</div>

</body>
</html>

これにより、ヘッダー セクションの高さが 140 ピクセルになり、ページの上部、左側、および右側と同じ高さになります。本文はページの残りの部分を占め、各辺に 10 ピクセルのパディングがあります。DOCTYPE 宣言 (1 行目) が必要であることに注意してください。

注: 最新のブラウザのほとんどはこのページで正常に動作しますが、このページは IE6 では正しく表示されません。IE6 は固定位置をサポートしていません。

于 2010-03-09T19:07:18.317 に答える
0

そこには見るべきコードがたくさんあり、コメントに示されているように、それを読み取ろうとしているときに「TLDRエラー」が発生しました。
そうは言っても、物事が「間違った」動作をしている私の経験では、それは html が複雑すぎるか、バランスの取れていない要素があるか、閉じられていない要素があるためです。
ExtJS と YUI はどちらも、非常に重いソリューションになる可能性がありますが、探しているものを正確に実現するレイアウト マネージャーを備えています。

YUI レイアウト マネージャー: http://developer.yahoo.com/yui/layout/
ExtJS レイアウト マネージャー: http://www.extjs.com/deploy/dev/examples/layout/complex.html

于 2010-03-09T18:45:04.487 に答える