具有固定元素和多個滾動條的特定CSS佈局

對於最後幾天，我對某個網站想要的特定佈局有一些問題。我已經添加了一張圖片來解釋佈局，以及一些我一直在嘗試使用的CSS代碼。我嘗試使用浮動佈局，絕對定位和各種組合來修復佈局，但我似乎無法做到。我希望你們中的任何人都可以幫我解決這個問題。具有固定元素和多個滾動條的特定CSS佈局

下面是版面圖：

Image with description how the layout should be

這裏是CSS代碼：

html, body { 
    overflow:hidden; 
} 

* { 
    margin:0; 
    padding:0; 
} 

.header { 
    background-color:#CCC; 
    position:fixed; 
    left:0; 
    top:0; 
    width:100%; 
    height:40px; 
} 

.wrapper { 
    position:absolute; 
    width:100%; 
    top:40px; 
    bottom:40px; 
} 

.left { 
    float:left; 
    overflow-y:scroll; 
    width:30%; 
    min-width:300px; 
    height:100%; 
} 

.right { 
    float:left; 
    overflow-y:scroll; 
    right:0; 
    width:70%; 
    height:100%; 
} 


.footer { 
    background-color:#000; 
    position:fixed; 
    bottom:0; 
    left:0; 
    width:100%; 
    min-width:500px; 
    height:40px; 
}

來源

2012-11-27 Daan Vermeulen

這是你想要的嗎？ DEMO

REMOVE

.wrapper 
{ 
    position:absolute; 
    width:100%; 
    top:40px; 
    bottom:40px; 
} 

.left 
{ 
    float:left; 
    overflow-y:scroll; 
    width:30%; 
    min-width:300px; 
    height:100%; 
} 

.right 
{ 
    float:left; 
    overflow-y:scroll; 
    right:0; 
    width:70%; 
    height:100%; 
}

更換

div.left, 
div.right { 
    display:inline; 
    float: left; 
    position: relative; 
    height: 100%; 
    overflow-y: scroll; 
} 

.left { 
    width: 30%; 
} 

.right { 
    width: 70%; 
}

UPDATEDEMO

* 
{ 
    margin:0; 
    padding:0; 
} 

div.wrapper { 
    width: 100%; 
    min-width: 600px; /* If the window gets bellow 600px .left will stay 30% of 600 and .right will stay 70% of 600*/ 
} 

div.left, 
div.right { 
    display:inline; 
    float: left; 
    position: relative; 
    height: 100%; 
    overflow-y:scroll; 
} 

.left { 
    width: 30%; 
    background: red; 
} 

.right { 
    width: 70%; 
    background:green; 
} 

.header 
{ 
    background-color:#CCC; 
    position:fixed; 
    left:0; 
    top:0; 
    width:100%; 
    height:40px; 
} 

.wrapper 
{ 
    position:absolute; 
    width:100%; 
    top:40px; 
    bottom:40px; 
} 



.footer 
{ 
    background-color:#000; 
    position:fixed; 
    bottom:0; 
    left:0; 
    width:100%; 
    min-width:500px; 
    height:40px; 
}

來源

2012-11-27 19:26:37

嗨，Eric，謝謝你的回覆。當我在您提供的代碼中爲'.left'類添加'min-width：300px'並調整窗口大小時，'.right'類將消失。 –

爲了使佈局成爲流體，您不能使用'px'中的設置寬度必須是百分比。你是否需要左列的最小寬度爲'300px'，或者你是否需要'min-width：x％'？ 'x'小於30％的任何百分比 –

問題是，如果大小小於300px，則左側的佈局必須具有水平滾動條才能保留正在顯示的列表視圖的佈局。但如果這不可能比我想感謝你的幫助:) –

我們最終採用柔性盒佈局能夠使用例如300像素，讓其餘的是流體。

來源

2013-10-09 08:38:44

具有固定元素和多個滾動條的特定CSS佈局

回答

相關問題