CSS/HTML全屏网站
我一直致力于聊天网站的网站设计,但到目前为止,我所做的每一次尝试都是失败的.我试图用表格做它,它总是在一个浏览器中失败(主要是IE浏览器),div,还有更多.
该网站必须是全屏的,最小宽度为900,最小高度为500px,因此它不会变小.我想在没有任何javascript的情况下这样做(我已经在JS中完成了,但是这需要在没有它的情况下完成:<)
这是一张应该是什么样子的照片.
我希望这在纯CSS/HTML中是可行的
提前致谢
编辑
我在Firefox + Chrome中使用它,但IE决定不遵循任何规则......
<html>
<head>
<style type="text/css">
body{
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
}
</style>
</head>
<body>
<div style="height: 100%; width: 100%;">
<div style="position: relative; height: 100%; width: 100%; background-color: gray; min-width: 900px; min-height: 500px;">
<div style="position: absolute; height: 30px;left:0px; right: 300px ; background-color: yellow; bottom: 0;">
Input
</div>
<div style="position: absolute; height: 200px; width:300px; right: 0px; background-color: green; bottom: 0;">
ad
</div>
<div style="position: absolute; bottom: 200px; width:300px; right: 0px; top: 20px; background-color: blue;">
online
</div>
<div style="position: absolute; width:300px; right: 0px; top: 0px; height: 20px; background-color: red;">
online menu
</div>
<div style="position: absolute; right: 300px; top: 0px; left: 0px; height: 20px; background-color: yellow;">
tabs
</div>
</div>
</div>
</body>
</html>
好的,从你的问题中提取了一些问题;
首先,一个小技巧:在大多数情况下,IE中的CSS似乎与其他浏览器截然不同.为此,在属性前面使用各种"IE Hack"符号之一(我使用#符号),它只适用于IE.
例如:
html
{
background: #F00 ;
#background: #0F0 !important ;
}
将使所有浏览器显示红色背景,只有IE将具有绿色背景.
第二,为什么不使用min-width和min-height属性？它们兼容所有东西(以及IE6或更早版本中的错误;请查看此处了解更多信息)并随时与我合作.将宽度和高度(显然)设置为100%,并在html和body上设置所有这些(如下所示)
html, body {
width: 100% ;
height: 100% ;
min-width: 900px ;
min-height: 500px ;
}
至于其他方法,您可以尝试使用div 包装整个页面数据(在body标签之后开始)(确保将其保留为块)以使其跨越整个页面.
值得注意的另一个值得注意的是,overflow如果你想要一个干净的全屏网站,你也应该将属性应用于html/body.如果你超出窗口的宽度,你将失去内容,如果你选择摆脱它们,它将删除任何滚动条.
希望这可以帮助!
编辑:
看了你的新图片链接后,这个很容易!:]
请记住,默认情况下div是块,以下应该可以工作(这是未经测试的,因此可能需要进行一些调整):
<body>
<div id="page">
<div id="right">
<div class="thirty">Top bar</div>
<div class="tall">Middle bar</div>
<div id="rt_bot">Bottom bar</div>
</div>
<div id="left">
<div class="thirty">Left Top Bar</div>
<div class="tall">Left Mid Bar</div>
<div id="lf_bot">Left Bottom Bar</div>
</div>
<div id="container"></div>
</div>
</body>
和CSS:
html, body {
width: 100% ;
height: 100% ;
min-height: 500px ;
min-width: 900px ;
margin: 0px ;
}
div#page {
height: 100% ;
}
div#right {
float: right ;
height: 100% ;
width: 300px ;
}
div#rt_bot {
height: 200px ;
}
div#left {
float: left ;
}
.thirty {
height: 30px ;
}
.tall {
height: 100% ;
}
div#lf_bot {
height: 50px ;
}
| 归档时间： |
|
| 查看次数： |
17262 次 |
| 最近记录： |