gpt4 book ai didi

html - CSS/HTML 页脚不粘

转载 作者:行者123 更新时间:2023-11-28 03:00:37 25 4
gpt4 key购买 nike

我的页脚有一个大问题。我现在搜索了 1 小时,试图找到解决方案。我尝试了一切,但没有任何效果!

这是我的 HTML 结构的示例。部分,然后是页脚。

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<header>
Hello World
</header>

<nav>
Navigation
</nav>

<section>
Hellooooo!
</section>

<footer id="fixed">
Footer
</footer>
</body>
</html>

这是我的 CSS:

footer {
bottom: 0;
width: 100%;
height: 60px;
background-color: #333333;
padding-top: 15px;
color: #fff;
font-family: 'Germania One', cursive;
}

#fixed {
position: relative;
bottom: 0;
}

body {
font-family: sans-serif;
background-color: #4F4F4F;
padding: 0;
margin: 0;
height:100%;
position: relative;
}

section {
padding-bottom: 30px;
position: relative;
min-height: 100%;
}

我用 position: static; 让它粘在底部,但它在部分中与我的内容重叠!我怎样才能让它贴在底部,并且永远不会与我的文字重叠?如果它们彼此靠近,我希望在部分和页脚之间留出 30 像素的空间。

最佳答案

我所做的是:

  1. 制作 body { position: relative }
  2. 制作页脚{ position: absolute;底部:0;离开 0; }
  3. 给部分一些空间来显示部分 { padding-bottom: 60px;

这样,页脚始终位于您的正文(您的文档)的底部,没有任何修改,适用于 IE7+ 和所有其他版本。如果您在整个页面中运行代码,即使有很多空间可以移动,您也会在底部看到页脚。

html {
height: 100%;
}
body {
/*default*/
min-height: 100%;
padding: 0;
margin: 0;

/*stick to bottom*/
position: relative; /*make it first positioned ancestor element*/

/*style*/
font-family: sans-serif;
background-color: #4F4F4F;
}
section {
/*stick to bottom*/
padding-bottom: 60px;/*give it some room to show*/
}
footer {
/*stick to bottom*/
position: absolute;
bottom: 0;
left: 0;

/*style*/
width: 100%;
background-color: #333333;
padding-top: 15px;
color: #fff;
font-family: 'Germania One', cursive;
}
<header>
Hello World
</header>

<nav>
Navigation
</nav>


<section>
Cras hendrerit lacus a bibendum tristique. Suspendisse a risus elementum ipsum tristique tristique. Vivamus vitae turpis ut tortor fermentum elementum. Duis in tellus vel ligula vehicula porttitor. ivamus venenatis tellus tincidunt, cursus metus nec,
tempor ex. Nulla efficitur nisl ut dolor pulvinar scelerisque. Cras hendrerit lacus a bibendum tristique. Suspendisse a risus elementum ipsum tristique tristique. Vivamus vitae turpis ut tortor fermentum elementum. Duis in tellus vel ligula vehicula
porttitor. Nulla efficitur nisl ut dolor pulvinar scelerisque. Cras hendrerit lacus a bibendum tristique. Suspendisse a risus elementum ipsum tristique tristique. Vivamus vitae turpis ut tortor fermentum elementum. Duis in tellus vel ligula vehicula
porttitor.
</section>
<footer id="fixed">
Footer
</footer>

关于html - CSS/HTML 页脚不粘,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34843309/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com