Question

我有一个父div（ - 图中），他的宽度我事先不知道。

我有两个孩子div（a和b）：

b - 始终是已知的固定宽度，并且始终位于右侧。

a - 填充剩余空间

-----------------------------------
- aaaaaaaaaaaaaaaaaaaaaaaaaa bbbb -
- a                        a b  b -
- aaaaaaaaaaaaaaaaaaaaaaaaaa bbbb -
-----------------------------------

a和b都具有相同的固定高度。

我想有一个简单的解决方案，但我还没有找到它。我试过漂浮两个，但是其中一个被推到了下面。

有什么想法吗？

Answer 1

您正在寻找holy grail :)这篇文章有一个完整的示例，并通过了解，但这里是摘要。

您的包装div需要具有与所需静态宽度列相同宽度的右边距。内部div向左浮动，静态宽度列通过使用负边距移动到填充区域。

以下是教程

的标记

<div id="container">
  <div id="center" class="column"></div>
  <div id="left" class="column"></div>
  <div id="right" class="column"></div>
</div>

和css

#container {
  padding-left: 200px;   /* LC width */
  padding-right: 150px;  /* RC width */
}
#container .column {
  position: relative;
  float: left;
}
#center {
  width: 100%;
}
#left {
  width: 200px;          /* LC width */
  right: 200px;          /* LC width */
  margin-left: -100%;
}
#right {
  width: 150px;          /* RC width */
  margin-right: -150px;  /* RC width */
}

本教程是一个2列示例，但是如果你摆脱了左列并从容器中删除了左边的填充，你应该很高兴。

Answer 2

可能您可以使用此http://jsfiddle.net/sandeep/NCkL4/8/

之类的display:table属性

HTML：

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

的CSS：

#parent{
    overflow:hidden;
    background:yellow;
    position:relative;
    display:table;
}
.left{
    display:table-cell;
}
.right{
    background:red;
    width:50px;
    height:100%;
    display:table-cell;
}

但它不支持IE7。

或者你可以这样做：

HTML：

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

的CSS：

.right {float:right; width:200px; }
.left { background: green;}

检查此http://jsfiddle.net/47YMn/1/

新小提琴http://jsfiddle.net/sandeep/47YMn/7/

Answer 3

http://matthewjamestaylor.com/blog/perfect-multi-column-liquid-layouts

特别是这，因为你想在右侧使用固定尺寸的容器：（这对移动设备更有意义..） http://matthewjamestaylor.com/blog/perfect-2-column-right-menu.htm

Sry，实际上这个我猜： http://matthewjamestaylor.com/blog/ultimate-2-column-right-menu-pixels.htm

Answer 4

<div style="max-width: 100%; overflow-x: hidden; margin: 0 auto"> <nav class="toolbar"> <div class="nav-wrapper"> <a data-activates="slide-out" class="button-collapse"><i class="material-icons">menu</i></a> <a href="http://www.leadingindicatorforecasting.com/" target="_blank"><img src="../../../../logo.png"></a> <label class="title-solv"> Solventure LIFe</label> <ul id="nav-mobile" class="right"> <li class="usericon"><i class="large material-icons">perm_identity</i></li> <li class="username">{{username}}</li> <li> <i [routerLink]="['/login']" class="large material-icons">power_settings_newt</i> </li> </ul> </div> </nav> <div style="max-width:50px;"> <ul id="slide-out" class="side-nav fixed own"> <li [ngClass]="{'activated': isValid1 }"><a (click)="m1()" class="whitecolor">Dashboard</a></li> <li [ngClass]="{'activated': isValid2 }"><a (click)="m2()" class="whitecolor">Dataset Management</a></li> <li [ngClass]="{'activated': isValid3 }"><a (click)="m3()" class="whitecolor">Forecast</a></li> <li [ngClass]="{'activated': isValid4 }"><a (click)="m4()" class="whitecolor">Reporting</a></li> <li [ngClass]="{'activated': isValid5}"><a (click)="m5()" class="whitecolor">Indicator Cloud</a></li> </ul> </div> </div> <div class="home"> <div class="webbox"> <router-outlet></router-outlet> </div> </div>怎么样？

display: flex

http://jsfiddle.net/NCkL4/1037/

Answer 5

这个使用花车，而上面的另一个优秀的答案使用定位。这取决于你选择的人。每个都有它的优点和缺点。

CSS

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, button,
table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; vertical-align: baseline; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; }
body { font: normal 100%/1.5em "Helvetica Neue", Helvectica, Arial, sans-serif; color: #353E34; background: #FFF; text-align: left; }
html>body { font-size: 16px; }
.content-wrapper { width: 100%; float: left; }
.content { margin-right: 220px; background: #9CC; }
.sidebar { float: right; width: 200px; margin-left: -200px; background: #FDE95E; }
.inner { margin: 10px; }
.footer { clear: left; width: 100%; background: black; color: #FFF; text-align: center; padding: 4px 0; }

HTML

<div class="content-wrapper">
  <div class="content">
    <div class="inner">
      <p>Content</p>
    </div>
  </div>
</div>
  <div class="sidebar">
    <div class="inner">
      <p>Sidebar</p>
    </div>
  </div>
  <div class="footer">
    <p>Footer</p>
  </div>

Answer 6

这是一种干净且非常可接受的方式。充分利用浮点数在这里的工作原理，在这里使用了明确的解决方法，但要清除浮点数，你也可以在容器结束标记之前使用clear:right的额外div。

http://jsfiddle.net/sg3s/sSJvT/

CSS：固定宽度+动态宽度子，填充100％父宽度？

6 个答案: