Html 100%宽度的固定位置页脚从窗口向右延伸
我需要帮助尝试将此页脚设置在固定位置。我边走边学习,试图做出一个合理的流动布局。这是一个正在进行的工作,但我不能继续,直到我把页脚在正确的地方 我的问题是它一直从窗口向右边延伸。有时它会创建一个滚动条,不遵循边距规则。我已经尝试了我所能想到的一切,以及通过使用可靠的谷歌所能找到的东西。我使用了最新的chrome和firefox版本,看看这是否是chrome的问题 我曾经有一个包装容器,但我已经删除了它,并将页脚代码从一个地方移动到另一个地方,试图为它找到一个可以正常工作的地方Html 100%宽度的固定位置页脚从窗口向右延伸,html,css,position,footer,fixed,Html,Css,Position,Footer,Fixed,我需要帮助尝试将此页脚设置在固定位置。我边走边学习,试图做出一个合理的流动布局。这是一个正在进行的工作,但我不能继续,直到我把页脚在正确的地方 我的问题是它一直从窗口向右边延伸。有时它会创建一个滚动条,不遵循边距规则。我已经尝试了我所能想到的一切,以及通过使用可靠的谷歌所能找到的东西。我使用了最新的chrome和firefox版本,看看这是否是chrome的问题 我曾经有一个包装容器,但我已经删除了它,并将页脚代码从一个地方移动到另一个地方,试图为它找到一个可以正常工作的地方 body {
body {
text-align: center;
margin-top: 0;
background-color: #1A1A1A;
background-image: url('#');
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;}
#logo {
background-color: rgba(53, 53, 53, 0.9);
padding: 10px;
position: relative;
margin-right: auto;
margin-left: auto;
margin-bottom: 5px;
height: 90px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-moz-border-bottom-left-radius: 5px;
-moz-border-bottom-right-radius: 5px;
-ms-border-bottom-left-radius: 5px;
-ms-border-bottom-right-radius: 5px;
-o-border-bottom-left-radius: 5px;
-o-border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;}
#nav {
background-color: rgba(53, 53, 53, 0.9);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-msborder-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
padding: 0px;
position: relative;
margin-right: 0;
margin-left: 0;}
ul {
list-style: none;
margin: 0;
display: inline-block;
position: relative;}
li {
display: inline-block;
position: relative;}
a {
display: inline-block;
text-decoration: none;
height: 100px;
width: 100px;
position: relative;
text-align: center;}
#link1:hover {
background-color: #727272;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;}
#link1:active {
background-color: #ba6a15;}
#link2:hover {
background-color: #727272;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;}
#link2:active {
background-color: #ba6a15;}
#link3:hover {
background-color: #727272;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;}
#link3:active {
background-color: #ba6a15;}
#link4:hover {
background-color: #727272;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;}
#link4:active {
background-color: #ba6a15;}
#footer {
background-color: rgba(53, 53, 53, 0.9);
position: fixed;
bottom: 0;
width: 100%;
height: 22px;
padding: 3px;
color: #FFF;}
你好!
您可以通过设置边距:0px代码>至正文
和框大小:边框框代码>至页脚
JSFiddle-
你可以通过设置margin:0px代码>至正文
和框大小:边框框代码>至页脚
JSFiddle-
试试这个:
<div id="footer">Hello there!</div>
你好!
试试这个:
<div id="footer">Hello there!</div>
你好!
这里有问题:
#footer {
width: 100%;
padding: 3px;
}
您的页脚宽度从填充设置为100%+6px
尝试添加此选项以使填充(和边框)成为页脚内容的一部分:
#footer{
box-sizing: border-box;
}
这里有问题:
#footer {
width: 100%;
padding: 3px;
}
您的页脚宽度从填充设置为100%+6px
尝试添加此选项以使填充(和边框)成为页脚内容的一部分:
#footer{
box-sizing: border-box;
}
添加csshtml,正文{margin:0px;padding:0px;}
addCSShtml,正文{margin:0px;padding:0px;}
噢,谢谢。我知道特定的修复程序与某些浏览器不兼容。这是一个问题吗?如果是的话,我可以使用什么替代代码?@srob我已经用浏览器前缀更新了我的答案,请查看-@srob你可以使用max width:100%代码>哦,那么WebKit可以处理很多事情了,谢谢@caeth的建议。)哦,谢谢。我知道特定的修复程序与某些浏览器不兼容。这是一个问题吗?如果是的话,我可以使用什么替代代码?@srob我已经用浏览器前缀更新了我的答案,请查看-@srob你可以使用max width:100%代码>哦,那么WebKit可以处理很多事情了,谢谢@caeth的建议。)