我遵循本教程学习PHP中的include和include_once函数。下面的文件可以正常工作: index . php: -
<?php
include_once 'header.php';
echo 'variable';
header。php: -
<h1>My Page's Header</h1>
但是当我尝试将以下.php文件包含到我的index.php中时，它不会产生期望的结果。标题重叠，因此完全隐藏了'变量'
我想要的是，在我从外部文件包含头后，我的页面应该在头下面开始。从外部文件中包含的标题不应该被认为包含在我的页面中，所以没有元素重叠或这样的。我怎样才能做到呢?
<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.top-bar {
position: fixed;
width: 100%;
top: 0px;
left: 0px;
background: #000029;
padding: 5px;
}
.logo {
display: inline-block;
vertical-align: top;
color: white;
}
</style>
</head>
<body>
<div class="top-bar">
<img src="https://www.google.com.pk/images/srpr/logo11w.png" alt="Logo" class="logo" >
</div>
</body>
</html>
<?php
include_once 'header.php';
?>
<div id="parent_div" >
<script>
function getHeaderHeight() {
return document.getElementById("top-bar").height(); //top-bar is in header.php
}
document.getElementById("parent_div").style.padding-top="getHeaderHeight()";
</script>
<h1>Heading</h1>
</div>
这是因为您的标题设置为position: fixed;。它将从文档流中取出，并在您滚动时跟随您。
当你想让它不粘在客户端顶部时，把你的css改成:
.top-bar {
position: relative;
background: #000029;
padding: 5px;
}
如果你希望你的标题是固定的，你也可以设置一个填充到文档的主体，等于你的标题的高度。
现在你看到你当前的问题:http://jsfiddle.net/Lc3W8/
方案一:http://jsfiddle.net/Lc3W8/1/
body
{
margin:0;
padding:0;
height: 3000px;
/*new:*/
padding-top: 30px;
}
.top-bar
{
position: fixed;
left:0;
right:0;
top:0;
height: 30px;
background-color: blue;
}
方案二:http://jsfiddle.net/Lc3W8/2/
body
{
margin:0;
padding:0;
height: 3000px;
}
.top-bar
{
height: 30px;
background-color: blue;
}