0

我有一个简单的布局，由左侧菜单区域和右侧内容区域组成。两者中的每一个都是 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>
4

1 回答 1

1

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

设置display: block;摆脱了添加的空白，并摆脱了不需要的滚动条。

于 2013-05-20T21:57:30.770 回答