1

float属性を持つ要素の高さが考慮されていない方法について読んでいます。したがって、clear:both親divの終わりの直前で使用して、内部div全体に広がるようにする必要があります。

このページで、IDを持つdivがfull-height-template-containerその内部コンテンツに広がっていないことがわかります。そのため、フッター(右下の著作権テキスト)がページの高すぎます。

レイアウトは次のようになります。

<div id="full-height-template-containter">
  <div id="content-container">
    <div id="full-width" style="float:left;"> 
    </div>
    <div style="clear:both;"></div>
  </div>
<div style="clear:both;"></div>
</div>

外側のdivをその子の上に伸ばすために、他に何を試すことができますか?

前もって感謝します!

4

4 に答える 4

2

これはよくある問題です。それを解決するために、その多くの変種のclearfixハックが発明されました。

于 2012-08-03T15:03:55.733 に答える
2

このバージョンの「Clearfix」を、そのように伸ばす必要があるコンテナの上部に挿入するまで、私は同じ問題に直面していました。

CSS:

.clearfix:after {content: "."; display: block; height: 0; clear: both; visibility:hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

HTML:

<div class="clearfix"> </div>

<span class="doc">
     <a href="../speakers/johnnixon.html" "class="spkrs1">John Nixon</a> 
     <a href="../speakers/pricereveil.html" "class="spkrs2">Henry Wright</a> 
</span> 
于 2012-11-18T01:49:12.000 に答える
1

私はあなたのサンプルをフィドルに置き、divを表示するためにいくつかのcssを与えました:http: //jsfiddle.net/WRzsE/

あなたはそれがあなたがそれを期待するであろうとあなたが説明するようにそれが完全に機能することをはっきりと見ることができます。あなたは私が疑う他の何か間違ったことをしている...

おそらくposition: absoluteどこかで使用していると、要素が親から持ち上げられ、親が伸びないようになります(ここで大声で考えてください...)

編集: 私は実際のページを見ました(リンクを見落としました)。あなたのdivはうまく伸びています。問題は、絶対に設定されているフッターの位置にあります。スティッキーフッターを実現しようとしているのではないかと思います。これを見てください。チャームのように機能します。私はいつもそれを使っています:http://ryanfait.com/sticky-footer/

于 2012-08-03T15:11:09.437 に答える
1

#full-height-template-containerを使用している場合、これheight: 100%はdivが親の100%の高さを取ることを意味します。

CSSを追跡すると、 and要素height: 100%を含む各親要素が割り当てられます。これは、ウィンドウから高さが取得されることを意味します。その結果、divがウィンドウのサイズを超えることはありません(ただし、コンテンツはオーバーフローします)。 。htmlbody

したがって、問題を引き起こしているのはフロートではなく、各divに明示的に割り当てている高さです。

于 2012-08-06T07:48:41.543 に答える