Html 有没有办法在两个方向上拉伸两列布局？

我有以下情况： 由分区a和分区B（按顺序）组成的两列布局，用一个位于页面中心的包装分区包装。我希望B水平拉伸到

100%-A的长度（A的长度根据其内容而变化），并且两个div垂直拉伸以填充高度。如果A比B长，则B将拉伸，否则-A将拉伸

我试着用宽度、高度、位置和溢出值进行实验，但没有成功。如何实现这样的效果？
我的页面也有同样的问题，但有3个div。我的解决方案是使用javascript代码获取页面的宽度和高度偏视和偏网宽度

例如，使用下面的代码获得某个元素宽度的一半

var midpoint=document.getElementById（“MyElementId”）.offsetWidth/2
不幸的是，我知道没有跨浏览器解决方案可以使用div来实现这一点，但您可以使用如下表来实现：

<table style="width: 100%; border-collapse: collapse;"><tr>
    <td id="A"> <h1 style="white-space: nowrap;">...content...</h1> </td>
    <td id="B"> ...content... </td>
</tr></table>


…内容。。。
…内容。。。

您应该将“空白：nowrap；”应用于所有应该控制A列宽的元素。
这在所有常用浏览器中都可以做到。
工作演示（使用JavaScript）：

但是，不能对表示列的div设置填充

此外，由于某些原因，在IE中设置精确的宽度不起作用-这就是为什么我必须在右侧省略1px。
我认为这是最简单的解决方案，如果右侧列的内容较长，只有左侧列可能在IE6中有缺陷。而且，当左栏的内容比右栏长时，文本也不适合。但是你可以用背景图像来解决这个问题，这样你就不会看到文本与div不符

<style type="text/css">
* {
    margin:0;
    padding:0
}
#page {
    background:red;
}
#left {
    width:320px;
    float:left
}
#right {
    background:blue;
    position:relative;
    overflow:hidden
}
</style>
<div id="page">
    <div id="left">
        <ul><li>Lorem ipsum</li><li>Dolor sit amet</li><li>Consectetur adipiscing elit</li><li>Lorem ipsum</li><li>Dolor sit amet</li><li>Consectetur adipiscing elit</li><li>Lorem ipsum</li><li>Dolor sit amet</li><li>Consectetur adipiscing elit</li></ul>
    </div>
    <div id="right">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam laoreet, turpis nec mattis rhoncus, diam arcu dignissim turpis, vel interdum libero mi vitae lorem. Mauris placerat cursus odio at imperdiet. Integer pulvinar ante quis justo mattis mattis. Maecenas interdum mollis lacinia. Cras odio erat, pellentesque eu condimentum ut, ultricies vel neque. Morbi tristique diam elit, eget sagittis est. Nullam vestibulum elit sit amet odio dictum sodales. Duis elementum mollis elementum. Nulla purus elit, suscipit auctor sagittis eget, pretium vitae est. Suspendisse potenti. Integer sit amet ipsum sem. Vestibulum quis auctor leo. Suspendisse at elementum diam.</p>
    </div>
</div>


* {
保证金：0；
填充：0
}
#页面{
背景：红色；
}
#左{
宽度：320px；
浮动：左
}
#对{
背景：蓝色；
位置：相对位置；
溢出：隐藏
}
Lorem ipsum
loror sit amet
Lorem ipsum
lore sit amet
lore sit amet
Lorem ipsum
door sit amet
圣职人员
Lorem ipsum dolor sit amet，是一位杰出的献身者。拉奥里特教堂、马蒂斯·朗卡斯教堂、尊贵的塔皮斯教堂、自由之门。Mauris placerat cursus odio在帝国饮食。整普尔文纳安特奎斯-马蒂斯-马蒂斯。莫利斯·拉齐尼亚国际学院。克拉斯·奥迪奥·埃拉特，佩伦茨克欧盟调味品ut，ultricies vel neque。Morbi tristique diam elit，eget sagittis est。前庭无门，精英坐在这里。两种元素都有。purus Elite，sagittis eget，pretium vitae est。潜力悬钩子。整型扫描电镜。前庭拍卖人利奥。在元素直径处的悬钩子


（在Safari 5、IE6、IE7和IE8中进行了测试。）
@EpsilonVector当然可以用JavaScript完成。但我想，你想要一个纯CSS解决方案，对吗？@Sime是的，这是正确的。我对Java还不太熟悉，不足以直接使用它，虽然我会在必要时学习如何使用，但我想先看看纯CSS解决方案是否可行。@EpsilonVector我不确定我是否理解您的列宽要求。您希望A列的宽度根据其内容而变化，而B列的宽度也根据A列的宽度而变化，对吗？但是，您希望列A的宽度如何根据其内容进行更改？你允许换行吗？@Sime它可以垂直拉伸。对于这个问题，你可以假设它只是随着内容的长度垂直拉伸，不会超过页面的50%（因为内容永远不会那么长，而不是因为我希望通过CSS强制执行）.@EpsilonVector但基于什么标准，列A的宽度会发生变化？我假设脚本必须“加载”运行？如果没有，那么什么时候？@EpsilonVector Yes，onload，或者在DOMReady上更好：）@dubrox OP希望B列的宽度根据A列进行调整。如果您将其设置为固定宽度，那么它将不依赖于…@sime vidas您是对的，我即时编写了代码，并且忘记了OP希望两列灵活的细节。现在我修复了我的代码，tnx:）@dubrox是的，但是A列的宽度应该取决于标题的长度，因此，它不应该换行。@sime vidas：我没有注意到这个要求，但我认为我所做的编辑（空白：nowrap）可以满足需要。我使用nowrap属性代替注释，V.IDE-VIDAS的意思是，你应该只考虑“代码> div < /Case>列作为列包装器，所以另一个嵌套的div与填充是完全合法的。”