Html 浮动不动态扩展_Html_Css

Html 浮动不动态扩展

html css

Html 浮动不动态扩展,html,css,Html,Css,我有css代码a列和b列，我在代码中使用float来动态扩展a列，但这并没有发生，我想做的只是在b列添加内容，a列要扩展请查看我的代码我的代码： CSS .container { border: 1px solid #000000; overflow: hidden; width: 100%; } .left { width: 45%; float: left; background:none repeat scroll 0 0 lightblue; } .ri

我有css代码a列和b列，我在代码中使用float来动态扩展a列，但这并没有发生，我想做的只是在b列添加内容，a列要扩展请查看我的代码

我的代码：

CSS

.container {
  border: 1px solid #000000;
  overflow: hidden;
  width: 100%;
}

.left {
  width: 45%;
  float: left;
  background:none repeat scroll 0 0 lightblue;  
}

.right {
  width: 45%;
  float: right;
}

HTML

<div class = "container">
<div class="left">
column a
column a<br />
column a<br />
column a<br />
column a<br />
column a<br />
column a<br />
</div>


<div class="right">
column b<br />
dynamic row<br />
dynamic row<br />
dynamic row<br />
dynamic row<br />
dynamic row<br />
dynamic row<br />
dynamic row<br />
dynamic row<br />
dynamic row<br />
dynamic row<br />
dynamic row<br />
dynamic row<br />
dynamic row<br />
dynamic row<br />

</div>
</div>

<div style="clear: both;"></div>


a列
a列

a列

a列

a列

a列

a列

b列

动态行

动态行

动态行

动态行

动态行

动态行

动态行

动态行

动态行

动态行

动态行

动态行

动态行

动态行

您可以尝试为您的家长使用

display:table

，然后为列使用

display:table cell

CSS


.家长{
显示：表格；
宽度：100%；
}
.左{
显示：表格单元格；
宽度：200px；
背景色：#0c0；
}
.对{
宽度：自动；
显示：表格单元格；
背景色：#f00；
}
.页脚{
背景色：#eee；
}

HTML


aaaa
bb
bbb
bbb
页脚

查看它的实际操作：

嗨，我已经更新了JSFIDLE中的代码

check it here : http://jsfiddle.net/btCQn/1/

<style>
.container {
  border: 1px solid #000000;
  overflow: hidden;
  width: 100%;
    position:relative;

}

.left {
  width: 45%;
  float: left;
  background:none repeat scroll 0 0 lightblue;
  position:absolute;
}

.right {
  width: 45%;
  float: right;

}
</style>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<script>
$(document).ready(function(){
$(".left").css("height",$(".right").height());
});
</script>

在这里检查：http://jsfiddle.net/btCQn/1/
.集装箱{
边框：1px实心#000000；
溢出：隐藏；
宽度：100%；
位置：相对位置；
}
.左{
宽度：45%；
浮动：左；
背景：无重复滚动0 0浅蓝色；
位置：绝对位置；
}
.对{
宽度：45%；
浮动：对；
}
$（文档）.ready（函数（）{
$（.left”）.css（“height”，$（.right”）.height（）；
});

这是一个简单的解决方案（JSFIDLE）

（不更改您的HTML）

CSS

html，正文{
字体系列：verdana；
字体大小：12px；
}
.家长{
边框：1px纯红；
宽度：100%；
填充物：5px；
溢出：隐藏；
}
.左{
边框：1px纯蓝色；
宽度：200px；
浮动：左；
位置：相对位置；
填充：3px0；
}
.对{
边框：1px纯绿色；
宽度：计算（100%-200px）；
填充：3px0；
左边距：200px；
}
.左，.右{
垫底：8000px；
保证金底部：-8000px；
背景：无重复滚动0 0浅蓝色；
}
.clr{
明确：两者皆有；
}
.页脚{
边框：1px实心橙色；
位置：相对位置；
填充：3倍；
边缘顶部：5px；
}

感谢您的努力和代码，但问题是代码在我的浏览器中不起作用，我正在使用IE6。当我在列b中添加行时，列a没有扩展，但代码在JSFIDLE中工作。请检查并让mr知道谢谢。@Hadi:我正在检查。@Hadi:我已经用jquery函数更新了JSFIDLE:，并对IE6进行了测试，如果我删除高度，它的工作还有一件事：100%；from.container显示列b中的所有内容。在IE10中工作良好。但是其他IE 8、7、6没有添加JQuery函数吗$（document）.ready（function（）{$（.left”）.css（“height”，“$（.right”）.height（）；}）；我不会使用CSS表达式。它们没有得到很好的支持。@ultraviol3tlux-calc可以，除了ie8和android之外-请参阅@fred02138，该代码仅在IE 10中工作，但在IE 9,8,7,6中不工作。你能再检查一下吗。谢谢你的努力。

<body>

    <div class="parent">
         <div class="left">aaaa</div>
         <div class="right">bb<br />bbb<br />bbb</div>
    </div>

    <div class="footer">Footer</div>

</body>

check it here : http://jsfiddle.net/btCQn/1/

<style>
.container {
  border: 1px solid #000000;
  overflow: hidden;
  width: 100%;
    position:relative;

}

.left {
  width: 45%;
  float: left;
  background:none repeat scroll 0 0 lightblue;
  position:absolute;
}

.right {
  width: 45%;
  float: right;

}
</style>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<script>
$(document).ready(function(){
$(".left").css("height",$(".right").height());
});
</script>

<style type="text/css"> html, body {
    font-family:verdana;
    font-size:12px;
}
.parent {
    border:1px solid red;
    width:100%;
    padding:5px;
    overflow:hidden;
}
.left {
    border:1px solid blue;
    width:200px;
    float:left;
    position:relative;
    padding:3px 0;
}
.right {
    border:1px solid green;
    width: calc(100% - 200px);
    padding:3px 0;
    margin-left: 200px;
}

 .left, .right {
    padding-bottom:8000px;
    margin-bottom:-8000px;
    background:none repeat scroll 0 0 lightblue;
}
.clr {
    clear:both;
}
.footer {
    border:1px solid orange;
    position: relative;
    padding:3px;
    margin-top:5px;
}
</style>