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

我在<footer>标记中有两个无序列表<ul>。列表项目是水平显示的，两个列表之间用一些空格分开。我想要的是修复页脚在浏览器底部的位置。页脚的固定位置将内容从容器中取出 - CSS

问题：

当我尝试使用的CSSposition财产页脚位置设置为固定，一个列表失控的footer容器，但它的立场始终不变，即横向到第一个列表即在footer容器内。

如果footer位置设置为相对，第二列表回来的footer容器内。

问：

我在做什么错在这里？

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

来源

2017-09-13 Yousaf

为什么你有'离开：835px'在'列表2'？ – kukkuz

使第二个列表显示在屏幕的右侧。我希望第一个列表显示在最下面的角落，第二个列表显示在右下角。 – Yousaf

可以通过增加footer延长页脚到屏幕的整个宽度在你想保留的容器上使用：

.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>

来源

2017-09-13 15:10:46 kukkuz

工作正常，但我想知道是什么原因导致了这个问题？我做错了什么？ – Yousaf

你给了'835px'和*定位*在右边......但是这只适用于你的屏幕尺寸......应该做的是把'footer'放在100％'width'和* float *容器的右端... :) – kukkuz

是有道理的:)谢谢 – Yousaf

试试这个片断：

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

来源

2017-09-13 15:09:43

设置使用width:100%或width:100vw的页脚容器的宽度。在list-2您可以添加float:right

left: 0; 
right: 0;

取而代之的是left: 835px的：

*{ 
 
    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>

来源

2017-09-13 15:10:07 jfeferman

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

回答

相关问题