問題タブ [liquid-layout]

ヘッダー (利用可能なすべての幅と 130 ピクセルの高さを取る)、2 列 (1: 300 ピクセルの幅、可能な限り高さ、2: 列 2 がそれらの間の 300 ピクセルと 15-20 ピクセルのマージンを取った後のすべての利用可能な幅) でリキッド HTML レイアウトを作成しようとしています。 ）。

Atm 私はこれを持っています:

HTML:

CSS:

問題は次のとおりです。より良い解決策はありますか?

ありがとう。

静的ページをモバイル ページに変換する方法があるかどうか疑問に思っています。モバイル ページとは、デスクトップ コンテンツを小さなウィンドウ サイズ (たとえば、スマートフォン サイズ: 320px) にドラッグできるようにすることを意味します。ウィンドウのサイズに合わせてコンテンツを作成しますか? css をどのように変更する必要がありますか? どのように計算する必要がありますか? ありがとう...これを可能にするフレームワークまたはツールが必要だと思いますか?

いくつかのガイドと考えを歓迎します。

私のこの静的な例を確認してください

ありがとう！有/

これは私が持っているものです、私はdivを残し、右のdivを持っています。左のdivは固定幅で、左に浮いています。右側のDivは、全幅にするための「display：block」であり、左側には左側のdivを補正するためのマージンがあります。両方のボックスの高さは固定されており、スクロール可能（中身）である必要があります。Leftdivにoverflow-yを正常​​に追加します。ただし、overflow-y：autoを右側のdivに追加すると、divはdiv全体にまたがりません。

オーバーフローを追加する前に：http： //jsbin.com/asecuy/

オーバーフローを追加した後：http： //jsbin.com/asecuy/2

私はこのナットをクラックしようとして何週間も苦労してきたので、それが不可能なのか、コーディングチョップの欠如なのか、あるいはその両方なのかわかりません. 私はプログラマーではなく、Dojo Toolkit の初心者です。

BorderContainer レイアウトを使用するサイトがあります。ボタンを使用して、コントロールを含むドロップダウン タイプのボックスを開閉できるエフェクトを作成しようとしています。ページの読み込み時にこのドロップダウンを非表示にし、ボタンをクリックすると開く必要があります。

私の問題は、ドロップダウンを開くと、その下のコンテンツ ペインがブラウザ ウィンドウの下部から押し出されることです。ドロップダウンが開いたときにブラウザー ウィンドウの残りのスペースに収まるように、下部の ContentPane が必要です。さらに、ドロップダウンをその下のコンテンツのスクロール可能なコンテナーの外側に配置したいので、その下にネストされた BorderContainer の外側にドロップダウンを配置するように設定しました。

この課題を示すために、コードの簡略化されたバージョンを作成しました (以下のリンクを参照)。ページをロードすると、中央の ContentPane がコンテンツをスクロールすることがわかります。ただし、ボタンをクリックすると、ドロップダウン div がコンテンツの上に展開されます。次にスクロールすると、ブラウザー ウィンドウの下部にある無人地帯にあるため、ウィンドウ全体が表示されないことに気付くでしょう。ロード時にdivがdisplay:noneに設定されているため、ページのロード時にサイズが考慮されていないと思います。次に、ボタンを押して開くと、サイズが追加され、下のペインはサイズ変更または新しい要素の考慮方法を認識しません。

可視性属性を使用してみましたが、まだ閉じているときに div にギャップが残ります。約束を示す高さを制御するコードをいじりましたが、各ドロップダウン ボックスのサイズは異なるため、指定したピクセル サイズではなく、高さを「自動」に設定することをお勧めします。

画面を押し出すことなく下部ペインがスペースに収まるように、これを達成する方法を知っている人はいますか?

ページのサンプルは次のとおりです。

http://equium.com/scaffold.html

(完全な HTML ページをコード サンプルとしてここに挿入しようとすると問題が発生したので、それが望ましい処理方法である場合、また、そのコードをすべて埋め込む最良の方法を誰かが教えてくれれば幸いです。)

事前に感謝します。誰かのフィードバックを本当に感謝します。

私のウェブサイトには 3 つのコンポーネントがあります。

• 画面の幅にまたがる固定高さのヘッダー
• 画面の残りの高さにまたがる左側のヘッダーの下の固定幅のナビゲーション
• 残りのスペースを占有するナビゲーションの右側のコンテンツ領域。

コンテンツ領域が残りの幅を占める間、ナビゲーションが固定されたままになるように、液体レイアウトの水平方向の側面を実装する方法を理解していますが、ナビゲーションとコンテンツ領域の両方が表示されるように、液体レイアウトの垂直方向の側面を実装する方法がわかりません少なくとも残りの高さ、最大でコンテンツの高さを占めます (これは、画面からヘッダーの高さを差し引いたものよりも高いと仮定します)。

divで可能ですか？

コンテナ div に、その子の高さの最大の高さを取得してもらいたいです。子供の身長がわからなくてdivも。私はJSFiddleを試していました。容器divは赤です。表示されていません。なんで？

http://jsfiddle.net/Qu63T/1/でフィドルをチェックしてください。

私が欲しいのは、青いdivの隣に浮かぶ緑のdivです。および.blockdiv がグリッドとして表示されます。div を削除して、コンテナー内に s.mをフロートしたくありません。.block幅を指定せずにできること.m

JavaScript のみの CSS ソリューションはありません

Mark Tyrell の blueberry プラグインを使用してリキッド j-query スライダーを作成しています (万歳!) が、IE 8 および Firefox 7.01 で動作する Safari (モバイルまたはデスクトップ) でサムネイル画像のサイズが変更されないという問題があります。オペラ9.5。

http://development.carrollorganization.com/blueberry3.phpで (ほぼ) 作業中のページを見ることができます。

Safari では、サムネイル画像はコンテナ (サムネイルと呼ばれる div) の高さに合わせて縮小されず、そのコンテナのオーバーフロー:非表示に制限されません。これらは、div の親 (a タグ) の overflow:hidden コマンドに従います。大きな問題は、親の div タグの高さに合わせてサイズを変更することを拒否していることです。

正直なところ、これが Safari のバグなのか、ボックス モデルの問題なのか、ユーザー エラー (可能性が高い) なのか、それともすべての組み合わせなのかはわかりません。誰でもできる助けをいただければ幸いです。私なら

私のスタイルシートは次のとおりです。

私のページコードは次のとおりです（htmlではなくphpページです）：

うまく機能する 3 パネルの液体レイアウトがありますが、問題があることに気付きました。

float:left を持つ div と clear:both を持つ別の div がある場合、クリアされた div の下のすべての div は、右の列の高さまで押し下げられます。申し訳ありませんが、セクション 1 とセクション 2 の間の巨大なスペースです。

ここでコードを見ることができます。jsfiddle.net/QbSsb/

これまたは 3 パネルの液体レイアウトにトレーニングはありますか?

前もってありがとう、スーザン

ページの液体レイアウトを設定しようとしていますが、divの高さを調整するのが非常に困難です。画面のサイズに関係なく、ページを手袋のようにフィットさせたいので、固定レイアウトは必要ありません。私はパーセンテージのみを使用しており、ピクセルやemは使用していません。ページのレイアウトは次のようになります。

次に、左側の列、ページの上部の50％の高さ、左側の列、右側のページの50％の高さを作成します。問題は、コンテンツがオーバーフローしてカットオフになり、スクロールバーを使用してピクセルの高さを設定する必要があることです。これは私が望むものではありません。理想的には、divをページの50％に設定し、コンテンツがオーバーフローした場合はスクロールバーを使用したいと思います。それは理にかなっていますか？

どうすればこれを行うことができますか？助けていただければ幸いです。

どうもありがとうございます。