100％宽度的固定位置页脚从窗口向右延伸 [英] Fixed position footer at 100% width extends past window to right

问题描述

我需要帮助，尝试让此页脚设置在固定的位置。我正在学习，我试图做一个合理的液体布局。这是一个正在进行的工作，但是我不能继续，直到我在合适的地方得到页脚。

我的问题是它继续延伸到窗口右边。有时它创建一个滚动条，不遵循边际规则。我试过了我可以想到的一切，我可以找到通过使用可信赖的谷歌。我已经使用最新的chrome和firefox版本，看看是否是一个chrome问题。

我曾经有一个wrap容器，但我已经删除它，并移动页脚代码

  
 
 
  body {text-align：center; margin-top：0;背景颜色：＃1A1A1A; background-image：url（'＃'）; background-position：center;背景重复：无重复; background-attachment：fixed; background-size：cover;} #logo {background-color：rgba（53，53，53，0.9）; padding：10px;位置：相对; 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;位置：相对; 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;位置：相对; text-align：center;}＃link1：hover {background-color：＃727272; -webkit-transition：all 0.3s; -moz-转变：全0.3s; -ms-transition：all 0.3s; - 跃迁：全部0.3s; transition：all 0.3s;}＃link1：active {background-color：＃ba6a15;}＃link2：hover {background-color：＃727272; -webkit-transition：all 0.3s; -moz-转变：全0.3s; -ms-transition：all 0.3s; - 跃迁：全部0.3s; transition：all 0.3s;}＃link2：active {background-color：＃ba6a15;}＃link3：hover {background-color：＃727272; -webkit-transition：all 0.3s; -moz-转变：全0.3s; -ms-transition：all 0.3s; - 跃迁：全部0.3s; transition：all 0.3s;}＃link3：active {background-color：＃ba6a15;}＃link4：hover {background-color：＃727272; -webkit-transition：all 0.3s; -moz-转变：全0.3s; -ms-transition：all 0.3s; - 跃迁：全部0.3s; transition：all 0.3s;}＃link4：active {background-color：＃ba6a15;} #footer {background-color：rgba（53，53，53，0.9）位置：固定; bottom：0; width：100％; height：22px; padding：3px; color：#FFF;}  
 
 <！DOCTYPE html& < html> < head> < / head> < body> < head> < div id =logo>< img src =＃alt =logo>< / div> < nav> < ul> < li id =link1>< a href =＃>< img src =＃alt =; height =100; width =100>< / a>< / li> < li id =link2>< a href =＃>< img src =＃alt = height =100; width =100>< / a>< / li> < li id =link3>< a href =＃>< img src =＃alt =; height =100; width =100>< / a>< / li> < li id =link4>< a href =＃>< img src =＃alt =; height =100; width =100>< / a>< / li> < / ul> < / nav> < / header> < footer> Hello there！< / footer> < / body>  
 
 
 
  

<你可以通过设置 margin：0px; 到 body 和 box-sizing：border-box; 至 footer

JSFiddle - DEMO

  body {
 text-align：center; 
 background-color：＃1A1A1A; 
 background-image：url（'＃'）; 
 background-position：center; 
 background-repeat：no-repeat; 
 background-attachment：fixed; 
 background-size：cover; 
 margin：0px; 
} 
 #footer {
 background-color：rgba（53，53，53，0.9）; 
 position：fixed; 
 bottom：0; 
 width：100％; 
 height：22px; 
 padding：3px; 
颜色：#FFF; 
 -webkit-box-sizing：border-box; 
 -moz-box-sizing：border-box; 
 box-sizing：border-box; 
} 
  

I need help with trying to get this footer set in a fixed position. I'm learning as I go and trying to make a reasonably liquid layout. It's a work-in-progress but I can't continue until I get the footer in the right place.

My problem is it keeps extending past the window to the right. Sometimes it creates a scrollbar and does not follow margin rules. I've tried just about everything I could think of and what I could find by using trusty google. I have used the latest chrome and firefox versions to see if it was a chrome issue.

I once had a wrap container, but I have removed it and moved the footer code from place to place trying to find a place for it where it would behave properly.

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

<!DOCTYPE html>
    <html>
    <head>
    </head>

    <body>    
    <header>
            <div id="logo"><img src="#" alt="logo"></div>
    <nav>
    <ul>
            <li id="link1"><a href="#"><img src="#" alt=""; height="100"; width="100"></a></li>

            <li id="link2"><a href="#"><img src="#"  alt=""; height="100"; width="100"></a></li>

            <li id="link3"><a href="#"><img src="#"  alt=""; height="100"; width="100"></a></li>

            <li id="link4"><a href="#"><img src="#" alt=""; height="100"; width="100"></a></li>
    </ul>
    </nav>
    </header>
    <footer>Hello there!</footer>
    </body>

解决方案

You could do it by set margin:0px; to body and box-sizing: border-box; to footer

JSFiddle - DEMO

body {
    text-align: center;
    background-color: #1A1A1A;
    background-image: url('#');
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    margin:0px;
}
#footer {
    background-color: rgba(53, 53, 53, 0.9);
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 22px;
    padding: 3px;
    color: #FFF;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

这篇关于100％宽度的固定位置页脚从窗口向右延伸的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！