2

私は100％の高さと幅のウェブサイトを開発しています。左側にパネルが貼り付けられ、右側にメインコンテンツ領域があり、スクロール可能です。

ただし、コンテンツ領域では、内部の最後のdivが切断されています。理由がわかりません。私はこれをFirefoxとChromeでテストしましたが、どちらも同じことをしています。

これを確認するためのリンクは次のとおりです： 削除されました

ご覧のとおり、それは切り取られており、大きなマージンボトム（50px +）を追加すると修正されるようですが、それは見栄えが悪いだけです。

PS：画像の欠落について心配する必要はありません。これは、Webサイト全体ではなく、このページのみをアップロードしたためです。

前もって感謝します

4

3 に答える 3

5
  1. 高さ：100％; ほとんどのブラウザでかなり一貫性がありません。それを避けるようにしてください。
  2. レイアウトが通常どのように機能するかは完全にはわかりませんが、オーバーフローの設定：非表示。CSSリセットのすべてで、最初から物事が不安定になります。

「オーバーフロー：隠し」を取り出します。そしてあなたは問題を見ることができます。コンテンツペインは体の高さと一致しているため、ページ下部の「topBar」の高さが失われています。ボディがオーバーフローを隠しているからです。

于 2012-06-01T16:55:27.153 に答える
2

うん-overflow：scrollを試してください。またはoverflow：visible; さらに、float：right ;,'cosを使用せずに動作させることができるかどうかを確認します。これにより、通常の流れから抜け出し、ボックスの調整で大混乱を引き起こす可能性があります。

ETA：問題があると思います。小さなコンテンツdivのそれぞれには、左右にフロートがあり、マージンが役に立たなくなります。'ブラウザに関する限り、各ボックスのコンテンツはページの通常のフローから外れています。

ETA（2）：オーバーフローがあります：非表示。大きな最初のルールでは、100の異なる要素のようなデフォルトのスタイルを設定します。それがあなたの主な問題です。それをoverflow：visibleに変更します。（またはあなたが好むものなら何でも）そして他の場所で適切なオーバーフロープロパティを設定すればあなたは良いはずです。これを行うことで問題を軽減することができました。まだ微調整が必​​要ですが、それで基本的な問題は解決します。私もインラインフロートを取り除くでしょう。

于 2012-06-01T17:03:13.940 に答える
0

main-style.cssの5行目から：

overflow:hidden

およびmain-style.css行127：

overflow-y:auto

どちらもページの下部を切り取っています。ただし、これを修正すると、ラッパーdivがウィンドウの高さの100％まで伸びておらず（ページが終了する前に背景のグラデーションが停止するため）、メインdiv内のコンテンツが不安定になります。これらは、他の投稿者があなたのページを正しくフォーマットする上での大きな障害であると議論していることです。

こちらのJsFiddleをご覧ください。 Chrome、FF、IE 6-8、Safariで動作します。

100％の高さの問題を修正する方法はまだわかりませんが、float divコンテンツの問題を解決するには、左右のfloatedコンテンツの両方で50％の幅を宣言するようにしてください（また、右のfloatedコンテンツを作成することもできます）text-align:rightそれを本当にdivの右側にとどまらせるために）。

 <div class="centerText messageWrapper">
        <div class="messgaeHeader">
            <div style="float:left; width:50%">
                From: 12345678<br />
            </div>
            <div style="float:right; width:50%; text-align:right">
                Date: 123456789<br />
            </div>

        </div>
        1234567890
 </div>

おそらく誰かが、これが現在引き起こしている100％の高さの問題の修正でチャイムを鳴らすことができます。これは完全な答えではなく、私の解決策は別の方法でページを壊しますが、おそらくそれはあなたや解決策を持っているかもしれない他の誰かへの出発点になるでしょう。

于 2012-06-01T17:55:07.543 に答える