html - 混合固定和百分比宽度

Question

我正在尝试在我的“app-view”div 中构建一个布局，其中“leftPane”具有固定的宽度，“rightPane”的宽度随着浏览器宽度（百分比）扩展。这可以用 CSS（没有 Javascript）吗？下面是我在 div 中布局的基本样式。

#app-view
{
    width: 100%;
    height: 400px;
}

#leftPane
{
    float: left;
    width: 33.33%;
    max-width: 250px;
    height: 400px;
    background: blue;
}

#rightPane
{
    float: left;
    width: 66.66%;
    height: 400px;
    background: green;
}

Answer 1

您可以使用leftand righton#rightPane代替宽度。您还需要#app-view相对定位并且两个窗格都是绝对的。

#app-view
{
    width: 100%;
    height: 400px;
    position: relative;
}

#leftPane, #rightPane 
{
    height: 100%;
    position: absolute;
}

#leftPane
{
    width: 250px;
    background: blue;
}

#rightPane
{
    left: 250px;
    right: 0;
    background: green;
}

JSFiddle

Answer 2

<div>
  <div id="leftpane" style="float: left; width: 250px;">left pane content</div>
  <div id="rightpane" style="margin-left: 250px;">right pane content</div>
</div>