絕招網頁設計（全屏和非全屏元素）

UPDATE絕招網頁設計（全屏和非全屏元素）

做一些測試和本地主機的修改之後，我已經找到了我所需要的：

網站一定不能滾動，只內容區域。

縮放邊欄高度時應始終保持頁面底部一致。

頭也必須進行放大和縮小，但仍全寬

來源

2014-03-04 user3357780

小提琴： http://jsfiddle.net/dkx2q/2/

事情是這樣的，也許：

CSS

body{ 
    background-color:rgb(0,0,0); 
} 
#container{ 
    display:block; 
    width:100%; 
    height:100%; 
} 
#fullScreenImage{ 
    float:left; 
    width:25%; 
    height:100%; 
    background-color:rgb(124,197,118); 
    position:relative; 
} 
#content{ 
    float:left; 
    width:75%; 
    height:100%; 
} 
#header{ 
    display:block; 
    height:15%; 
    background-color:rgb(94,142,178); 
    position:relative; 
} 
#sidebar{ 
    float:left; 
    height:85%; 
    width:20%; 
    background-color:rgb(162,94,179); 
    position:relative; 
} 
#contentArea{ 
    float:left; 
    width:80%; 
    height:85%; 
    background-color:rgb(255,255,255); 
    position:relative; 
} 
span{ 
    position:absolute; 
    top:50%; 
    width:100%; 
    text-transform:uppercase; 
    font-weight:bold; 
    font-family:Helvetica, 'Helvetica Neue', 'Arial Block', Arial; 
    font-size:9em; 
    text-align:center; 
} 
#header span{ 
    font-size:7em; 
    top:40%; 
}

HTML

<body> 
    <div id='container'> 
     <div id='fullScreenImage'><span>Full Screen Image</span> 
     </div> 
     <div id='content'> 
      <div id='header'><span>Header</span></div> 
      <div id='sidebar'> 
       <span>Sidebar</span> 
      </div> 
      <div id='contentArea'><span>Content Area</span></div> 
     </div> 
    </div> 
</body>

來源

2014-03-04 02:45:12 chiliNUT

'html，body {height：100％}'丟失。 http://jsfiddle.net/dkx2q/2/它在你的網站上工作，因爲它在快速模式下渲染（沒有定義文檔類型） –

謝謝！我習慣於在一個框架內進行操作，例如body屬性和doctype已經定義的東西，這絕對是我需要處理的東西。 – chiliNUT

這類作品。 http://i.imgur.com/JLMsUcl.png <我仍然有問題試圖讓這個圖像保持全屏，不管有什麼內容。側邊欄和內容區域必須保持100％自動高度，我無法弄清楚這一點。你在代碼中基本上做了我所做的。有任何想法嗎？ – user3357780

絕招網頁設計（全屏和非全屏元素）

回答

相關問題