頁腳的固定位置將內容從容器中取出 - 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

回答

相關問題