如何限制我的页脚的宽度

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; 

}