如何创建一个包装浏览器视图区域的界面？答案

【问题标题】：How to to create an interface that wraps the browsers view area?如何创建一个包装浏览器视图区域的界面？
【发布时间】：2012-01-18 14:50:16
【问题描述】：

我正在为我的服务设计一个界面，它需要包裹整个视图区域。它更像是一个应用程序，而不是一个普通的网页。我想知道像 css 3.0 这样的现代技术的最佳实践。我不想在闪存中写这个。

很抱歉，这张照片来自 mspaint，但它又快又脏。

目标是让顶栏保持在正常位置，左侧栏以相同的方式。中间部分（应用区域）需要用可能超出应用区域的覆盖元素填充其余部分。

我知道我可以进行 javascript 计算，但我希望有更好的方法。

【问题讨论】：

标签： css height width

【解决方案1】：

该层是一种混合了固定宽度要求的流体/液体宽度。您可以使用普通的 CSS 轻松做到这一点。您可以通过在 CSS 中指定固定位置来制作右下角的框。检查此以获取液体示例example。更多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;
}

【讨论】：

无限高度怎么样？我希望高度也能包裹浏览器。希望不用 javascript 计算高度。
嘿，我想这会是一样的，以百分比而不是像素指定宽度。 #divContainer {height:100%;width:100%;} 这样就足够了，但请注意，如果分辨率非常高，您的所有控件要么被过度拉伸，要么它们之间的间距太小，Damien。
如果容器元素在简单的情况下也设置为 100% 就像 body{ height:100%;}
没有将车身高度设置为 100% 并且将内部容器设置为百分比高度不起作用。