如何将剩余宽度应用于具有特定宽度的div旁边侧边栏

Question

我打算做的是跟随。我右边有一个div#sidebar特定宽度。这个侧边栏div位于右侧。我现在要做的是将剩余宽度应用到侧边栏左侧的另一个div#left。

但由于侧边栏div下的div，它无法正常工作。我希望div为100% width到侧边栏的边距。不是整个方面。 我制作了一张图片来更好地解释它：  

以下是我目前的css：

#sidebar {
   height: 100%;
   width: 342px;
   float:right;
}

#left {
   float: left;
   width: 100%;
   height: 100%;
}

希望你明白我的观点。感谢

Answer 1

您可以使用#left，left:0容器在right: width of sidebar容器内放置relative内容。所以你有更好的浏览器支持......

HTML

<div id='container'>
 <div id='left'></div>
 <div id='sidebar'></div>
</div>

CSS

html, body {
 height:100%;
}
#container{
 position:relative; 
 height:100%;
}
#left {
 position:absolute;
 left:0;
 right:342px;
 height: 100%;
}
#sidebar {
 width: 342px;
 height: 100%;
 float:right;
}

Demo

Answer 2

您可以使用calc。再次阅读here

因此，#left div的宽度等于100％减去#sidebar的宽度

#sidebar {
   height: 100%;
   width: 342px;
   float:right;
}

#left {
   float: left;
   width: calc(100% - 342px);
   width: -moz-calc(100% - 342px);
   width: -webkit-calc(100% - 342px);
   height: 100%;
}

DEMO

Answer 3

尝试此代码DEMO

<aside class="panel">
    ...
</aside>
<div class="content">
    ...
</div>

<强> CSS

.content {
    overflow: hidden;
  border: 1px solid;
  height:500px;
}
.panel {
    float: right;
    width: 20%;
  border: 1px solid;
  height:500px;
}

Answer 4

    #sidebar {
       height: 100%;
       width: 342px;
       position:fixed;
       right:0;
       top:0
    }

    #left {
     width:100%;
     box-sizing:border-box;
     padding:0 342px 0 0;
     height: 100%;
    }

http://jsfiddle.net/vlrprbttst/WYhz4/

Answer 5

使用此标记

<div class="container">
    <div class="sidebar"></div>
    <div class="main"></div>
</div>

＆安培; CSS：

body,html{height:100%;}
.container{display:block; height:100%; padding:0 150px 0 0;}
.container .main{display:block; height:100px; background:#f00;}
.container .sidebar{display:block; float:right; width:150px; height:100%; background:#0f0; margin:0 -150px 0 0;}

这是DEMO

Answer 6

使用.calc可能是最简单的选项，请参阅演示http://jsfiddle.net/qxEzX/6/

<div id="sidebar">Sidebar
</div>
<div id="left">Left 
</div>

<强> CSS

#sidebar{height: 100%;  width: 342px; float: right; background: #000000;}
#left{float: left; width: calc(100% - 342px); height: 100% background: #ff0000;}