两个完全和固定宽度的div [重复]答案

【问题标题】：Two divs full and fixed width [duplicate]两个完全和固定宽度的div [重复]
【发布时间】：2013-09-26 17:37:58
【问题描述】：

我正在尝试在主容器中并排制作两个 div，底部 div 应该适应其余空间的宽度。

<div id="container">
    <div id="left">fixed width</div>
    <div id="right">rest of space width</div>
</div>

#container {
    float:left;
    width:100%;
}
#left, #right {
    padding:50px;
    background: #ccc;
    vertical-align: bottom;
    display: inline-block;
    /* ie6/7 */
    *display: inline;
    zoom: 1;
}

#right {
    padding:20px;
    background:#000;
    color:#fff;
}

我被困在这个阶段http://jsfiddle.net/Z9qW3/7/

【问题讨论】：

已经有人问过类似的问题：stackoverflow.com/questions/6487085/…
我看到了，但如果我让我的右 div 适应其余空间，它不是底部位置
我昨天回答了一个类似的问题：stackoverflow.com/questions/19003663/divs-arrangement-html-css/…
@Megadevice 你想让你的右 div 占用所有剩余空间吗？我的意思是在右侧以及左侧 div 的底部？
@user2675613，我只想将右侧 div 拉伸到剩余空间。

标签： css

【解决方案1】：

#container
{
   overflow-x:hidden
}
#left
{
width:20%;
float:left;
position:fixed;
border:1px solid red
}
#right
{
width:80%;
float:right;
position:absolute;
left:20%;
bottom:0;
border:1px solid red
}

【讨论】：

【解决方案2】：

试试这个代码：

Demo

css

#left
{
width:20%;float:left;position:fixed;left:0px;
border:1px solid yellow;
}
#right
{
width:80%;float:right;
border:1px solid red;
}

html

<div id="container">
    <div id="left">fixed width</div>
    <div id="right">rest of space width</div>
</div>

【讨论】：

以及如何解决我的右 div 仍处于顶部位置的问题？我需要将我的右 div 移动到底部位置。
@Megadevice 检查此link
这不是我的意思。看看我的第一篇文章。我只想将我的右侧 div 拉伸到其余宽度，但我不能这样做，因为如果我将 div 拉伸回顶部位置。

【解决方案3】：

希望这会有所帮助...

#container {
    width: 100%;
}

#left {
    padding: 50px;
    background: #ccc;
    vertical-align: bottom;
    display: inline-block;
    /* ie6/7 */
    *display: inline;
    zoom: 1;
    float:left;
}

#right {
    padding-top: 20px;
    padding-bottom: 20px;    
    background:#000;
    color:#fff;
    width: 79%;
    float: right;    
}

【讨论】：

【解决方案4】：

我可以从您的问题中得到的是，您希望左侧有一个固定的 div，而另一个 div 应该占据左侧 div 右侧和底部的剩余空间。我认为更好的方法是制作一个大 div，然后在左侧浮动一个固定 div，然后您可以使用剩余部分通过 css 定位属性定位单个元素

【讨论】：