1

私は2つの子を持つコンテナを持っています.1つはフローティングで親の高さを上げています.2番目はフローティングではなく残りの幅を埋めています. 2番目の高さも埋めたいと思います。

これが私の問題のフィドルです: http://jsfiddle.net/LAesa/

このフィドルでは、赤の div を親の 100% の高さで埋めたいと思います。

ここにhtml：

<div id="container">
    <div id="float">
        The floating <br/>column
    </div>

    <div id="fill">
        This one fill the rest
    </div>

    <div class="clearfloat"></div>
</div>

ここにcss：

#container {
    width: 500px;
    background-color: yellow; 
}

#float {
    width: 20%; 
    float: left; 
    background-color: green; 
}

#fill {
    min-height: 100%; 
    overflow: hidden; 
    background-color: red; 
}

.clearfloat {
    clear: both; 
}

どうもありがとうございました ！

4

2 に答える 2

1

Jquery ソリューション、ここにFiddleがあります

$(function() {
  var fHgt = $('#float').outerHeight();

  $('#fill').css({ height: fHgt });
});

そしてこれがCSSソリューションです

#container {
  display: table;
  width: 500px;
  background-color: yellow;
}
#float {
  display: table-cell;
  width: 20%;
  background-color: green; 
}
#fill {
  display: table-cell;
  width: 80%;
  overflow: hidden; 
  background-color: red; 
}
于 2013-09-11T17:18:28.200 に答える