【问题标题】：Make the div take remaining space left after sidebar让 div 占用侧边栏后的剩余空间
【发布时间】：2013-12-13 14:24:42
【问题描述】：

我正在尝试在这里创建一个非常常见的布局，其中包含一个侧边栏和右侧的内容部分。我的侧边栏部分的宽度是fixed（这里是 120px），我希望右侧的容器占据页面的剩余空间（右端的边距为 60px）。

标记如下所示：

<body>
    <div class="wrapper">
        <div class="content">
            <div class="left-sidebar">
                <ul class="sidebar-menu">
                    <li>Item 1</li>
                    <li>Item 2</li>
                </ul>
            </div>
           <div class="right-main-content">
               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
           </div>
        </div>
    </div>
</body>

这也是上面的小提琴：http://jsfiddle.net/6nLtp/

在我的情况下，发生的事情是正确的容器位于侧边栏下方并占据 100% 的宽度。但是，我希望它只占用侧边栏右侧的剩余空间（页面右侧的边距为 60px）。当我指定宽度时，容器随边栏一起出现，但我不确定为什么需要这样做？既然div元素（侧边栏和右边的容器都是浮动的），为什么右边的内容就不能跟着侧边栏粘在一起呢？

【问题讨论】：

checkout stackoverflow.com/questions/580195/…，特别是它链接到的 jsFiddle：jsfiddle.net/uEj55/1
CSS two divs next to each other的可能重复

标签： html css

【解决方案1】：

我不知道它是否是好的代码，但它对我有用

.wrapper {width:100%;height:100%;}
.left-sidebar {width:120px;height:200px;margin:20px 0 0 0;border:1px solid red; float:left;}
.right-main-content{margin:20px 60px 0 140px; display:block;padding-top:5px; }
.right-main-content p {border: 1px solid green;}
.sidebar-menu{list-style-type:none;}
.project-picture-bar{height:100px;width:100%;border-top:3px solid grey;border-bottom:3px solid grey;}

【讨论】：

【解决方案2】：

试试这个

CSS

.wrapper {width:100%;height:100%;display:inline-block;}
.left-sidebar {max-width:120px;width:20%;height:200px;margin:20px 0 0 0;border:1px solid red;float:left;}
.right-main-content{margin:20px 60px 0 0;width:80%;border: 1px solid green;float:right;}

DEM0

【讨论】：

【解决方案3】：

试试这个...Updated Link

.wrapper {width:100%;height:100%;}
.content{position:relative;}
.left-sidebar {width:120px;height:200px;margin:20px 0 0 0;border:1px solid red; position:absolute; }
.right-main-content{margin:20px 0px 0px 0px;padding:20px 10px;border: 1px solid green; position:absolute; left:140px;}
.sidebar-menu{list-style-type:none;}
.project-picture-bar{height:100px;width:100%;border-top:3px solid grey;border-bottom:3px solid grey;}

祝你好运......享受

【讨论】：

【解决方案4】：

您可以将左侧的<div> 设置为固定位置，并将右侧的<div> 浮动到左侧。如果这样做，请确保使用适当的边距来抵消左侧 div 占用的空间。

.wrapper {
width:100%;
height:100%;
}
.left-sidebar {
    position: fixed;    /*---- changed this --->*/
    width:120px;
    height:200px;
    margin:20px 0 0 0;
    border:1px solid red;
}
.right-main-content{
    float: left;              /*---- changed this --->*/
    width: auto; 
    margin:20px 0 0 122px;     /*---- changed this --->*/
    border: 1px solid green;
}
.sidebar-menu{
    list-style-type:none;
}
.content{
    margin: 0px auto;
}

工作示例：

http://jsfiddle.net/6nLtp/6/

【讨论】：

【解决方案5】：

使用float 获得结果。

css

.wrapper {width:100%;height:100%;}
.content{padding-top:20px;}
.left-sidebar {width:120px;height:200px;margin:0 0 0 0;border:1px solid red;float:left;}
.right-main-content{margin:0 60px 0 140px;border: 1px solid green;}
.sidebar-menu{list-style-type:none;}
.project-picture-bar{height:100px;width:100%;border-top:3px solid grey;border-bottom:3px solid grey;}

demo

【讨论】：

就我而言，我确实为元素提供了浮点数，但我忘了在小提琴中写下它。如果我给两个容器都提供浮动（我在我的案例中做过），为什么这个东西不起作用？
两者都不适用。只给浮动“左侧栏”。右侧边栏将在剩余空间中展开。只需按照“左侧边栏”的宽度留出边距即可。