html - 页眉和页脚冲突-6ren

html - 页眉和页脚冲突

转载作者：行者123 更新时间：2023-11-28 18:26:58

24

4

我试图在页面底部设置一个粘性页脚，在页面顶部设置一个实心页眉。但是我在 body 和 html 类上遇到了一些困难。我的页眉距页面顶部的高度为 100px，我的 html 和 body 类的高度为 100%，页脚为 150px。我已经在我的页面中正确地写了页脚，所以它贴在底部，但是 html 或正文的 100% 高度将它放在我页面的更下方，这样你就必须滚动才能看到页脚，即使没有文本将它推到那么远!这是我的 CSS 代码:

html {
height:100%;
background: url(pics/bg.png) no-repeat top center fixed;
margin:0;
padding:0;
}

body {
height:100%;
margin:0;
padding:0;
}

.wrapper {
min-height:100%;
}

.header {
position:fixed;
background:#FFF url(pics/header.png) no-repeat top center fixed;
top:0;
height:100px;
width:1920px;
z-index:1000;
}

.main {
position:absolute;
top:100px;
width:990px;
left:0;
right:0;
overflow:auto;
margin:0 auto;
padding-bottom:150px; /* must be same height as the footer */
padding-top:10px;
padding-left:5px;
padding-right:5px;
}

.footer {
position:relative;
background-image:url(pics/bg_footer.png);
margin-top:-150px; /* negative value of footer height */
height:150px;
width:990px;
margin:0 auto;
clear:both;
}

这是我的 HTML 代码:

<body>
<div class="wrapper">
    <div class="header">
</div>
<div class="main">
    <p>I can write here</p>
</div>
</div>
<div class="footer">
    <p class="alignleft">© Tim</p>
    <p class="alignright">17 maart 2013</p>
</div>
</body>

我几乎可以肯定它与 100% 的 html 高度有关。在此先感谢您的帮助!

最佳答案

你能试试这个吗:

<body>

    <div class="header"></div>
    <div class="main">
      <p>I can write here</p>
    </div>

    <div class="footer">
      <p class="alignleft">© Tim</p>
      <p class="alignright">17 maart 2013</p>
    </div>

</body>

这符合您的需求吗？

CSS

html {
  height:100%;
  background: url(pics/bg.png) no-repeat top center fixed;
  margin:0;
  padding:0;
}

body {
  padding:0;
  margin:0;
}

.header {
  background:#FFF url(pics/header.png) no-repeat top center fixed;
  height:100px;
  width:100%;
}

.main {
  position:absolute;
  top:100px;
  bottom:150px;
  overflow:auto;
  margin:0 auto;
  width:100%;
  padding-bottom:10px;
  padding-top:10px;
  padding-left:5px;
  padding-right:5px;
}

.footer {
    position: absolute;
    width: 100%;
    bottom:0;
    background-image:url(pics/bg_footer.png);
    height:150px;
    width:100%;
    margin:0 auto;
    clear:both;
}

检查 JSFiddle 示例:

http://jsfiddle.net/2SL7c/

关于html - 页眉和页脚冲突，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15462044/

24

4

0

文章推荐： iphone - 如何让静态图像在 3 秒后出现？

文章推荐： javascript - 使用 setInterval 更新数据的正确方法

文章推荐： iphone - 如何删除对象 : work in coreData?

TCPDF - 仅在某些页面上有页脚/页眉
我想将页 footer 分放在文档的每一页上，除了第一页。我通过扩展 TCPPDF 类并覆盖其页脚方法来创建我的自定义页脚。然后根据文档并使用以下示例，我明白我应该使用 SetPrintHeade
html - 页眉、主要和页脚定位
我的页面分为 3 个部分。页眉主要和页脚。 header 固定在顶部，大小为 109px，边框高 6px，因此 main 到顶部的边距为 109px。我希望 main 扩展到 heade
javascript - 页眉/页脚之间的内容
我正在构建一个网站，其中每个页面都有一个 , 和一个 . 据我了解，应用程序的入口点应包括这三个组件，并且应根据用户所在的路线呈现一个或多个附加组件。我已经像这样构建了我的入口点: App.js
html - 页眉/页脚出现在错误的位置
谁能告诉我为什么Footer出现在页面顶部，而我看不到Header或LayoutDiv9？这是我添加的第二个 CSS 表，第一个是自动添加的 Fluid Grid Layout CSS 表，我根本没
css - 页眉 - 全宽
我的应用程序中有这个页面: http://actibities-uniongr.rhcloud.com/pages/view-demo 如果您将浏览器的窗口缩短到小于 1000 像素并水平滚动，您会看
python - 页眉/页脚终端显示
这个问题已经有答案了: Python command line interaction library? (3 个回答) 已关闭10 年前。如何创建一个包含静态页眉和页脚的 Python 脚本，如下
HTML 页眉/页脚打印功能
我正在努力为我们的 Mediboard 元素提供完整的 HTML 页眉/页脚打印功能。从长远来看，我知道 CSS3 页面媒体模块将满足我的需求，但这至少需要两三年时间。所以我试着让它与 CSS2
CSS 页眉 - 如何使用打印页边距？
我可以在每页上打印页眉，但我不熟悉打印页边距。我认为 @page css 可以工作，但它似乎不会影响页边距。如果我在正文上设置边距，它在第一页上有效，但后续页面默认从上边距开始，将页眉放在文本顶部。
header - DotNetNuke - 页眉、内容和页脚
有什么办法，就像 WordPress 一样，创建 header.php、theme-file.php 和 footer.php，然后使用钩子(Hook)将它们组合起来？对我来说仍然复制皮肤文件似乎
ios6 - UICollectionView 页眉/页脚引用大小崩溃
我正在努力解决以下问题。我有一个 UICollectionView，它的布局的页眉和页脚引用大小设置为一个值(比如 40.0)。当我删除/插入单元格并且集合 View 位于页眉和页脚不在屏幕上的位置时
javascript - 如何使用js加载网站布局(页眉，页脚)
我是 javascript 新手。我想使用 ajax 加载我的网站主模板文件(页眉、页脚、侧边栏)。我的布局文件如下所示。布局.php header(); $ret .= $app->side
css - 页眉、内容、页脚未显示图像
这是我的代码。内容图像曾短暂地工作，但现在消失了。试图让Header只出现在页面顶部，图片高度为1000px。页面底部的页脚，图像高度为 1000px。内容图像需要重复以适合内容。这是一个博客，所以
html - 页眉、正文、页脚的多个背景图像
我正在尝试将以下图像添加为网站内容的背景: http://webbos.co/vibration/wp-content/themes/vibration-child-theme/images/back
css - rst2pdf 页眉/页脚文本颜色
如何更改样式表中的页眉/页脚文本颜色？我试过了，没有结果: footer: { parent: normal, alignment: TA_CENTER, textColor: red
html - 页眉 + 内容 + 带有嵌套所有内容的表单的页脚
我有以下 HTML，它有一个页眉、一个可滚动的内容和一个页脚，并且工作正常。我想添加到此 HTML 的是一个包装所有三个 div 的表单，问题是一旦我用标签包装 div，布局就会中断。有什么建议吗？
javascript - 页眉/页脚导航更新 jquery
我使用 jQuery 创建了具有不同状态的页眉和页脚导航。单击页脚导航时，我在更新页眉导航时遇到问题。例如，当用户单击页脚导航中的列表 1 时，我希望页眉导航也更新为相同的选择。我包含了一个 jsfi
HTML:页眉+页脚+具有特定规范的流体内容
我需要创建一个网页，其中包含正常页眉 + 粘性页脚 + 垂直拉伸(stretch)的流体内容。但是，这些位置不能是绝对的，因为我需要 780 像素的页面最小高度。我设法使用表格完成了此操作，但我真的
页眉/页脚问题之间的 HTML 电子邮件模板内容
我知道这可能是一件非常简单的事情，但除了很棒的 Stack Overflow 社区之外，我不知道有谁可以帮助我解决我的问题。我已经有一段时间没有在这种程度上使用 HTML/CSS 了。我正在尝试为我
css - 页眉 Logo 已偏离中心
我前段时间做了一个wordpress网站。我今天刚刚看了一眼，由于某种原因，这个标志已经向东传播了。它已经厌倦了 clearfix 的 float 、文本对齐和边距:0 自动。谁能告诉我发生了什么，或
html - 页眉/页脚/主要代码
我需要帮助创建包含#header、#footer 和#main 的div 的代码。我只是不确定它在代码中的位置。我创建了一个带有 css 样式表的简单 html 页面。我并不是要任何人为我编写代码，因

首页

博学

6Ren·AI

商城

html - 页眉和页脚冲突