固定寬度絕對欄與流體內容

我試圖創建其中也有具有以下性質的左側邊欄流動佈局的網站：固定寬度絕對欄與流體內容

時的主要內容做
它不滾動它佔用的頁面

我見過的唯一佈局的整個高度，這是一個：http://stugreenham.com/demos/fluid-width-with-a-fixed-sidebar/

HTML

<div id="page"> 
    <header id="sidebar"> 
     //SIDEBAR CONTENT HERE 
    </header> 

    <article id="contentWrapper"> 
     <section id="content"> 
      //CONTENT HERE 
     </section> 
    </article> 
</div>

CSS

html { 
    overflow: hidden; 
} 

#sidebar { 
    background: #eee; 
    float: left; 
    left: 300px; 
    margin-left: -300px; 
    position: relative; 
    width: 300px; 
    overflow-y: auto; 
} 

#contentWrapper { 
    float: left; 
    width: 100%; 
} 

#content { 
    background: #ccc; 
    margin-left: 300px; 
    overflow-y: auto; 
}

但是我認爲這是一個貧窮的解決方案，因爲它不僅需要負利潤，但它也需要JavaScript。

有沒有更好的方法來實現這一目標？

來源

2014-07-01 Jimmy

不，我已經做過這件事，沒有JS他們沒有任何解決方案。 –

Demo

css

#sidebar { 
    position:fixed; 
    height:100%; 
    width: 300px; 
    background-color: #ccc; 
    overflow-y: auto;     
} 
#contentWrapper { /* not using margin */ 
    box-sizing:border-box; 
    background-color:#eee; 
    position:absolute; 
    left:300px; 
    width:calc(100% - 300px); 
    min-height: 100%; 
} 
#contentWrapper { /* using margin */ 
    box-sizing:border-box; 
    background-color:#eee; 
    margin-left: 300px; 
    /*position:absolute; 
    left:300px; 
    width:calc(100% - 300px);*/ 
    min-height: 100%; 
} 



html,body,#page { 
    width: 100%; 
    height: 100%; 
}

來源

2014-07-01 11:31:39 4dgaurav

爲contentWrapper，是否有必要有'position：absolute'和'left：300px'？靜態定位和左邊距300px – nightgaunt

是的，你可以做到這一點，如果你想使用保證金，我認爲OP可能需要沒有保證金的解決方案。無論如何，我更新。 – 4dgaurav

你可以做這樣的事情：http://jsfiddle.net/9U2U4/ 演示用大量的文字：http://jsfiddle.net/9U2U4/1/

CSS：

html, body { 
    height: 100%; 
} 
body { 
    margin:0; 
    padding:0; 
} 
#page { 
    height: 100%; 
} 
#sidebar { 
    position: fixed; 
    left:0; 
    top:0; 
    bottom:0; 
    width: 30%; 
    background-color: #eee; 
} 
#contentWrapper { 
    margin-left: 30%; 
    min-height: 100%; 
    position: relative; 
    background: #ccc; 
} 

#content 
{ 
    padding: 10px; 
}

HTML：

<div id="page"> 
    <header id="sidebar">// Sidebar</header> 
    <article id="contentWrapper"> 
     <section id="content"> 
      <p>Text</p> 
     </section> 
    </article> 
</div>

來源

2014-07-01 11:27:26

固定寬度絕對欄與流體內容

回答

相關問題