为什么HTML会有多余的空白部分
<divid="btns"><buttonclass="Btns">b1</button><buttonclass="Btns">b2</button><buttoncl...
<div id="btns">
<button class="Btns">b1</button>
<button class="Btns">b2</button>
<button class="Btns">b3</button>
<button class="Btns">b4</button>
</div>
<iframe id="contents" src="xxx.html"></iframe>
js里面控制iframe的height为800px
如果是810px就会出现滚动条了，但是下面没什么东西
我想搞明白这多余的空白是怎么来的 展开
<button class="Btns">b1</button>
<button class="Btns">b2</button>
<button class="Btns">b3</button>
<button class="Btns">b4</button>
</div>
<iframe id="contents" src="xxx.html"></iframe>
js里面控制iframe的height为800px
如果是810px就会出现滚动条了，但是下面没什么东西
我想搞明白这多余的空白是怎么来的 展开
2016-02-27 · 百度知道合伙人官方认证企业
育知同创教育
1【专注：Python+人工智能|Java大数据|HTML5培训】 2【免费提供名师直播课堂、公开课及视频教程】 3【地址：北京市昌平区三旗百汇物美大卖场2层，微信公众号：yuzhitc】
向TA提问
关注
![]()
展开全部
HTML有多余的空白部分是因为body的高度设置过大。
<html>
<head>
</head>
<body style="height:400px">
<div id="div1">12312</div>
<script type="text/javascript">
document.getElementById("div1").style.height=document.body.style.height;
alert(document.getElementById("div1").style.height);
//如果body，没有设置样式，这个高度就为空
document.getElementById("div1").style.height=document.body.clientHeight
alert(document.getElementById("div1").style.height);
//如果设置了样式，offsetHeight就等于样式的height否则等于clientHeight
document.getElementById("div1").style.height=document.body.offsetHeight
alert(document.getElementById("div1").style.height);
</script>
</body>
</html>
<html>
<head>
</head>
<body style="height:400px">
<div id="div1">12312</div>
<script type="text/javascript">
document.getElementById("div1").style.height=document.body.style.height;
alert(document.getElementById("div1").style.height);
//如果body，没有设置样式，这个高度就为空
document.getElementById("div1").style.height=document.body.clientHeight
alert(document.getElementById("div1").style.height);
//如果设置了样式，offsetHeight就等于样式的height否则等于clientHeight
document.getElementById("div1").style.height=document.body.offsetHeight
alert(document.getElementById("div1").style.height);
</script>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
因为iframe窗体超出了你的屏幕可见区啊，这个跟分辨率有关，你若想没有滚动条的话，可以设置iscroll:none，就没有滚动条了，iframe窗体你可以设置很多属性的，包括是否滚动等等，可以去百度找找相关属性来研究一下。
追问
我是指iframe下面的多余部分，在iframe下一行
追答
这个是html的区域，你不想看见它，要麼加长IFrame，要么设置body的背景为白，什麼也看不见了。
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
测一下以下代码，就会明白了
<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<style type="text/css">
#btns{width:200px;height:400px;overflow:auto;border:1px solid #F00;}
.child{margin:0;padding:0;width:200px;height:200px;}/*有些元素不设置margin和padding的话浏览器解析时会加上默认值；块状元素的border宽度会占用页面空间，去掉margin:0;padding:0;或加个border:1px solid #000;就溢出了*/
button{padding:0;border:1px solid #000;}/*按钮默认有padding属性*/
</style>
<body>
<div id="btns">
<p class="child" style="background:#0F0;">
<button class="Btns">b1</button><button class="Btns">b1</button><button class="Btns">b1</button>
</p>
<p class="child" style="background:#00F;">
<!--内联元素之间的空格、缩进、换行符都会被解析成一个空白符-->
<button class="Btns">b1</button> <button class="Btns">b1</button>
<button class="Btns">b1</button>
</p>
</div>
</body>
</html>
追问
按照你的办法并没有解决，我是想知道为什么iframe的下一行会空出来一部分，比如iframe下一个写一个p元素，就会看到空出来了，按照你的办法，这空出的部分没法去掉，我对iframe和button，还有p都设置border:1px，margin:0;padding:0
追答
默认情况iframe下是不会有空白出来的，你可以单独建个页面测试看看。
空白的原因很多，你设置了iframe的margin和padding，那么iframe有没有父级呢？父级上是不是有margin和padding？再比如sss是所在的元素上有没有margin和padding？再或者是认为的换行?
总之原因比较多，最好是你自己看，不知道你使用什么浏览器，现在大多数浏览器比如chrome、firefox、包括IE11等浏览器都有自己的debug功能，页面上右键，选择查看元素（这是firefox的选项），然后把位置定位到空白处，就可以排除问题了，具体怎么使用可以百度一下“firefox debug”
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（1）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
