全屏CSS / HTML网站
[英]Full screen site in CSS/HTML
问题描述
我一直在为聊天网站设计网站，但是到目前为止，我为使它正确所做的每一次尝试都失败了。 我尝试使用表来执行此操作，但它总是在一个浏览器（大多数为IE tho），divs和更多浏览器中失败。
网站必须为全屏显示，最小宽度为900，最小高度为：500像素，因此尺寸不会变小。 我想在没有任何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>
3 个解决方案
解决方案1
6 2010-12-03 20:44:26
好了，从您的问题中提取了一些问题；
首先，有个小技巧：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 ;
}
解决方案2
0 2010-12-03 21:59:37
这实际上是一个极其复杂的问题。 我不完全确定是否可以使用纯CSS而不使用javascript / jQuery。
现在，盒子模型的设置方式不能很好地适应全宽，全高的布局。
解决方案3
0 2010-12-04 02:43:00
通常，我不喜欢使用表格，但是自动高度问题使我转向...
可以在IE8上使用，但在IE6上可能不起作用。。。IE6上没有任何功能，因此无需担心。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled</title>
<style type="text/css">
html, body {width: 100%; height: 100%; margin: 0 0 0 0; padding: 0 0 0 0; }
table#content {min-width: 900px; min-height: 500px; width: 100%; height: 100%; border-collapse: collapse; }
table#content td {border: 1px solid black; }
table#content td.topLeft {height: 30px; }
table#content td.topRight {width: 300px; height: 30px; }
table#content td.bottomLeft {height: 30px; }
table#content td.bottomRight {width: 300px; height: 200px; }
table#content tr.spacing {height: 170px; }
</style>
</head>
<body>
<table id="content">
<tr>
<td class="topLeft">Top Left</td>
<td class="topRight">Top Right</td>
</tr>
<tr>
<td class="centerLeft" rowspan="2">Center Left</td>
<td class="centerRight">Center Right</td>
</tr>
<tr class="spacing">
<td class="bottomRight" rowspan="2">Bottom Right</td>
</tr>
<tr>
<td class="bottomLeft">Bottom Left</td>
</tr>
</table>
</body>
</html>
HTML 和 CSS - 全屏图像
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.