当前位置：文江博客话题详情

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

发布于 2024-12-26 22:42:32 字数 305 浏览 0 评论 0原文

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

example

抱歉，该照片来自 mspaint，但速度又快又脏。

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

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

长伴 2025-01-02 22:42:32

该层是与固定宽度要求混合的流体/液体宽度。您可以使用普通 CSS 轻松做到这一点。您可以通过在 CSS 中指定固定位置来将框放在右下角。
检查液体示例示例。更多信息此处

编辑
在此处输入图像描述
将容器元素的高度设置为 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;
}

That layour is a fluid/liquid width mixed with fixed width requirement. You can do that easily with normal CSS. You can do the box in low right hand corner by specifying fixed position in CSS.
Check this for a liquid example example. More here

Edit
enter image description here
Set the container element's height to 100%. This is still rough but will get you started

<!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 file

/* 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;
}

回复收藏 0 原文

~没有更多了~