我正在尝试在我的网站上添加一个博客,我决定只创建一个谷歌博客并使用全屏幕iframe在我的页面上显示它。它工作正常,但后来我决定添加网站标题。所以现在我有标题后跟Iframe,但我希望能够对待标题& iframe作为一个单一的页面。现在,标题始终可见,我可以滚动浏览Iframe,标题始终显示在其上方,这不是最明显的愉快体验。这是代码:
<?php
include("header.php");
?>
<html>
<head>
<style type="text/css">
body
{
margin: 0;
overflow: hidden;
}
#iframe1
{
height: 80%;
left: 0px;
position: absolute;
top: 180px;
width: 100%;
}
</style>
</head>
<body>
<iframe id="iframe1" src="http://xxxx.blogspot.com/" frameborder="0"></iframe>
</body>
</html>
以下是标题代码:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta name="google-site-verification"=xxx />
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-26023641-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>xxx – <?php if ($page != 'Home') { echo $page; } else { echo 'xxxxs'; } ?></title>
<meta name="description" content="xxx." />
<meta name="keywords" content="xxx<?php echo $tags; ?>" />
<link href='http://fonts.googleapis.com/css?family=PT+Sans:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<!--[if lt IE 9]>
<script type="text/javascript" src="/js/lightview/js/excanvas/excanvas.js"></script>
<![endif]-->
<script type="text/javascript" src="js/external.js"></script>
<script type="text/javascript" src="js/lightview/js/spinners/spinners.js"></script>
<script type="text/javascript" src="js/lightview/js/lightview/lightview.js"></script>
<script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=cse-search-box"></script>
<link rel="stylesheet" type="text/css" href="css/hub.css" media="screen" />
<link rel="stylesheet" type="text/css" href="js/lightview/css/lightview/lightview.css"/>
<!--[if IE 7]><link rel="stylesheet" type="text/css" href="css/ie7styles.css" /><![endif]-->
<!--[if IE 6]><link rel="stylesheet" type="text/css" href="css/ie6styles.css" /><![endif]-->
<!--[if lte IE 6]><link rel="stylesheet" type="text/css" href="css/ie6styles.css" /><![endif]-->
<link rel="icon" href="favicon.ico" type="image/ico" />
</head>
<body>
<div id="header">
<a id="logo" href="/"></a>
<ul id="nav">
<li><a href="xx">xx</a></li>
<li><a href="xx">xx</a></li>
<li><a href="xx">xx</a></li>
<li><a href="xx">xx</a></li>
<li><a href="xx">xx</a></li>
<li><a href="xx">xx</a></li>
<li><a href="xx">xx</a></li>
<li><a href="xx">xx</a></li>
<li><a href="xx">xx</a></li>
<li><a href="xx">xx</a></li>
</ul>
</div>
<div id="content">
答案 0 :(得分:0)
问题是您的滚动条位于iframe内并在主页面上禁用,因此滚动仅在iframe内滚动,而不是整页。删除溢出:隐藏在页面主体中并使其成为iframe的高度以适合其内容。这样,您在页面上看到的滚动条就会滚动整个页面,而不仅仅是iframe。