單頁流體佈局

我試圖做一個窗口的應用程序類似單頁流體佈局

http://jsfiddle.net/szfkn/5/結構，但我想它不是在sizebars /頁腳/頭/內容重疊，有沒有辦法做到這一點，同時仍保持流體佈局？

或者任何關於保持窗口內容沒有滾動和流暢的好指針。

2012-03-12 austinbv

也許你可以發佈你想要它的樣子的圖像？ – Filype 2012-03-12 04:27:26

我拍攝的東西類似於jsfiddle或grooveshark的外觀和感覺 – austinbv 2012-03-12 04:28:05

你是什麼意思「沒有卷軸」？什麼滾動？ – Joseph 2012-03-12 04:32:47

史蒂夫·桑德森在自己的博客分享瞭如何生成一個不錯的CSS佈局幾個要點：http://blog.stevensanderson.com/2011/10/05/full-height-app-layouts-a-css-trick-to-make-it-easier/

不知道，如果它是你正在尋找的答案，但它是definetely值得一讀:)

來源

2012-03-15 10:53:20 Tallmaris

<html> 
<head> 
    <title>Fluid Layout</title> 
<style> 
    .hBar, .vBar 
    { 
      opacity:.5; 
      position:absolute; 
      font-weight:bold; 
      font-family:Tahoma, Arial, Times New Roman; 
      text-align:center; 
    } 
    div 
    { 
     display:block; 
    } 
    .hBar 
    { 
     height:10%; 
     width:100%; 
      left:0px; 
     z-index:5000; 
     font-size:1.2em; 
    } 
    .vBar 
    { 
     width:5%; 
     height:100%; 
     top:0%; 
     z-index:3000; 
     font-size:.7em; 
     color:Lime; 
    } 
    div#TopWrap 
    { 
     background-color:#000; 
     top:0%; 
    } 
    div#RightWrap 
    { 
     background:#0FF; 
     right:0px; 
    } 
    div#BottomWrap 
    { 
     background-color:#F00; 
     bottom:0px; 
    } 
    div#LeftWrap 
    { 
     background-color:#FF0; 
     left:0px; 
    } 
    div#ContentWrap 
    { 
     padding:7% 0% 0% 8%; 
     position:relative; 
     z-index:1000; 
    } 
</style> 
</head> 
<body> 
    <div id="TopWrap" class="hBar"> 
     Top Wrap</div> 
    <div id="RightWrap" class="vBar"> 
     Right Wrap</div> 
    <div id="BottomWrap" class="hBar"> 
     Bottom Wrap</div> 
    <div id="LeftWrap" class="vBar"> 
     Left Wrap</div> 
    <div id="ContentWrap"> 
     <h3> 
      Fluid Layout</h3> 
     <div> 
      @* Content goes here *@ 
     </div> 
    </div> 
</body> 
</html>

無法保證瀏覽器的兼容性，但應該爲您打下良好的基礎。我提供的例子只是填充內容包裝器。你可以修改div＃ContentWrap樣式爲：'margin：15％; overflow：hidden;'。請注意，您在該容器上放置的任何填充都會影響您的整體大小。

至於內容滾動，有很多jQuery插件可以幫助內容滾動。 http://jquerytools.org/demos/scrollable/vertical.html似乎有你正在尋找的一個很好的例子。

祝你好運！

來源

2012-03-15 04:01:49 TNCodeMonkey

單頁流體佈局

回答

相關問題