如何限制我的頁腳的寬度

Question

我希望頁腳底部的頁腳大小與頂部的導航欄相同（在角落有一些空白區域）。

酒吧裏面有一個容器container{margin:auto;}這就是爲什麼角落裏有空白。

我不明白爲什麼頁腳佔據了整個屏幕寬度，它與頂部的欄位在同一個容器內。

這裏是頁腳CSS：

.down{ 
    position: absolute; 
    margin: auto; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    padding: 1rem; 
    background-color: gray; 
    text-align: center; 

} 

我不想離開編輯保證金和正確的，因爲它不會響應了

Answer 1

韌而不HTML說但請嘗試將以下規則添加到容器中：

.container { 
    position: relative; 
} 

頁腳有一個絕對的位置。通過給容器一個相對位置，頁腳將相對於容器而不是主體放置。

這將導致頁腳不會附加到窗口的底部，而是附加到內容的底部。那麼除此之外，最小高度添加到容器：

.container { 
    min-height: 100vh; 
} 

Answer 2

你必須把你的<div class="down">你有沒有在你的CSS類提供寬度容器

<div class="container"> 
    <nav></nav> 
    <div class="down"> 
    </div> 
    </div> 


.down{ 
    position: absolute; 
    margin: auto; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    padding: 1rem; 
    background-color: gray; 
    text-align: center; 

}