問題タブ [fluid-layout]

次のマークアップとcssをコピーして貼り付けると、効果を確認できます。

問題は「フッター」部分にあります。

これで、「column1」と「column3」が絶対的に配置されます。

「column2」が最も高い場合にのみ機能します。

すべての条件下で「フッター」がcolumn1〜column3とインターリーブしないようにするにはどうすればよいですか？

マークアップ：

css：

[Fixed][Liquid][Fixed] クロスブラウザ対応のレイアウトが欲しいです。

HTML:

CSS:

これは機能しますか/より良い方法ですか？

Web アプリケーションでDojoXの DataGrid コンポーネントを使用することを検討しています。私が抱えている問題は、流動的な (別名液体) CSS レイアウトではうまく機能しないように見えることです。事前定義されたすべての幅が好きなようです。実際、ドキュメントは列機能の自動幅について警告しており、テーブル自体に動的な幅と高さを使用しようとすると失敗しました。

流動的なレイアウトでこのコンポーネントを使用する人はいますか? より良い仕事をする他の JavaScript データ グリッド コンポーネントはありますか (ページネーションとセル編集が必要になります)。

それとも、この問題は JavaScript と CSS レンダリングのコンテキストで解決するのが難しすぎるのでしょうか?

教授のために Web サイトを開発していますが、Firefox の CSS に問題があります。Web サイトは流動的な幅/高さになるように設計されているため、どの解像度でも画面いっぱいに表示されます。そのため、高さと幅に多くのパーセンテージを使用しています。ただし、画像に問題がありました。

http://projects.mediabounds.com/i.bradley.edu/

サムネイルの上部バーは画像をスケーリングする必要がありますが、Firefox では機能しません。画像は元の高さ 100% のままです。Safari では問題なく動作します (Internet Explorer については知りません)。高さを 100% に、幅を自動に設定しました。画像を div の高さの 100% にスケーリングし、それに応じて幅を調整することを期待しています。

誰かが私が見逃したことを指摘できますか?

私はこのfluidgridシステムを使用しています：http://fluid.newgoldleaf.com/

列の最初のコンテンツ要素が画像タグの場合、次の列のコンテンツがドロップダウンするという問題があります。

最初のコンテンツ要素が段落や見出しなどで、2 番目のコンテンツ要素が画像タグである場合にのみ機能します。

なんで？:-)

ありがとう。

現在、Fluid 960 を使用していますが、アルファ/オメガで奇妙な動作が発生しています。私のアルファ/オメガの理解は、ネストされたグリッドの左/右マージンを修正するために使用されるということです。

ただし、ネストされたグリッドのペアにアルファ/オメガを適用すると、左側のグリッドには非常に浅いインデントがあり、右側のグリッドには大きな右側のインデントがあります (視覚的な観察)。何が起こっているか知っている人はいますか？

ここで使用されているものと同じソフトウェアhttp://us.gn.bartal.org/を使用して、HTML + CSS で固定幅/高さのツリーマップを作成しました。

JavaScript 関数を使用して、すべてのピクセルの絶対位置とサイズをパーセンテージに変換することで、弾力性を持たせたいと考えています。

どのように進めることをお勧めしますか? 利用できる jQuery/Prototype/Dojo マジックはありますか?

ブログで取り組んでいる新しいテーマで流動的なレイアウトを使用しています。私はよくコードについてブログを書き<pre>、投稿内にブロックを含めます。float: leftコンテンツ領域の列にmax-widthは、列が特定の最大幅で停止し、縮小することもできるようになっています。

私が欲しいのは、<pre>要素をテキスト列よりも広くして、水平スクロールバーなしで80文字でラップされたコードを収めることができるようにすることです。<pre>しかし、流動性に影響を与えることなく、要素をコンテンツ領域からオーバーフローさせたいと思います。

ただし、そこmax-widthにオーバーハングを挿入すると、流動性がなくなります。ブラウザをその幅を超えて縮小しても<pre>、列の幅は指定されたままになります。max-width

この最低限のシナリオで問題を再現しました。

次のいずれかを実行すると、流動性が回復することに気付きました。

1. <pre>（doh ...）を削除します
2. を削除しますfloat: left

私が現在使用している回避策は、<pre>要素を投稿列の「区切り」に挿入して、投稿セグメントとセグメントの幅<pre>が相互に排他的に管理されるようにすることです。

しかし、これ<div>により、意味的に元の状態を維持したいポストマークアップに追加の終了要素と開始要素を挿入する必要があります。

float: left確かに、ボックスモデルがコンテンツが溢れているフロートでどのように機能するかを完全に理解していないため、コンテナ上とその<pre>内部の組み合わせがコンテナの機能を損なう理由がわかりませんmax-width。

Firefox / Chrome / Safari/Operaでも同じ問題が発生しています。IE6（クレイジーなもの）はいつも幸せそうです。

これも癖/標準モードに依存していないようです。

アップデート

max-width要素にが含まれている場合は無視されるように見えることを確認するために、さらにテストを行いましたfloat: left。W3Cボックスモデルの章をちらっと見ましたが、この動作についての明確な言及はすぐにはわかりませんでした。ポインタはありますか？

ウィンドウサイズを変更すると要素のサイズが変更されるページを（無駄に）作成しようとしています。私はそれを画像のcssで問題なく動作させていますが、テキストでは同じことを達成できないようで、CSSでもそれが可能かどうかはわかりません。そして、これを実現するjqueryスクリプトが見つからないようです。

ユーザーがウィンドウのサイズを変更するとき、ユーザーがページズームを呼び出さなくても、基本的にページを動的かつ流動的に拡大縮小する必要があります。これは、cssを介した私のimg divで正常に機能しますが、同じサイズのままのテキストでは機能しません。

何か案は？