4

これに似たレイアウトを作成するにはどうすればよいですか?

私にはあまり適していない解決策がいくつか見られました。私が見た例とコメントは、これが不可能であることを示唆しています。(図の途中にオーバーフロー自動がありません)。 ここに画像の説明を入力

価値があるのは、これが私の現在のフィドルです（テーブルを試すことにしたところです、hrmmmm）。

http://jsfiddle.net/valamas/m8R43/6/

追加: コメントに記載されている Printscreen 。ヘッダーを追加した後、ページを下にドラッグまたは選択すると発生します。参照: http://dabblet.com/gist/3753308 ここに画像の説明を入力

4

2 に答える 2

5

通常のdivを使用できます。

1つのラッパー、左、中央、右に3つの内部div。ラッパーdivの下の1つのフッター。

<div id="wrapper">
    <div id="leftSide">
        left
    </div>
    <div id="middle">
        middle
    </div>
    <div id="rightSide">
        right
    </div>
</div>
<div id="footer">
        footer
    </div>

次に、display: table;を使用します ラッパーとtable-cell;その内部div：

#wrapper
{
    width: 100%;
    height: 400px; /*whatever*/
    display: table;
    padding: 0;
    margin: 0;
}

#left,
#middle,
#right
{
    display: table-cell;
}

左右の要素の幅を設定すると、中央が魔法のようにスペースを埋めます。

#left
{
    width: 100px;
}

#middle
{
    background: #00f;
}

#right
{
    width: 200px;
}

display: table;およびスタイルはテーブルのtable-cell;動作を模倣しますが、マークアップをセマンティック要素にすることができます。

IE<=7を除くすべてのブラウザでサポートされています。

http://jsfiddle.net/Kyle_Sevenoaks/m8R43/9/

于 2012-09-19T07:16:24.940 に答える
4

ソースの順序をあまり気にしない場合: http://dabblet.com/gist/3748868

低いビューポートの高さでフッターを画面に表示するには、ちょっとしたハックを使用します。

body {
    border-bottom: 100px solid; /* height of footer */
    box-sizing: border-box;
    }

'border-box' プロパティはここで説明されています: http://www.paulirish.com/2012/box-sizing-border-box-ftw/ 基本的に、これが行うことは、要素にボーダーとパディングを含めることです。したがって、ここで body に指定された下の境界線は、sans-border-box とは対照的に、ビューポート内にとどまります。
これは、フッターで対応できるネガティブスペースのようなものです。パディングをいじりたいかもしれないので、「ボーダー」を使用しました。
フッターに関しては、位置が固定されているため、絶対配置で得られるレイアウトではなく、ビューポートに対して相対的です。したがって、ボディの下の境界線の上に配置されます (高さの値を共有します)。

フロートをクリアする「overflow: hidden」プロパティを指定したため、センター ブロックは流動的です ( http://www.stubbornella.org/content/2009/07/23/overflow-a-secret-benefit/ )。オーバーフローなしでも機能しますが、問題が発生する可能性があります。
列内のコンテンツがコンテンツの高さよりも大きい場合にスクロールできるようにするため、中央の列内にコンテナーを追加し、overflow: auto を指定しました。

于 2012-09-19T11:10:02.967 に答える