css - 将页脚放在标题下方-6ren

css - 将页脚放在标题下方

转载作者：行者123 更新时间：2023-11-28 08:45:52

25

4

这是我的问题:我在网站的每个页面上都包含 head.php 页面，在每个页面的末尾都包含一个 footer.php 页面。

基本布局在 head.php 文件中: http://prntscr.com/5jbn1b

这是我的问题: http://prntscr.com/5jbmnf

如您所见，我的页脚位于 head div 的后面。这是我的代码:

style.css:

/*Base Debut*/
#base {
    background-color:white;
    height:auto;
    width:1000px;
    position:absolute;
    top:0;
    left: 0;
    right: 0;
    margin: auto;
    margin-top: 80px;
}
/*Base Fin*/

/*Footer Debut*/
#foot {
    bottom: 0;
    padding: 5px;
    margin: auto;
    background-color: #303030;
    width: 1000px;
    color: #7A7A7A;
    font-family: OswaldL;
    font-size: 14px;
    text-align: center;
}

#foot .under {
    background-color: #2B2B2B;
    width:1000px;
    height:10px;
}
/*Footer Fin*/

head.php:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" />
<title>WEBSITE</title>
</head>

<body>
    <div id="header">
        <div class="logo">
            <img src="images/logo.png">
        </div>
        <div class="connect">
            <div class="links">
                <a href="#">Inscription</a> <a href="#">Connexion</a>
            </div>
        </div>      
    </div>
<div id="base">
    <section style="color: black;">
        <nav class="gauche" style="margin-top: 55px;">
            <h1>$rubrique1</h1>
            <ul>
                <li><a href="index.php">Accueil</a></li>
                <li><a href="membres.php">Membres</a></li>
                <li><a href="stats.php">Statistiques</a></li>
            </ul>

            <?php
                if(isset($_SESSION['pseudo']))
                {
            ?>

            <h1>$rubrique0</h1>
            <ul>
                <li><a href="messagerie.php">Messages privés</a></li>
                <li><a href="options.php">Options</a></li>
                <li><a href="connexion.php?inverted">Déconnexion</a></li>
            </ul>

            <?php
                }   
            ?>

            <h1>$rubrique2</h1>
            <ul>
                <li><a href="news.php">$inter1</a></li>
                <li><a href="album.php">$inter2</a></li>
            </ul>

            <h1>$rubrique3</h1>
            <ul>
                <li><a href="equipe.php">$lien1</a></li>
            </ul>
        </nav>

        <nav class="droite" style="color: black; float: right;">
            <h1>$droite1</h1>
            <div class="droite_text">
                <li><a href="forum.php?id=1">$forum1</a></li>
            </div>

            <h1>$droite2</h1>
            <div class="droite_text">
            $connectes
            </div>
        </nav>
</div>

footer.php:

<br /><br /><br /><br /><br />

            </div>
            </div>
            </div>
        </section>  
        <div id="foot">

            <?php echo NOM_SITE; ?> © | $footercredit <a href="#">$dev1</a> et <a href="#">$dev2</a> | $version <br />
            <a target="_blank" href="mobile">Version mobile</a>


        <div class="under">
        </div>
        </div>
        <br />
    </body>
</html>

最佳答案

您的基本代码是 position: absolute。这基本上意味着它后面的任何东西都会在它后面弹出，除非它被指示在另一个位置。 Absolute 通常会忽略所有其他 div 并将其自身放置在任何它想要的位置。

有几种方法可以更改此行为，但根据您在此处显示的内容，最简单的方法是将#base 更改为不是 position: absolute。

关于css - 将页脚放在标题下方，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27590817/

25

4

0

文章推荐： css - SVG 路径曲线在相反方向上设置动画

文章推荐： html - 当我用 css3 单击 asp 按钮时，我想显示 div 结果

文章推荐： jquery - 带有 mousemove 的交互式背景 mask (jQuery、CSS)

python - 填充matplotlib线图的上方/下方
我正在使用matplotlib创建简单的线图。我的图是一个简单的时间序列数据集，其中我沿x轴有时间，而我在y轴上有测量的值。 y值可以具有正值或负值，如果y值> 0，则我想用蓝色填充行上方和下方的颜色
javascript - 是否可以通过滚动到元素来滚动元素上方/下方
我有一个简单的菜单，当单击菜单项时，该菜单会滚动到某个部分。例如: Contact 将滚动到: 但是我也有一个始终粘在顶部的菜单，并且该菜单的高度不是用滚动脚本计算的。因此菜单总是悬停在元素的顶部
iphone - 强制范围栏位于 UISearchBar 下方
我有一个 UISearchBar 和 UISearchDisplayController，一切都很好，但我的范围选择器显示在文本字段旁边而不是下方。我知道这是设备横向时的预期操作，但由于我在 UISp
java - 尝试将按钮放置在 ListView 下方
因此，我正在创建一个根据用户输入增大和缩小的 ListView ，我需要四个按钮，但我不知道如何让按钮与 ListView 的底部对齐并位于2x2 网格时尚。我已经尝试过相对布局，但似乎不起作用。谢谢
jquery - 如何将脚本引用移动到下方
我正在使用的系统无法直接编辑每个页面上的 HTML。我想添加特定页面正文的顶部，但我输入 HTML 的框会自动将脚本放置在上面我尝试过这个: $('body').prepend(''); 任何帮
Xcode 导航栏位于 ScrollView 下方？
设计模式一切都很好，但在实时导航栏位于 ScrollView 下方我该如何解决这个问题？请帮忙最佳答案同样，在没有看到任何代码的情况下很难说，但我相信导航栏根本没有显示。如果您直接从另一个 Vie
java - 为什么我的栏上的菜单显示在容器中的 JPanel 下方？
我现在必须重用和修改其他人的代码来创建图像处理应用程序。以下代码用于设置框架及其 GUI。我遇到的问题是，当在菜单栏上单击文件字时，菜单项列在 originalImage 容器中包含的 Canvas
html - 以固定宽度间隔将文本对齐到 div 下方
我创建了一个 Angular 指令，用户可以在其中根据一天中的时间更改某些设置。下面是我已有的图片: 我想在 div 的 x 轴上添加一种准确表示时间的“滴答”，以向用户显示他在做什么，如下图所示:
html - 侧面固定菜单重叠在 div 下方
这是下面的代码。 body { font-family: "Lato", sans-serif; } .sidenav { width: 130px; positio
javascript - 如何将谷歌地图定位在前一个 div 下方？
这个问题在这里已经有了答案: Z-Index not working? [closed] (1 个回答) 关闭 5 年前。
html - 导航栏的子菜单出现在另一个 Div 下方
我搜索了这个并尝试了 Z 轴的东西，但无济于事。基本上，我的导航栏在其下方的 div 下方显示有子菜单。那个 div 发生了不透明的事情，这一定与它有关。我需要这些显示在 div 上方!! JS fi
jquery - 将页面内容推送到左浮动的 div 下方
我正在处理的网站的某些页面使用脚本自动创建基于页面标题的目录。但是，我在获取“toc”div 以将页面的其余内容推送到其下方时遇到了一些问题。 TOC div 在我页面的最里面的 div 中，“con
html - float 元素彼此相邻/下方
我的代码 http://jsfiddle.net/p796z/1/ HTML Content Content Content Content Content Content
css - 下拉它显示在 ScrollBar 下方
请看下面的代码: Button dropdown
css - 如何使用CSS将html表单放置在中心并直接放在 Logo 下方
我有一个表格，我希望它直接位于 Logo 下方位于页面中间。到目前为止，我似乎做不到更有什者。任何帮助将不胜感激。谢谢。这是 HTML 代码:
css - 如何将手机键盘放在固定页脚 JqueryMobile 下方
我的 web 应用程序在与 jQuery Mobile 和 cordova 的聊天部分出现问题。我决定用 textaera 和发送消息的按钮修复页脚。但是当我触摸文本区域写消息时，我的键盘没有出现。我
javascript - 可点击的表单图像卡在 Div 下方
我有两个来回箭头，可以单击它们在我的单页网站上的框架中浏览照片。我的术语在这里可能不正确。保存照片和前后箭头的 div 出现在我的屏幕下方，而不是在屏幕场景 div 中。我可以将图像向上移动以出现在屏
html - 如何将导航栏菜单放在 Logo 下方？
我使用自定义 CSS 和 Bootstrap 类名称构建了这个 header 。我已经尝试了 z-index、float: initial 属性。提前致谢 .branding-preview {
html - 附加内容不会位于为移动设备堆叠的包装 DIV 下方
我有两个部分介绍网站上的用例和好处。如下。 .onboardmessaging { min-width: 100%; } .onboardmessagingwrap { min-wi
html - 如何将这些缩略图放置在 slider 下方？
所以，我在网站上发现了这个很酷的 css/html slider ，所以我下载了代码，并打算研究它。我已经开始根据自己的需要对其进行编辑和设计，然后我遇到了这个问题:当我添加比原始尺寸更大的图像时，导

首页

博学

6Ren·AI

商城

css - 将页脚放在标题下方