フレームを CSS に変換できないのですか?助けが必要です

StackOverflow https://stackoverflow.com/questions/2411493

  •  18-09-2019
  •  | 
  •  

質問

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 で行うこと:下部のスクロール ウィンドウは上部のメニュー ウィンドウの下に適切に配置されていますが、右側には画面全体のスクロール バーがあり、テキストの下部に到達するには両方のスクロール バーを使用する必要があります。(これは、Firefox で動作させるためにすべての時間を費やしたため、IE 8 で試した唯一の例です。)

私は、言及しきれないほど多くのオンラインのアイデアを試してきましたが、TLDR のコメントのせいで、実際に試したことを削除してしまいました。

含まれている 2 つの HTML ファイルでは、 divどこにでも、実質的にテキストのすべての行に、いくつかの position:absolute 宣言。(私が書いたわけではありません...) 2 番目の HTML ファイルでもテーブルが使用されています。付属のコードをご覧になりたい場合は、その URL を提供しますが、投稿は希望しません。

役に立ちましたか？

解決

次のようなものを使用することを検討します：

<!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 PXトールであり、ページの左上、及び右側と面一となるヘッダ部をもたらします。ボディは、ページの残りの部分を占め、それぞれの側に10ピクセルのパディングを持っています。 DOCTYPE宣言（最初の行）が必要であることに注意してください。

注：最も近代的なブラウザでは、このページで正常に動作しますが、このページはIE6で正しく表示されません。 IE6は、固定されたポジショニングをサポートしていません。

他のヒント

そこを見て、コードがたくさんある、とコメントで示されているように、それを読み込もうとしているとき、私は「TLDRエラー」を得た。
物事が「間違っている」動作しているとき、私の経験では、言っていること、それは、HTMLが複雑すぎるため、一部のアンバランス要素がある、またはそれに近いが不足している要素があるである。
その時に見ていることから始め、それすべての作品ならば、あなたはフレームワークを使用して試みることができる、ExtJSのとYUIの両方が、彼らはかなりヘビー級解決策になることができていても、あなたが探している正確に何を達成レイアウトマネージャを持っています。

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

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top