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 目详情-五一模拟赛详情页
  • ¥15 有了解d3和topogram.js库的吗？有偿请教
  • ¥100 任意维数的K均值聚类
  • ¥15 stamps做sbas-insar，时序沉降图怎么画
  • ¥15 买了个传感器，根据商家发的代码和步骤使用但是代码报错了不会改，有没有人可以看看
  • ¥15 关于#Java#的问题，如何解决？
  • ¥15 加热介质是液体，换热器壳侧导热系数和总的导热系数怎么算
  • ¥100 嵌入式系统基于PIC16F882和热敏电阻的数字温度计
  • ¥15 cmd cl 0x000007b
  • ¥20 BAPI_PR_CHANGE how to add account assignment information for service line