页脚的固定定位将内容从容器中取出 - CSS

Question

我在 <footer> 标签中有两个无序列表 <ul>。列表项水平显示，两个列表之间用一些 space 分隔。我想要的是固定页脚在浏览器底部的位置。

问题：

当我尝试使用 CSS 的 position 属性将页脚的位置设置为 fixed 时，一个列表从footer 容器，但其位置保持不变，即与 footer 容器内的第一个列表水平。

如果 footer 的位置设置为 relative，第二个列表返回 footer 容器内。

问题：

我做错了什么？

相关代码：https://codepen.io/anon/pen/dVPyvG

Answer 1

试试这个片段：

footer{
    background: #eee;
    height: 50px; 
    position: absolute;   //use absolute for position
    bottom: 0px;
    width:100%;           //add width
    border: solid 5px red;
}

Answer 2

使用 width:100% 或 width:100vw 设置页脚容器的宽度。

*{
    margin: 0;
    padding: 0;
}

footer{
    background: #eee;
    width:100%;
    height: 50px; 
    position: fixed;
    bottom: 0;
    border: solid 5px red;
}

footer ul{
    line-height: 50px;
}

.list-container{
    display: inline-block;
}

footer ul li{
    display: inline-block;
    margin-right: 10px; 
}

#list-1{
    padding-left: 15px;
}

#list-2{
    position: relative;
    left: 835px;
}

<html>
    <head>
        <title>Fake Google Homepage</title>
        <link rel="stylesheet" type="text/css" href="fakeGoogle.css">
        <!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
    </head>
    
    <body>
        
        <footer>
            <div class="list-container">
               <ul id="list-1">
                    <li>Advertising</li>
                    <li>Business</li>
                    <li>About</li>   
                </ul> 
            </div>
            
            <div class="list-container">
                <ul id="list-2">
                    <li>Privacy</li>
                    <li>Terms</li>
                    <li>Settings</li>
                    <li>Use Google.com</li>    
                </ul>
            </div>
        </footer>
        
    </body>
</html>

Answer 3

您可以 将页脚 添加到 footer:

left: 0;
right: 0;

而不是 list-2 上的 left: 835px，您可以在要保持在右侧的容器上添加 float:right，使用：

.list-container + .list-container {
  float: right;
}

参见下面的演示：

* {
  margin: 0;
  padding: 0;
}

footer {
  background: #eee;
  height: 50px;
  position: fixed;
  bottom: 0;
  left: 0; /* ADDED */
  right: 0; /* ADDED */
  border: solid 5px red;
}

footer ul {
  line-height: 50px;
}

.list-container {
  display: inline-block;
}

footer ul li {
  display: inline-block;
  margin-right: 10px;
}

#list-1 {
  padding-left: 15px;
}

#list-2 {
  position: relative;
  /*left: 835px;*/
}
.list-container + .list-container {
  float: right; /* ADDED */
}

<html>

<head>
  <title>Fake Google Homepage</title>
  <link rel="stylesheet" type="text/css" href="fakeGoogle.css">
  <!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>

<body>

  <footer>
    <div class="list-container">
      <ul id="list-1">
        <li>Advertising</li>
        <li>Business</li>
        <li>About</li>
      </ul>
    </div>

    <div class="list-container">
      <ul id="list-2">
        <li>Privacy</li>
        <li>Terms</li>
        <li>Settings</li>
        <li>Use Google.com</li>
      </ul>
    </div>
  </footer>

</body>

</html>

页脚的固定定位将内容从容器中取出 - CSS

Fixed positioning of footer takes content out of the container - CSS

html

css

css-position

css-float