0

HTML/CSS でレイアウトを作成しようとしています。目標はこれについてです： レイアウト

このレイアウトの一部の要素のサイズは固定されていません。左側の領域は固定幅で、フッターは固定 (コンテンツ マッチング) の高さです。左側のリストは、高さ、フッターのテキスト、幅、およびキャンバスの両方の寸法を拡張するため、ブラウザー ページ全体が満たされますが、スクロールバーは表示されません。ああ、B はボタンですが、それはあまり重要ではないと思います。

いくつかの例 ( this ) と参照 ( this ) を見て、それらから学ぼうとしましたが、思い通りにはなりません。私が行ったより近い試みの1つはこれです：

<html><body style="margin: 0; padding: 0;">
<div style="position: absolute; background: #afa; top: 0px; bottom: 0px; left: 0; right: 0px;">
    <div style="position: absolute; background: #afa; top: 0px; bottom: 0px; left: 0; width: 240px;">
        <input style="width: 240px" id="selectedPosition"></input>
        <select style="position: relative; width: 240px; height: 100%;" id="points" multiple="multiple"></select>
        <div style="position: relative; background: #afa; left: 0; width: 240px;">
            <input style="width: 80px" type="button" value="Add"></input><!--
            --><input style="width: 80px" type="button" value="Up"></input><!--
            --><input style="width: 80px" type="button" value="Down"></input>
        </div>
    </div>
    <div>
        <div><input style="position: absolute; bottom: 0px; left: 0px; width: 100%"></input></div>
        <div><input style="position: absolute; bottom: 0px; right: 0px;" type="button" value="Button 4"></input></div>
    </div>
    <div style="position: absolute; background: #aaf; height: 100%; left: 240px;top: 0px;right: 0px; overflow: auto;"></div>
</div>
</body></html>

ここでの問題は、右下のボタンがサイズ拡張要素で覆われている下部要素です。おそらく固定の寸法またはマージンでこれを修正できますが、「適切な」方法で実行したいと思います。

別のアプローチは、行と列にまたがる 4x5 テーブルを使用することでしたが、私はさらに混乱し、すぐにやめました。

私は HTML/CSS でのレイアウトにかなり慣れていないので、実際の解決策にもかかわらず、この問題の「ダミーのための」ソースは、仕事を成し遂げるのに役立ちます。

アップデート

リンクとフィコの答えを見た後。ただし、最も近い試みはthisです。問題は、幅/高さが 100% に設定されている場合、リストと下部のテキストの両方がそれぞれのボタンと重なることです (jsfiddle の例では、デモンストレーションのために低い数値を使用しました)。ちなみに、この例のリストは垂直方向にはまったく伸びていません。私のローカルファイルを使用する場合、そうです。

固定フッターと高さ充填列で見たすべての例は、フッターに固定サイズの高さを使用し、マージンとして負に適用されますが、フッターはコンテンツをラップするだけです。「次の要素に到達するまで延長する」というルールを設定する方法はありませんか?

4

1 に答える 1

1

コンテンツにはマークアップを、スタイリングには CSS を使用することから始めます。よりクリーンに、より少ないトラブルで作業できます。あまりにも多くを含めることは良い習慣ではありません外部 CSS を使用する代わりにタグを使用する (または最終的にドキュメントの HEAD に埋め込む)

私には思えませんが、あなたはここで非常に多くの絶対的なポジショニングを必要としています.

デザインの大きな領域を特定します (下の図のように) ここに画像の説明を入力

最初の印象は、通常のドキュメント フローのいくつかの要素と、その下の 3 つのボタンがdivに浮かんでいる左側の幅に横列があることです。

キャンバスは、 mainContainer div に含まれる aside と canvas の両方のasideの左または右に浮かんでいる可能性があります。

下部のテキストとボタンをフッターに統合して、ボタンを自由に右または左にフローティングさせることができます

柔軟なソリューションは、計測が簡単です。キャンバスのプロパティでいくつかの最小値を使用し、おそらく横にいくつかの固定幅を使用します。

于 2013-02-23T08:20:19.217 に答える