具有百分比宽度的浮动 div答案

【问题标题】：floating divs with precentage widths具有百分比宽度的浮动 div
【发布时间】：2012-08-08 08:23:51
【问题描述】：

所以我知道有很多类似的问题，但我无法找到这个特定问题的答案。

如果我有一个两列 div 布局，我希望左边的 div 具有 250px 的固定宽度和一个 margin-left: 5%; （正是我希望它为我的设计设置的方式）...

第二个 div（右边那个）我想基本上走到屏幕的尽头到右边。所以左边的 div 是 250px，左边距为 5%，我希望第二个 div（右边的那个）填满浏览器的整个其余部分。

在第二个 div 上，我尝试使用 100% 宽度向左浮动，但这会使第二个 div 移到第一个 div 的底部，并填满屏幕。如果我给第二个 div 一个固定宽度，浮动可以工作，但它不会填满浏览器窗口......如果你移动浏览器窗口小于第二个 div，它会再次被推到第一个的底部分区...

无论如何，只有css，有一个具有固定宽度的div（和margin-left有一个百分比），下一个div直接在第一个div的右边（就像一个浮动通常会工作）有一个百分比100%（或类似的东西），以便填满屏幕的其余部分？？？

哦，我还需要两个 div 的高度都为 100%，如果这有影响的话...谢谢！

【问题讨论】：

【解决方案1】：

这样写：

CSS

.left{
    float:left;
    background:red;
    width:250px;
    margin-left:5%;
}
.right{
    overflow:hidden;
    background:green;
}

HTML

<div class="left">fixed</div>

<div class="right">right</div>

【讨论】：

真的吗？所以我认为溢出隐藏只是为了删除滚动条，你能详细说明它是如何工作的吗？你甚至没有 100% 的宽度！
我只想说我和我的朋友都是网页设计师，我们整天都在努力解决这个问题...我想我们需要阅读我们的基本 css...溢出:hidden.....woooow 但是这里有另一个，如果我希望 .right 的宽度为 90% 怎么办？？？
我想我意识到发生了什么事，overflow:hidden 只会把滚动条拿走，这就是重点，没有滚动条......没有浮动到第一个 div 的底部..touche 先生！我仍然想知道如何让第二个 div 有一个百分比，那太好了！
阅读此colinaarts.com/articles/the-magic-of-overflow-hidden/… 溢出背后的技巧。