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

您可以left使用right和#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>

混合固定和百分比宽度

2 个答案: