如何製作帶有兩個固定側欄的三欄式頁面

-2

我一直在這個網站上工作了一段時間，試圖讓事情爲我工作，但無濟於事。我想要做的是做一個三列的網站，兩個結束列是固定的。但是中心div應該根據內容是否溢出其高度來滾動。
貝婁是HTML如何製作帶有兩個固定側欄的三欄式頁面

<div id="main_body"> 
     <div id="accord_menu"> 
      Left Navigation Accordion 
     </div>    
     <div id="col_two"> 
      There is no knowledge that is not power 
     </div> 
     <div id="col_three"> 
      <div id="inner"> 
       Here is the right navigation 
      </div> 
     </div> 
     <br class="clear"/> 
    </div>

，這裏是我到目前爲止所使用的CSS：

#accord_menu{ 
      height: auto; 
      width: 150px; 
      position:fixed; 
      margin-left:3px; 
      margin-top: 53px; 
      padding-top: 20px; 
     } 

     #col_two{ 
      width: 600px; 
      height: 1000px; 
      border: 1px solid #AAA; 
      background: #E6E6FA; 
      position:relative; 

     } 
     #col_three{ 
      width: 200px; 
      height: auto; 
      max-height: 92px; 
      min-height: 91%; 
      position:fixed; 
      margin-left:900px 
      margin-top: 53px; 
      background: #E6E6FA; 
     }

當我調整瀏覽器，固定內容消失，尤其是正確的，並且會有對它沒有水平滾動。我也嘗試將固定位置放置在相對定位的div中，當瀏覽器調整大小時，內容開始移動並流過中心div (col_two)。我非常感謝所有幫助。謝謝。

來源

2013-06-01 James Okpe George

所以呢？你有沒有發現它？ – nouveau

不，我想要的是固定列的Facebook國王，但後來我意識到JavaScript可能是我需要的 –

解釋。我們的答案怎麼樣並沒有完成這個？腳本會爲您提供什麼？ – nouveau

我很害怕回答，因爲這裏有太多的倒票... HERE is a working example:我希望這是你的目標。

HTML

<aside class="global-nav-w"> 
    <nav class="global-nav"> 
     Left - 
    </nav> 
</aside> 

<section class="main-content cf"> 
    Main content 
</section> 

<aside class="sidebar"> 
    <nav class="sub-nav"> 
     Right 
    </nav> 
</aside>

CSS

* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } 
/* Google box sizing - this should be default for any person writing CSS as of 2013 */ 

/* Google micro clear fix to clear floats without the extra <br /> */ 
.cf:before, 
.cf:after { content: " "; display: table; } 
.cf:after { clear: both; } 

html, body { 
    margin: 0; padding: 0; 
    height: 100%; 
} 

.global-nav-w, .main-content, .sidebar { 
    width: 100%; 
    float: left; 
} /* stack them for mobile ? */ 

.global-nav-w {  
    background-color: red; 
} 

.main-content { 
    background-color: yellow; 
} 

.sidebar { 
    background-color: lightblue; 
} 


@media (min-width: 50em) { /* ========= */ 

    .global-nav-w { 
     position: fixed; 
     width: 15em; 
     top: 0; left: 0; 
     height: 100%; /*?*/ 
    } 

    .main-content { 
     width: 100%; 
     padding-left: 15em; 
     padding-right: 15em; 
     height: 100%; /*?*/ 

     min-height: 100em; /* to show scrolling */ 
    } 

    .sidebar { 
     position: fixed; 
     width: 15em; 
     top: 0; right: 0; 
     height: 100%; /*?*/ 
    } 

} /* ===END @MEDIA RULE ETC ============== */

來源

2013-06-01 20:50:22 nouveau

小心一般固定位置。我只是最好買大型桌面平板電腦的東西。固定的東西在聯想，windows和惠普機器上都很麻煩。它可以以某種方式完成......但不只是定期修正。我目前正試圖弄清楚如何獲得一些固定的東西工作..但我不能相信在生產呢。吮！ – nouveau

-1

在你的HTML：

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset=utf-8 /> 
    </head> 
    <body> 
     <aside id='left'>left</aside> 
     <section id='main'>main</section> 
     <aside id='right'>right</aside> 
    </body> 
</html>

而這個CSS：

aside, section { padding: 2%; } 
aside { width: 21%; background-color: #eee; top: 0; bottom: 0; } 
section { width: 46%; background-color: #ddd; } 
aside#left { position: fixed; } 
aside#right { position: fixed; right: 0; } 
section#main { position: absolute; left: 25%; right: 25%; }

會產生你想要的效果。

編輯：從aside, section刪除float: left;不是它重要的，因爲它工作。因爲position: fixed和absolute將覆蓋浮動行爲。

來源

2013-06-01 19:36:45 Esteban

你不能將浮點數添加到元素以及定位 –

@JamesOkpeGeorge你試過了嗎？它實際上工作。 – Esteban

如何製作帶有兩個固定側欄的三欄式頁面

回答

相關問題