4

要素が相対的に配置された要素で右にフロートしている場合、高さを親要素に合わせるにはどうすればよいですか? 

<div id="page">
  <div id="left"></div>
  <div id="right"></div>
</div>

#page {
  width: 980px;
  padding: 10px;
  background: #3C4B76;
  display: block;
  margin: 10px auto auto auto;
  position: relative;
}

#left {
  padding: 0;
  margin: 0;
  width: 230px;
  float: left;
}

#right {
  float: right;
  width: 720px;
  border-left: 1px solid white;
  padding: 5px 5px 5px 20px;
  height: 100%;
  position: relative;
  display: block;
}

この例では、#right要素は '#page' 要素を埋めません。コンテンツと同じ大きさになるだけです。それよりも小さい場合は、親を埋め#pageたいです。#right

4

4 に答える 4

5

親に対してこれを試してください：

overflow:auto;

別の解決策：

親：

display: table;

子：

display: table-row;

このフィドルをチェックしてください

更新: Cross-Browser CSS で同じ高さの列を設定するには、このMatthew James の投稿を読む必要があります

于 2012-10-29T18:07:02.570 に答える
1

以下をコピペ

CSS:

#page {
    width: 980px;
    padding: 10px;
    background: #3C4B76;
    display: block;
    margin: 10px auto auto auto;
    position: relative;
}  

#left {
    padding: 5px 0;
    margin: 0; width: 230px;
    float: left;
}  

#right {
    float: right;
    width: 720px;
    border-left: 1px solid white;
    padding: 5px 5px 5px 20px;
    height: 100%;
    position: relative;
    display: block;
}

.clearfix:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
     }
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */

HTML:

<div id="page" class="clearfix">
   <div id="left">left</div>
   <div id="right">right</div>
</div>

フィドルリンク:

http://jsfiddle.net/uExdD/9/

于 2012-10-29T18:05:39.150 に答える
0

親と同じ高さにして、親に clearfix を適用するだけです。

.clearfix:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
     }
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */
于 2012-10-29T17:57:20.513 に答える