个人中心
gpt4 book ai didi

html - CSS/HTML 中的全屏网站

转载 作者：太空狗 更新时间：2023-10-29 15:52:33 27 4
gpt4 key购买 nike

我一直在为一个聊天网站设计网站，但到目前为止，我所做的每一次尝试都以失败告终。我尝试用表格来做，它总是在一个浏览器(主要是 IE tho)、div 和更多浏览器中失败。

该网站必须是全屏的，最小宽度为 900 像素，最小高度为 500 像素，这样它就不会变小。我想在没有任何 javascript 的情况下执行此操作(我已经在 J​​S 中完成了，但这需要在没有它的情况下完成:<)

这是它应该是什么样子的图片。

http://imgur.com/2qHen

我希望这在纯 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 或更早版本中存在错误；查看 here 了解更多信息)并且总是和我一起玩这个把戏。将宽度和高度(显然)设置为 100%，所有这些都在 html 和 body 上(如下所示)

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

至于其他方法，您可以尝试将整个 页面数据(从body 标签之后 开始)用一个div 包装起来(确保您将其保留为 block )以让它跨越整个页面。

另一个值得注意的注意事项是，如果您想要一个干净的全屏站点，您还应该将 overflow 属性应用于 html/body。如果您超出窗口的宽度，您将丢失内容，如果您选择移除滚动条，它将移除所有滚动条。

希望这对您有所帮助!

编辑:

在查看了您的新图片链接后，这很简单! :]

请记住，默认情况下 div 是 block 状的，以下应该可以工作(这是未经测试的，因此可能需要进行一些调整):

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

关于html - CSS/HTML 中的全屏网站，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/4349567/

27 4 0
文章推荐： java - 如何在 Java 中简化这段代码？
文章推荐： 通过指针复制复杂的结构
文章推荐： C 符号类型和不相交的 union 类型？
文章推荐： html - 我们应该使用 吗？
太空狗
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com