Question

我有一个简单的布局，包括左侧菜单区域和右侧内容区域。两者中的每一个都是iframe，因为我只需要将pdf加载到内容区域。我的布局大小调整了浏览器大小和我想要的方式，除了右边的滚动条，我底部有一个小区域。这是CSS：

@charset "utf-8";
html
{
    font:100% Arial, Helvetica, Sans Serif;
    height:100%;
    padding:0px;
    margin:0px;
}
body
{
    height:100%;
    padding:0px;
    margin:0px; 
}
#wrapper
{
    margin: 0 auto;
    width:100%;
    height:100%;
}
#menu{
    height:100%;
    float:left;
    width:15em;
}
#content{
    height:100%;
    margin-left:15em;
    text-align:left;
}
iframe{
    width:100%;
    height:100%;
    border:0;
}

并且HTML非常简单（iframe html根本没有样式）：

<!DOCTYPE html>
<html>
<head>
    <title>RPWRF O&amp;M Manual</title></head>
    <link rel="stylesheet" href="styles/styles.css" type="text/css" />
<body>
<div id="wrapper">
    <div id="menu">
        <iframe frameborder="0" src="left.html" name="menuframe">
        </iframe></div>
    <div id="content">
        <iframe frameborder="0" src="right.html" name="contentframe">
        </iframe></div>
</div>
</body>
</html>

Answer 1

您应该在display: block;上设置iframe。 iframe本质上是内联元素，内联元素位于周围文本的基线上。基线允许下行（'g'的尾部等），白色空间是下行器占用的空间（即使没有）。

设置display: block;可以摆脱添加的空白区域，并删除不需要的滚动条。

如何处理html＆amp;的崩溃边距身体？

1 个答案: