Question

我一直致力于聊天网站的网站设计，但到目前为止，我所做的每一次尝试都是失败的。我试图用表来做，它总是在一个浏览器中失败（主要是IE浏览器），div，以及更多。

网站必须是全屏的，最小宽度为900，最小高度为500px，因此它不会变得更小。我想在没有任何javascript的情况下这样做（我已经在JS中完成了，但是这需要在没有它的情况下完成：＆lt;）

这是一张应该是什么样子的照片。

我希望在纯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>

Answer 1

好的，从你的问题中提取了一些问题;

首先，一点提示：在大多数情况下，IE中的CSS似乎与其他浏览器完全不同。为此，在属性前面使用各种“IE Hack”符号之一（我使用＃符号），它只适用于IE。

例如：

html
{
   background: #F00 ;
   #background: #0F0 !important ;
}

将使所有浏览器显示红色背景，并且只有IE将具有绿色背景。

其次，为什么不使用min-width和min-height属性？它们兼容所有东西（以及IE6或更早版本中的错误;请查看here了解更多信息）并随时与我合作。将宽度和高度（显然）设置为100％，并在html和body上设置所有这些（如下所示）

html, body {
   width: 100% ;
   height: 100% ;
   min-width: 900px ;
   min-height: 500px ;
}

对于其他方法，您可以尝试将整个页面数据（从在主体标记后面开始）包装为div（确保将其保留为块）让它跨越整个页面。

值得注意的另一个注意事项是，如果您想要一个干净的全屏网站，您还应该将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 ; }

Answer 2

这实际上是一个非常复杂的问题。我不完全确定它可以用纯CSS和没有javascript / jQuery。

现在设置盒子模型的方式并不适合全宽度，全高度布局。

Answer 3

通常情况下，我不喜欢使用表格，但自动高度问题让我转向这个......

与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>

CSS / HTML全屏网站

3 个答案: