Question

我正试图让两个分区并排坐下。我希望一个div占据所需的宽度，另一个占用剩余的宽度，因此两个div都跨越100％宽度。这可能吗？我试过浮动和一堆不同的定位设置，但我找不到有效的解决方案。我自然认为添加一个浮点数：左边最左边的元素可以工作，但是当你尝试向右边的元素添加填充/边距/边框时，浏览器不会应用它。以下是我扩展的一些代码（来自现有答案）来说明问题。

<style>
    #foo {
        float: left;
        background: red;
        height: 100%;
        padding: 5px;
    }
    #bar {
        background: green;
        border: solid 1px blue;
        padding: 5px;
        height: 100%;
    }
</style>   
<div>
    <div id="foo">foo</div>
    <div id="bar">bar</div>
</div>

如果您在浏览器中打开此代码，您会注意到条形div未填充，并且边框未应用于它...我不知道为什么。

感谢您的帮助。

Answer 1

这有效：

<style>
    #foo {
        float: left;
        background: red;
    }
    #bar {
        background: green;
    }
</style>   
<div>
    <div id="foo">foo</div>
    <div id="bar">bar</div>
</div>

http://pastehtml.com/view/19ldeqq.html

Answer 2

为什么不使用表格，将整个表格宽度设置为100％，然后将每个行设置为没有宽度，如下所示：

<table width="100%" border="0"> <tr> <td><div>DIV INFO LEFT</div></td> <td><div>DIV INFO RIGHT</div></td> </tr> </table>

Answer 3

This正在使用javascript，但这是我找到的唯一方法。

<script type="text/javascript">
        window.onload = shouldNotBeThisHard;
        window.onresize = shouldNotBeThisHard;
        function shouldNotBeThisHard() {
            var j = document.getElementById('divThatYouWantAllOf');
            var k = document.getElementById('divForRestOfScreen');
            var jh = 0;
            if (j)
                jh = j.clientWidth;
            var h = (window.innerWidth - (jh + 30));
            k.style.width= h + "px";
        }
</script>

HTML看起来像这样：

<div id="divForRestOfScreen" style="float:left;overflow:auto;">
    asdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsd
    sdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsd
    sdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsds
    dsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsd
    sdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsd
    </div>
    <div id="divThatYouWantAllOf" style="float:right" >
    This is why I hate web programming.
    </div>

CSS - 两个分区并排，一个占用尽可能多的空间，其他填充其余的宽度

3 个答案: