CSS/HTML中的全屏站点_Html_Css

CSS/HTML中的全屏站点

html css

CSS/HTML中的全屏站点,html,css,Html,Css,我一直在为一个聊天网站设计一个网站，但到目前为止，我每一次尝试都失败了。我曾经试着用表格来做这件事，但在一个浏览器（主要是IE tho）、div和很多其他浏览器中都失败了该网站必须是全屏的，最小宽度为900，最小高度为500px，所以不会变小。我想在没有任何javascript的情况下完成这项工作（我在JS中制作了它，但这需要在没有它的情况下完成：

我一直在为一个聊天网站设计一个网站，但到目前为止，我每一次尝试都失败了。我曾经试着用表格来做这件事，但在一个浏览器（主要是IE tho）、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>


身体{
保证金：0；
填充：0；
边界：0；
大纲：0；
字体大小：100%；
垂直对齐：基线；
}
输入
公元
在线 的
在线菜单
标签

好的，从您的问题中提取了几个问题

首先，有一点提示：IE中的CSS在大多数情况下似乎与其他浏览器截然不同。为此，请在属性前面使用各种“IE黑客”符号之一（我使用#符号），使其仅适用于IE

例如：

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

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

其次，为什么不使用

minwidth

和

minheight

属性？它们与任何东西都兼容（IE6或更早版本中的buggy；查看更多信息），并且总是和我一起玩这个把戏。将宽度和高度（显然）设置为100%，所有这些都在html和正文上（如下所示）

至于其他方法，您可以尝试使用div（确保保留它的块）包装整个页面数据（从body标记之后开始），使其跨越整个页面

另一个值得注意的是，如果您想要一个干净的全屏站点，那么您还应该对html/正文应用

overflow

属性。如果超出窗口宽度，您将丢失内容，如果您选择删除滚动条，它将删除所有滚动条

希望这有帮助

编辑：

查看新的图像链接后，此链接很简单！：]

请记住，默认情况下div是块，以下操作应该可以正常工作（这未经测试，因此可能需要进行一些调整）：

这实际上是一个极其复杂的问题。我不完全确定是否可以使用纯CSS而不使用javascript/jQuery

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

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

适用于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，正文{宽度：100%；高度：100%；边距：0；填充：0；}
表#内容{最小宽度：900px；最小高度：500px；宽度：100%；高度：100%；边框折叠：折叠；}
表#内容td{边框：1px纯黑色；}
表#content td.topLeft{高度：30px；}
表#content td.topRight{宽度：300px；高度：30px；}
表#content td.bottomLeft{高度：30px；}
表#content td.bottomRight{宽度：300px；高度：200px；}
表#content tr.spating{height:170px；}
左上角
右上角
中间偏左
中右翼
右下角
左下角

您的图像链接似乎已断开。你能试试Tinypic吗？好的，很酷，这行得通，我会在下面更新我的答案。嘿，我知道最小宽度/高度和IE shitness，但这并不能解决如何在CSS中制作整个布局。我尝试了很多东西，现在都找不到线索了。我不能把它们都放在正确的位置。。。也许你知道怎么做吗？领先你一步；我是根据你的照片编辑这篇文章的。这会给你一个好的开始。我们的想法是将事物分解为多个部分，然后向下工作（我是如何做到这一点的，首先是左窗格和右窗格，然后是每个窗格中的行。我尝试过你的示例，但根本不起作用=/谢谢你的尝试，但这是一个非常棘手的布局：p这里有一张图片，如果只有宽度：100%-30px；_;让我回到工作环境中，我会为你解决这个问题，我会的如果没有另一个有效的答案，那就太好了，如果你能做到的话：）你知道你什么时候回家吗？如果你看看我在第一篇文章中所做的编辑，这是可能的，但是（像往常一样，把事情搞砸了）=（这在纯CSS中是完全可能的。这正是创建CSS的目的！表格是非常不必要的。我仍在出差，但仍在关注这个问题。我迟早会回家……表格是完全不必要的。我写这篇文章的时候很匆忙。嘿，伙计们，我很抱歉回复太晚。我在布拉格，我在Internet决定不再工作。现在回到家，我自己修复了它！感谢所有的帮助。我制作了一个具有相对位置和最小宽度/高度的顶部div。该div内的div以绝对位置放置，在每个浏览器中都非常有效！如果你想在我的网站的新beta版中看到它：（整个网站将在周五进行大修，所以现在不要看gfx:p）

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

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

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