CSS Float - 清除两个具有固定位置的div

时间：2018-05-04 16:09:29

标签： css

我有一个新网站，我正在一起学习网页编码。

我相关部分的当前代码如下：

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>&nbsp;&nbsp;<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;
}

我的问题是：导航栏和内容排列正常（导航栏固定在右侧，以便它将与页面内容一起滚动），但如果内容比导航栏短，则页脚隐藏在导航栏后面高度。

有没有办法设置页脚最小高度以继承导航栏div的高度，以便它始终显示在固定导航栏下方而不是在其后面？

我花了5-10分钟通过谷歌环顾四周，并没有触及如何专门做这个（他们只是说在固定元素和底部元素之间创建一个元素来创建一个缓冲区，这不是什么我正在努力），所以任何帮助或指导将不胜感激。

更新：使用整个php文件（index.php）更新代码

预览网站网址，以便现场查看问题：Test Site

4 个答案:

答案 0 :(得分：0)

您可以通过执行以下操作使主体成为浏览器窗口的高度

body
{
  height: 100%;
}

答案 1 :(得分：0)

我对此视而不见，这是想要的样子吗？

#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;
    position:  fixed;
    bottom: 0;
    height: 100px;
    width: 100%;
    background: red;
}
<div id="navbar">
<ul>
    <li><a href="">Home</a></li>
    <li>
    
    <a href="logout">Logout</a>
    
    <a href="login">Login/Register</a>
    
    </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">
</div>

<div id="footer">
</div>

答案 2 :(得分：0)

像这样设置CSS文件

#content
{
    float:right;
    width: 810px;
    padding: 10px;
    height: 100%;
}

#footer
{
    clear:both;
    font-size: 9pt;
    width: 100%;
    background-color: green;
    color: white;
    text-align: center;
}

我认为你期待的答案是这样的。现在页脚位于导航栏的顶部

答案 3 :(得分：0)

如果你想在没有Javascript的情况下使用纯CSS，你可以将min-height应用于.content元素，这将迫使footer失效;在下面的演示中，我指定.content要min-height: 100vh;以确保它至少是视口高度的100％。

阅读代码中的注释，了解我的一些更改 

#navbar {
  position: fixed;
  left: 0;
  top: 0;
  /*float: left; Float values do not control the position of fixed elements, the above offset values do*/
}

#navbar ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 200px;
  background-color: #f1f1f1;
  /*position: fixed; Placing your fixed position value on the #navbar element makes more structural sense*/
  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;
  min-height: 100vh; /*Change this to what you want*/
}

#footer {
  clear: both;
  font-size: 9pt;
  text-align: center;
}
<div id="navbar">
  <ul>
    <li><a href="">Home</a></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">
</div>

<div id="footer">
  FOOTER
</div>

另一种解决方案是在margin-bottom上设置与.content元素高度相同的#navbar：

#navbar {
  position: fixed;
  left: 0;
  top: 0;
  /*float: left; Float values do not control the position of fixed elements, the above offset values do*/
}

#navbar ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 200px;
  background-color: #f1f1f1;
  /*position: fixed; Placing your fixed position value on the #navbar element makes more structural sense*/
  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;
  margin-bottom: 136px /*Current height of the #navbar*/; 
}

#footer {
  clear: both;
  font-size: 9pt;
  text-align: center;
}
<div id="navbar">
  <ul>
    <li><a href="">Home</a></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">
</div>

<div id="footer">
  FOOTER
  </div>

相关问题
最新问题