你能有两个 div，其中一个始终保持 100% 的高度吗？

Posted 2023-02-25

【中文标题】你能有两个 div，其中一个始终保持 100% 的高度吗？

【英文标题】：Can you have two divs, with one of them always maintaining 100% height?

【发布时间】：2013-04-02 13:12:01

【问题描述】：

我有 2 个容器，向左浮动：

带有隐藏溢出的框 1（红色 div） 框 2（黄色 div），高度为 100%

我希望框 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;
    

#box1width:200px; background:yellow; float:left; height:100%
#box2width: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/

【参考方案1】：

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

文档准备好后设置高度

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

绑定resize事件：

$(window).resize(function()
    $("#box1").height($("#box2").height());
);

【参考方案2】：

打印内容后需要设置高度（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; 
#box1width:200px; background:yellow; float:left; height:100%;
#box2width: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>