混合固定寬度和百分比

-1

我想在我的「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; 
}

來源

2013-01-22 user1998726

我可能已經找到了解決辦法，但我不知道這是否是最優雅的。我不是漂浮在右邊，我給它100％的寬度和250px的左邊距。我也刪除頭上的浮點數，因爲它導致問題。如果有人知道更優雅的解決方案，我仍然希望聽到它！ – user1998726

我認爲我的解決方案應該適合您。 –

您可以使用#rightPane代替寬度left和right。您還需要使#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

來源

2013-01-22 01:20:38

謝謝！如果我想要應用程序視圖，左右窗格的高度是100％，並且粘着頁腳？ – user1998726

<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>

來源

2013-01-22 01:17:52 clover

混合固定寬度和百分比

回答

相關問題