如何創建一個包裝瀏覽器視圖區域的界面？

我正在爲我的服務設計一個接口，它需要包裹整個視圖區域。它更像是一個應用程序，然後是一個普通的網頁。我想知道像css 3.0這樣的現代技術的最佳實踐。我不想寫在閃存中。如何創建一個包裝瀏覽器視圖區域的界面？

example

對不起，這張照片是從MSPAINT，但它是快速和骯髒。

目標是讓頂欄處於正常位置，左欄以同樣的方式。中間部分（應用程序區域）需要用可能超出應用程序區域的覆蓋元素填充其餘部分。

我知道我可以做javascript計算，但我希望有更好的方法。

來源

2012-01-16 JustinKaz

該鋪布是混合有固定寬度要求的流體/液體寬度。你可以用普通的CSS輕鬆做到這一點。通過在CSS中指定固定位置，您可以在右下角執行框。檢查液體示例example。更多here

編輯 enter image description here 設置容器元素的高度爲100％。這仍然是粗糙的，但讓你開始

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<title>Untitled Document</title> 
<link rel="stylesheet" type="text/css" href="css/test-style.css"> 
</head> 

<body> 

<div id="dv-Container"> 

    <div id="dv-header"> 
     <h2>Header</h2> 
    </div> 

    <div id="dv-sideBar"> 
     <h2>Side bar</h2> 
    </div> 

    <div id="dv-Content"> 
     <h2>Content</h2> 
    </div> 

    <div id="dv-Controls"> 
    </div> 
</div> 

</body> 
</html>

CSS文件

/* CSS Document */ 

html{ 
height:100%; 
} 

body{ 
margin:0; 
padding:0; 
min-height:100%; 
height:100%; 
} 

h2,a{ 
    margin:0; 
    padding:0; 
} 

#dv-Container{ 
background-color:#CCFFFF; 
width:100%; 
height:100%; 
margin:0pt; 
} 

#dv-sideBar{ 
    float:left; 
    width:200px; 
    height:100%; 
    background-color:#CCCCCC; 
} 

#dv-Content{ 
    float:inherit; 
    background-color:#FFFFFF; 
    width:100%; 
    height:100%; 
} 

#dv-Controls{ 
    height:150px; 
    width:100px; 
    background-color:#00CC99; 
    position:fixed; 
    right:10px; 
    bottom:100px; 
    margin:0; 
    float:right; 
}

來源

2012-01-16 05:21:33

什麼無限的高度？我希望高度也包括瀏覽器。希望沒有javascript計算高度。 – JustinKaz 2012-01-16 16:50:27

嘿，這將是我認爲相同，指定寬度以百分比而不是像素。 #divContainer {height：100％; width：100％;}這就足夠了，但要注意，如果分辨率非常高，所有的控件要麼太伸展，要麼間距太小，Damien。 – 2012-01-16 18:19:29

100％身高根本不起作用 – JustinKaz 2012-01-16 18:59:45

如何創建一個包裝瀏覽器視圖區域的界面？

回答

相關問題