我正在一个网站上工作,我不知道如何解决这个问题。 当页面加载并且浏览器最大化时,底部栏会占据整个屏幕,背景显示为蓝色。
当网站大小调整并且浏览器的底部滚动条可见并可以水平滚动时,div 的背景会在屏幕结束的地方被切断,之后就变成白色,而不是一直填充为蓝色.
知道我需要对此进行什么更改吗?我认为网站的正文需要一些东西?我知道可能超级简单只是想不出来。
谢谢
https://jsfiddle.net/hd9c76tz/
CSS:
* {
box-sizing: border-box;
}
html {
width: 100%;
height: 100%;
}
body {
background-color: #FFFFFF;
box-sizing: border-box;
color: #FFFFFF;
font-family: "Lato", Helvetica Neue, sans-serif;
font-weight: 300;
margin: 0px;
width: 100%;
text-align: left;
background-repeat: no-repeat;
background-attachment: fixed;
}
#content {
background-color: #FFFFFF;
color: #000433;
font-size: 0px;
}
#content-block {
width: 100%;
background-color: #FFFFFF;
padding: 20px 0px;
font-size: 12px;
}
#content-headline {
font-size: 55px;
font-weight: 500;
line-height: 55px;
margin: 0 0 10px 0;
text-transform: uppercase;
}
#content-item-container {
width: 100%;
font-size: 0;
}
#content-wrapper {
max-width: 1460px;
min-width: 1200px;
padding: 0px 48px;
margin: 40px auto 0 auto;
text-align: center;
}
#facts-block {
padding: 20px 0px;
margin: 40px auto 0 auto;
background-color: #EFF6FF;
width: 100%;
color: #000433;
font-size: 0px;
font-weight: 500;
}
#facts-block-content {
padding: 0 0 0 20px;
display: inline-block;
vertical-align: top;
height: 55px;
}
#facts-block-headline {
font-size: 16px;
margin: 0 0 14px 0;
text-transform: uppercase;
}
#facts-block-text {
font-size: 12px;
font-weight: 400;
text-transform: capitalize;
}
#facts-block-item {
font-size: 0px;
display: inline-block;
margin: 0px;
width: 25%;
padding: 40px 0px;
text-align: left;
}
#facts-block-wrapper {
min-width: 1200px;
max-width: 1460px;
;
margin: auto;
text-align: center;
padding: 0px 48px;
}
#legal-content-paragraph {
font-size: 14px;
font-weight: 300;
line-height: 25px;
text-align: justify;
margin: 0 0 40px 0;
color: #000433;
}
您可以删除
min-width
属性。它将修复滚动和 div 截止问题。
#content-wrapper {
max-width: 1460px;
/* min-width: 1200px; */
padding: 0px 48px;
margin: 40px auto 0 auto;
text-align: center;
}
#facts-block-wrapper {
/* min-width: 1200px; */
max-width: 1460px;
margin: auto;
text-align: center;
padding: 0px 48px;
}