3

カスタム drupal のフロント ページで開発している流動的な 3 列のレイアウトに関する質問を先にしましたが、寄稿者は、マージンを使用して動的にサイズ変更する絶対コンテナー div から別のものに切り替えることを提案しました - 私はdisplay:inline-blockを選択しました. (私はフロートが嫌いで、表のセルは一歩後退しているように見えます)

すべての親 div でパーセンテージの高さを指定すると、3 つの div を問題なく均等に配置でき、子の 100% の高さを親の高さと一致させることさえできました。

ただし、子 div のコンテンツはページ ラッパー div を押し下げないため、フッターにオーバーフローして超えます。ラッパーdivにoverflow:autoを設定すると、正しく表示されますが、ラッパーdivに不要なスクロールバーが表示されます。

ページラッパーから高さの値を削除すると、子コンテンツはページラッパーを展開しますが、子divのすべての高さを失います!!!

この作業を行うためのハックはありますか (または何か不足していますか)、必要に応じて、または別の方法で立ち往生していますか? min-height:xx%を試しましたが、うまくいきません。

    <div id="page-div">
     <div id="inline-wrapper">
      <div id="top-content">
       <div id="left">user picture, links</div>
       <div id="center">blah blah blah blah blah</div>
       <div id="right">user picture, links</div>
      </div>
      <div id="a nav menu"></div>
      <div id="main-content">
       <div id="left">user picture, links</div>
       <div id="center">blah blah blah blah blah</div>
       <div id="right">user picture, links</div>
      </div>
     </div>
    </div>
    <div id="footer"></div>

html, body {height:100%}
#page-div {height:100%;width:80%;margin:0 auto;}
#inline-wrapper {height:100%;width:100%;background-color:#fff;}
#top-content {height:100%; width:98%;}
#top-content div {vertical-align:top;}
#left, #center, #right {display:inline-block;height:100%;}
#left, #right {width:13%;background-color:#000;}
#center {width:74%;}
#footer {height:250px;width:100%;margin-top:3%;}
4

1 に答える 1

1

テーブルが適切ではないかどうかはわかりませんが、それはあなたが望むことを正確に行い、100％かかり、すべてをプッシュダウンします.

http://codepen.io/gcyrillus/pen/hsEbJ (任意の高さから成長する能力に使用される表示テーブル)

http://codepen.io/gcyrillus/pen/udvgj (表示:高さが指定されている場合、あまりプッシュしないインラインブロック:))

element {display:inline-block;}
            /* or ? */
element {display:table;}

実際（IMHO）、displayとfloatが存在し、各値は異なる動作をします。それらは必要な場所で選択する必要があり、それが 'hype' または 'has been' である場合ではありません。
ヴィンテージってカッコイイですよね ;) .

display:flex はすぐに注文します :)

于 2013-06-06T08:49:52.433 に答える