Xurui_Luo 2016-08-17 10:00 采纳率: 50%
浏览 4478
已采纳

关于html满屏的问题，小白不懂啊

这段代码，我如果把最后的height也改成100%打开网页就是空白了，怎么解决？我想让它满屏

  </script>
</head>
<body onload="initialize()">
  <div id="map_canvas" style="width: 100%; height: 100%;"></div>
</body>
</html>
  • 写回答

8条回答 默认 最新

  • niaonao 2016-08-20 05:54
    关注
     <!DOCTYPE HTML>

<html>
<head> 
<title>test</title>
</head>

<body>
<div id="map_canvas" style="width: 100%; height: 100%; background:#abcdef">
测试 div 盒子模型，我有满血复活了！！！
</div>
</body>

</html>

    上面代码什么也没改，就是加了个内容，顺便设置了背景色，方便查看是不是 100%
    改代码对应的效果：
    图片说明

    为什么 height 不是100% 呢，其实他是 100% ，包括了内容，是因为body 的大小限制
    显示一下 body 设置背景色为黑色

     <!DOCTYPE HTML>

<html>
<head> 
<title>test</title>

<style>
body{
background:#000;
}
</style>
</head>

<body>
<div id="map_canvas" style="width: 100%;height:100%; background:#abcdef">
测试 div 盒子模型，我有满血复活了！！！
</div>
</body>

</html>

    此时效果如下：
    图片说明

    body 是全屏啊，但div 也是100% 啊，可是div 还是就一行，仅仅包含文字

    不要着急，看下面代码，给body 设置大小：

     <!DOCTYPE HTML>

<html>
<head> 
<title>test</title>

<style>
body{
background:#000;
height:300px;
}
</style>
</head>

<body>
<div id="map_canvas" style="width: 100%;height:100%; background:#abcdef">
测试 div 盒子模型，我有满血复活了！！！
</div>
</body>

</html>

    效果如下：这下就对了，body 为 300px, div 为100%，充满了 300px;
    图片说明

    但是background 黑色却还是全屏，这是为什么呢，你看看书吧，先学学body 是什么。

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(7条)

报告相同问题？

悬赏问题

  • ¥15 用visual studi code完成html页面
  • ¥15 聚类分析或者python进行数据分析
  • ¥15 逻辑谓词和消解原理的运用
  • ¥15 三菱伺服电机按启动按钮有使能但不动作
  • ¥15 js，页面2返回页面1时定位进入的设备
  • ¥50 导入文件到网吧的电脑并且在重启之后不会被恢复
  • ¥15 （希望可以解决问题）ma和mb文件无法正常打开，打开后是空白，但是有正常内存占用，但可以在打开Maya应用程序后打开场景ma和mb格式。
  • ¥20 ML307A在使用AT命令连接EMQX平台的MQTT时被拒绝
  • ¥20 腾讯企业邮箱邮件可以恢复么
  • ¥15 有人知道怎么将自己的迁移策略布到edgecloudsim上使用吗？