Question

所以我一直在测试我的网站看起来如何使用不同的屏幕尺寸，我注意到我的页脚正确定位在屏幕的右下方，分辨率为800x600到1920x1080但是在2560x1600上它没有位于右下角 / w h y /？

我正在使用CrossBrowserTesting

这是我的代码：

body {
    font-family: 'Courier New', Courier, monospace;
    background: linear-gradient(to bottom, #1D4350 , #A43931);
    background-attachment: scroll;
}
html, body, #wrapper {
    max-width: 100%;
    min-height: 100%;
    min-width: 960px; 
    margin: 0 auto;
}
#wrapper {
    position: relative;
}
#content {
    height: 1200px;
}
.Octagon { 
    color: #2aa186;
    text-align: center;
    line-height: 30%;
    margin-top: 25px;
}
.LT {
    text-align: center;
    color: #3a5454;
    line-height: 0%;
    font-style: italic;
}
.boi {
  cursor: pointer;
  margin-right: 30px;
  padding: 8px 18px;
  border: 1px solid #204156;
  border-color: #52AEC9;
  color: #52AEC9;
  position: absolute;
  top: 8px;
  right: 16px;
}
.boi:active {
    top: 2px;
}
.iob {
  cursor: pointer;
  margin-left: 30px;
  padding: 8px 18px;
  border: 1px solid #204156;
  border-color: #52AEC9;
  color: #52AEC9;
  position: absolute;
  top: 8px;
}
#verr {
    
}
.boi:active, 
.iob:active {
    top: 2px;
}
#manyarms {
    position: absolute;
    margin-top: 30px;
    margin-left: 31px;
}
#sensible {
    position: absolute;
    margin-top: 30px;
    margin-right: 31px;
    right: 10px;
}
.boi:hover,
.iob:hover {
    text-shadow: 0 0 10px #a193ff;
}
#footer {
    padding-left: 93%;
}

<html>
<head>
        <title>The Pragmatic Octopus</title>
        <meta charset="utf-8"/>
    	<link rel='stylesheet' href='style.css'/>
	    <script src='script.js'></script> 
</head>
<body>
<div id="wrapper">
<div id="header">
	    <h1 class="Octagon">The Pragmatic Octopus</h1>
	    <p class="LT">Lee Townsend</p>
        <a href="www.google.com">
	    <p class="boi">Contact</p>
        </a>
        <a href="www.google.com">
    	<p class="iob">Information</p>
        </a>
</div>
<div id="content">
    <div id="manyarms">
        <img src="https://s32.postimg.org/406x38nlh/imageedit_1_3827627792        .jpg" alt="mmm~" style="width:310px; height:250px;">
        <p style="color: #6458b7;" id="verr">Here comes a very special boi!</p>
    </div>
    <div id="sensible">
        <img src="http://www.wonderslist.com/wp-content/uploads/2014/07/Blue-ringed-octopus.jpg" alt="~mmm" style="width:310px; height:250px;">
        <p style="color:#6458b7;">He loves to pose for photos!</p>
    </div>
</div>
<div id="footer">
    &copy; Hecc
</div>
</div>
</body>
</html>

这是我的代码中的错误还是CrossBrowserTesting中的错误？非常感谢任何帮助！

Answer 1

你的#wrapper streches和它的css是 - max-width：100％;
你的#footer在#wrapper里面 soo也许你的内容不会将包装器拉伸到全宽，这也就是为什么#footer不在屏幕的最右边（因为它位于#wrapper的最右边）
试着从#wrapper中取出#footer或make＃包装宽度：100％，正文和html宽度：100％

Answer 2

如果您更换：

#footer {
    padding-left: 93%;
}

与

#footer {
    float: right;
    margin-right: 10px;
}

您将在右侧修复您的div，无论屏幕是大型，中型还是小型。

我的页脚几乎每个屏幕大小都正确地重新定位，除了一个？

2 个答案: