两个div：一个固定，其他拉伸 [英] Two divs: one fixed, other stretched

问题描述

我想要完成这项工作：

I am trying to accomplish this:

但我有麻烦让两个中间的divs玩好。如果我将它们都设置为相对数（30％和70％），它工作，但左div随着用户更改浏览器窗口宽度更改大小。

But I am having trouble getting the two middle divs to play nice. If I set them both to a relative number (30% and 70%) it "works" but the left div changes size as the user changes the browser-windows width.

 #floatitleft{width:30%; float:left;}
 #floatitright{width:70%; float:left;}

我想要的是，如图所示

 #floatitleft{width:300px; float:left;}
 #floatitright{width:100%; float:left;}

但是这会导致floatitright如果我把它设置为70％，它最终在floatitleft的右边，但随着我改变浏览器的大小一点，它再次结束在下面。该怎么办？

But this causes "floatitright" to end up beneath floatitleft. And if I set it to 70% it does end up to the right of "floatitleft" but as I change the browser size a little it ends up underneath yet again. What to do?

更新：
最后我最终得到：

UPDATE: Eventually I ended up with:

#topper{
    height:100px;
    width:100%;
    background-color:blue;
}
#wrapperz{
    height:inherit;
    width:100%;
}
#wrapperz p{margin:0 0 0 0px; padding:10px 10px 0px 10px; color:#0F0F0F;}
#wrapperz #floatitleft{
    width:300px;
    float:left;
}
#wrapperz #floatitright{
    margin-left: 300px;
    min-width:300px;
}
#bottommer{
    height:100px;
    width:100%;
    background-color:red;
}

这将用作：

<div id="topper">
test
</div>

<div id="wrapperz">

<div id="floatitleft">
<p> Stuff </p>
</div>

<div id="floatitright">
<p> Stuff </p>
</div>

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

</div> <!-- Close Wrapper -->

<div id="bottommer">
test
</div>

请注意，这不是正确的HTML，但它只是作为我的示例的解决方案。此外， div style =clear：both 特别重要，如果你尝试这样，因为没有使用脚注弄乱，因为包装器不能正确拉伸垂直，但马克已提供

Note that this isn't proper HTML but it just serves as the solution to my example. Also, the "div style="clear: both" is escpecially important if you try this because not using that cuases the footer to mess up as the wrapper doesn't properly stretch vertically. But Mark has provided a what I believe to be better/cleaner alternative below.

推荐答案

这不会如预期的那样工作吗？

Wouldn't this work as intended?

#floatitleft{
    width:300px;
    float:left;
}
#floatitright{
    margin-left: 300px;
}

这篇关于两个div：一个固定，其他拉伸的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！