滚动条移动居中内容的纯CSS解决方案

Question

我试图将内容集中在网站上。我不太了解JavaScript，并尝试在我的网站中实现一些解决方案，但不能这样做。我更了解CSS，并且想知道它们是否是修复滚动条问题的简单解决方案。 任何帮助都会很棒。

编辑 我现在一直在学习Javascript和Jquery并发现像$（window）这样的东西.height（）这样做是解决它的好方法。是否有时候这不起作用？

Answer 1

我认为，我相信您需要响应式设计。这是它的演示。

Full Screen Demo

HTML and CSS Markups

<强> CSS

html,body{
    width:100%;
    margin:0;
    padding:0;
    font-family: "Arial";
}
.MainHeader{
    background-color:#BFBFBF;
    padding: 20px;
    overflow: hidden;
}
.MainHeaderTitle{
    display: inline-block;
    line-height: 64px;
    margin:0;
    vertical-align: top;
    color:#404040;
}
.MainHeaderLogo {
    display: inline-block;
    height: 64px;
    width: 64px;
    }
nav{

    overflow: hidden;
}
nav ul{
    margin:0;
    padding: 0;
    display: inline-block;
    overflow: hidden;
}
nav ul li{
    list-style-type:none;
    background-color: #404040;
    float: left;
    width: 140px;
    line-height: 40px;
    text-align: center;
    margin: 2px;
}
nav ul li a{
    color: #BFBFBF;
    text-decoration: none;

}
section ul li a{
    color: #404040;
    text-decoration: none;
}

img{
    max-width: 100%;
}
.img-container{
    text-align: center;
}
main{
    width:100%;
    padding: 20px;
    box-sizing: border-box;
}
footer{
    background-color:#404040;
    color: #BFBFBF;
     overflow: hidden;
    padding: 20px;
}
footer a,footer p{
     color: #BFBFBF;
     margin: 5px;
     display: inline-block;

}
.col-3{
    width:25%;
    float:left;

}