1

我有 2 个容器,向左浮动:

  • 带有隐藏溢出的框 1(红色 div)
  • 高度为 100% 的框 2(黄色 div)

我希望框 1 始终填充到 100%,即使框 2 变大

<style>
* {margin:0;}
html {position: relative; min-height: 100%;}
body {margin: 0 0 100px;}
#footer{
    position: absolute;
    left: 0;
    bottom: 0;
    height: 100px;
    width: 100%; background:gray;
    }

#box1{width:200px; background:yellow; float:left; height:100%}
#box2{width:600px;background:red; float:left; overflow:hidden; height:2000px; }
</style>

<div id='box1'></div>
<div id='box2'></div>
<div id='footer'></div>

http://jsfiddle.net/isherwood/Gy7Jj/

4

2 回答 2

1

将高度设置为100%不会影响高度。浮动元素将环绕其内部内容。您应该使用 javascript 来动态更改高度。以下是使用jQuery's 的一种方法height()

文档准备好后设置高度

$(document).ready(function(){
    $("#box1").height($("#box2").height());
});

绑定resize事件:

$(window).resize(function(){
    $("#box1").height($("#box2").height());
});
于 2013-04-02T13:14:39.253 回答
0

您需要在打印内容后设置高度(Jquery)

或设置主要静态 div。

<style>
* {margin:0;}
html {position: relative; min-height: 100%;}
body {margin: 0 0 100px;}
#footer{
    position: absolute;
    left: 0;
    bottom: 0;
    height: 100px;
    width: 100%; background:gray;
    }
#main { height:2000px; }
#box1{width:200px; background:yellow; float:left; height:100%;}
#box2{width:600px;background:red; float:left; overflow:hidden; height:100%; }
</style>
<div id="main">
  <div id='box1'></div>
  <div id='box2'></div>
</div>
<div id='footer'></div>
于 2013-04-02T13:16:27.740 回答