我有一个新网站,我正在建立这个网站来学习网络编码。
我当前针对相关部分的代码如下:
require_once 'includes/functions.php';
<?php
if(logged_in())
{
$data = $db->query('SELECT COUNT(id) AS num FROM mail WHERE userid = "'.$_SESSION['id'].'"');
$row = $data->fetch_assoc;
$mcount = $row['num'];
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title><?php echo SITENAME; ?></title>
<link rel="stylesheet" type="text/css" href="styles/main.css"
</head>
<body>
<div id="wrapper">
<div id="header">
<?php
if(logged_in())
{
echo 'Welcome, ' . $_SESSION['username'] . '! <a href="mail"><img src="" alt="" width="32" height="32" /> ('.$mcount.')</a>';
}
else
{
echo 'Welcome, Guest!';
}
?>
</div>
<div id="banner"><img src="" alt="" width="1000" height="250" /></div>
<div id="navbar">
<ul>
<li><a href="">Home</a></li>
<li>
<?php
if(logged_in())
{
?>
<a href="logout">Logout</a>
<?php
} else {
?>
<a href="login">Login/Register</a>
<?php
}
?>
</li>
<li><a href="forum">Forums</a></li>
<li><a href="contact">Contact Us</a></li>
<li><a href="donate">Donate</a></li>
</ul>
</div>
<div id="content">
... Content to be added here ...
</div> <!-- end content -->
<div id="footer">Copyright 2018 <?php echo SITENAME; ?>. All Rights Reserved.<br /><a href="mailto:<?php echo WEBMASTER; ?>">Webmaster</a> <a href="tos">Terms of Service</a></div>
</div> <!-- end wrapper -->
</body>
</html>
我的这些部分的 CSS 是这样的:
#navbar
{
float: left;
}
#navbar ul
{
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;;
background-color: #f1f1f1;
position: fixed;
overflow: auto;
}
#navbar li a
{
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
#navbar li a:hover
{
background-color: #555;
color: white;
}
#content
{
float:right;
width: 810px;
padding: 10px;
}
#footer
{
clear: both;
font-size: 9pt;
text-align: center;
}
我的问题是:导航栏和内容排列得很好(导航栏固定在右侧,以便它会随着页面内容滚动),但如果内容比导航栏短,则页脚隐藏在导航栏后面高度。
有没有办法设置 footer min-height 来继承 navbar div 的高度,让它总是出现在固定导航栏的下方而不是后面?
我在网上研究过这个,没有提到具体如何做(他们只是说在固定元素和底部元素之间创建一个元素来创建缓冲区,这不是我想要做的) .
更新
更新了整个 php 文件 (index.php) 的代码
用于实时查看问题预览的网站 URL:Test Site
最佳答案
您可以通过执行以下操作使正文成为浏览器窗口的高度
body
{
height: 100%;
}
关于CSS Float - 清除两个具有固定位置的 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50179131/