Question

相关网页位于www.codykrauskopf.com/circus

如果查看页面右侧，半透明容器与浏览器窗口边缘之间存在间隙。我看起来因为某种原因包装，主要，内容和页脚都停止了。我已经将html，body，main，content，wrap和footer的宽度设置为100％而没有运气。

html, body {height: 100%;
width:100%;
margin:0;
padding:0;
overflow:auto;
}

#wrap {
width:100%;}
/* Circus.html content*/
#circusContent{
margin-left:100px;

}

p{
font-family:georgia;
}

div.topButtons{
display:inline-block;
margin-top:15px;
line-height:50px;
text-align:center;
vertical-align:middle;
width:130px;
background: rgb(166, 166, 166); /* The Fallback */
background: rgba(166, 166, 166, .5); 
}
#leftTopButton{
margin-left:75px;
}
a.forms{
text-decoration:underline;
}

div.topButtons:hover{
background: rgb(100, 0, 0); /* The Fallback */
background: rgba(0, 0, 0, 1); 
}

#circusParagraph{

color:white;
font-size:14px;
text-align:center;
margin-left:125px;
margin-top:25px;
}

#content{
position:relative;

margin-left:22.513089005%;

margin-bottom:-35px;
width:77.486910998%;

background: rgb(0, 0, 0); /* The Fallback */
background: rgba(0, 0, 0, 0.5); 
}

#main,
#wrap,
#content,
#circusContent{
height:100%;

}

Answer 1

取出

max-width：120em;为您的主要容器

这应该可以解决你的问题

Answer 2

你的罪魁祸首是：

#foottext {
  position: relative;
  left: 20px;
  top: 5px;
}

left: 20px迫使div延伸到其容器之外，导致间隙。

而不是使用position: relative移动或重新排列网页上的大元素，您可能会有更好的结果应用填充或边距。

内容/页脚的宽度超出浏览器宽度

2 个答案: