Html 调整窗口大小时CSS样式的更改

我不知道为什么页眉和页脚的大小会随着窗口大小的改变而改变。在调试/重写代码时，我发现在添加

设置

（css:Setting下拉列表）或

注销

（css:Logout button）div时，css会中断。我试图修复它，但我无法找出设置和注销按钮显示在页眉宽度之外的原因，以及添加这两个div后页眉和页脚宽度增加的原因

谢谢你的帮助

html{
背景：url（“backlines.png”）无重复中心固定；
-webkit背景尺寸：封面；
-moz背景尺寸：封面；
-o-背景尺寸：封面；
背景尺寸：封面；
}
身体{
高度：850px；
}
.averios标题{
位置：绝对位置；
背景图像：-webkit渐变（线性，0%0%，0%100%，颜色停止（0，rgb（226226226226）），颜色停止（0，rgb（254，254，254）），颜色停止（0.1，rgb（254，254，254）），颜色停止（1，rgb（219219219219）），颜色停止（1，rgb（209209，209））；
左：1px；
顶部：0px；
保证金：0自动；
宽度：100%；
/*溢出：自动*/
盒影：0px 2px；
}
div#averios标志{
宽度：300px；
左边距：270px；
}
部门#后勤主管{
字体系列：'Museo Slab 700'；
利润上限：360px；
左边距：276px；
字号：26px；
颜色：rgba（0,173239,1）；
}
分管器{
边缘顶部：50px；
左边距：278px；
字体大小：25px；
字体系列：无衬线；
}
.averios页脚{
位置：绝对位置；
背景图像：-webkit渐变（线性，0%100%，0%0%，颜色停止（0，rgb（226226226226）），颜色停止（0，rgb（254，254，254）），颜色停止（0，rgb（254，254，254）），颜色停止（0，rgb（254，254，254）），颜色停止（0.176，rgb（254，254，254）），颜色停止（0.904，rgb（219219，219）），颜色停止（1，rgb（209，209，209））；
边缘顶部：812px；
宽度：100%；
高度：65px；
左边距：-7px；
溢出：自动；
}
/*部门主管人力资源{
位置：绝对位置；
背景：rgba（0173239,1）；
高度：6px；
宽度：100%；
}*/
部门页脚人力资源{
位置：绝对位置；
背景：rgba（0173239,1）；
高度：6px；
宽度：100%；
}
div#页脚文本{
字体系列：无衬线；
字号：19px；
边缘顶部：25px；
左边距：280px；
颜色：rgb（127130134）；
}
div#忘记密码链接{
边缘顶部：90像素；
字体大小：23px；
文字装饰：无；
}
a{
颜色：rgb（127130134）；
}
div#欢迎文本{
左边距：276px；
字体系列：“Museo Slab 300”；
字体大小：22px；
}
div#欢迎文本p{
保证金：5px自动；
}
div#下拉脉冲#下拉按钮{
填充：16px；
边际上限：0；
右边距：自动；
左边距：276px；
页边距底部：0；
边界半径：50px 50px 50px 50px；
背景：rgba（0173239,1）；
颜色：白色；
宽度：230px；
边界：无；
字体大小：16px；
位置：相对位置；
顶部：100px；
文本对齐：左对齐；
}
img#箭头{
位置：相对位置；
顶部：110px；
右：84px；
}
img球{
位置：相对位置；
顶部：116px；
右：51px；
}
/*设置下拉列表*/
div#设置下拉列表{
位置：绝对位置；
左边距：1350px；
高度：0px；
显示：内联块；
}
div#设置下拉内容{
显示：无；
背景：rgba（0173239,1）；
宽度：237px；
/*填充：8px*/
位置：绝对位置；
左边距：-116px；
利润上限：-22px；
填充：15px；
}
div#设置下拉列表p{
字体大小：22px；
边缘顶端：44px；
字体系列：“Museo Slab 700”；
}
img#设置蓝色箭头{
位置：相对位置；
左边距：121px；
顶部：-44px；
}
div#设置下拉式内容a{
颜色：白色；
文字装饰：无；
/*显示：无*/
字号：19px；
字体系列：“Museo Slab 300”；
填充：2px；
}
#设置下拉菜单：悬停#设置下拉菜单内容{
显示：块；
}
/*新事物*/
div#设置下拉列表i{
显示：内联块；
填充物：5px；
右侧填充：7px；
文本对齐：居中；
边界半径：10px 10px 0；
垫底：10px；
}
div#设置下拉列表：悬停i{
背景色：rgba（0173239,1）；
颜色：白色；
}
div#注销按钮{
位置：绝对位置；
左边距：1569px；
利润上限：-90px；
边框样式：无；
}
按钮#averios注销{
背景：rgba（255，255，255，1）；
边界：无；
边界半径：40px 40px 40px 40px；
宽度：135px；
高度：40px；
字号：19px；
字号：900；
字体系列：“Museo Slab 700”；
}

标题
背景

注销
&抄袭；2016年，保留所有权利。

余量太大，无法适应小于1600px的分辨率

div#logout-button {
    margin-left: 1569px;
}
div#setting-dropdown {
    margin-left: 1350px;
}

---

难道你不想用“右：值”样式参数来确定这些元素的位置吗？或者对两个元素都使用“float:right；”？

我检查了您的代码。有这么多问题。所以，我建议您使用bootsrap框架。你需要写这么多的css代码，bootstrap为你做这件事

---

这是一个非常简单的代码示例。我改变了你的html结构，改变了很多css。请看一看。我还添加了媒体查询，以便更好地查看。如果你有任何问题，请在评论中问我。为了更好地理解，您可以学习定位和一个基本的示例。祝你好运：）

/*有用类*/
.img响应{
宽度：100%；
显示：块；
保证金：0自动；
高度：自动；
}
李{
列表样式：无；
}
a{
文字装饰：无；
}
身体{
保证金：0；
}
/*主CSS开始*/
html{
背景：红色无重复中心固定；
-webkit背景尺寸：封面；
-moz背景尺寸：封面；
-o-背景尺寸：封面；
背景尺寸：封面；
}
/*标题部分*/
.averios标题{
背景图像：-webkit渐变（线性，0%0%，0%100%，颜色停止（0，rgb（226226226226）），颜色停止（0，rgb（254，254，254）），颜色停止（0.1，rgb（254，254，254）），颜色停止（1，rgb（219219219），219）），颜色停止（1，rgb（209，