Html 如何使设计完全响应

你好，我遇到了一个问题，有响应的介绍，页面打开滚动，我想让页面显示完全响应没有任何滚动条，我试图设置高度100%，没有运气

HTML

下面是JSFIDLE：

感谢您提供的advanced

这就是问题所在

body {
    width: 100%;
    hight: 100%;  <----- 'hight' make it 'height'
    margin: 0;
    padding: 0;
}

---

我相信，你的形象比例会让事情变得困难

由于您开始使用

vw

单位，可能这是一个使用

vh

单位和最大宽度的提示

因为你的形象，太像一个正方形，容器需要太小一点才能保持在视线中。因为，大众的单位，我建议使用display:fle轻松将您的容器居中：

---

CSS更新：

html {
    height: 100%;
    width: 100%;
}
body {
    width:100%;
    height:100%;/* UPDATED*/
    margin: 0;
    padding:0;
    display:flex;/* UPDATED*/
}
.main {
    background-image: url("http://www.ghadaalsamman.com/new/images/bg.gif");
    background-repeat: no-repeat;
    background-position: center center;
    margin: 0;
    padding-top: 15vh;/* UPDATED*/
    background-size: 100%;
    width:100vh;/* UPDATED*/
    margin:auto;/* UPDATED*/
    max-width:100vw;/* UPDATED*/
    overflow:hidden;/* UPDATED hide marquee*/
}


.container {
    display: block;
    height: 100%;/* useless when parent has no height given */
    margin: 0 auto;
    position: relative;
}

可能重复的

body {
    width:100%;
    height:100%;
    margin: 0;
    padding:0;
}

html {
    height: 100%;
    width: 100%;
}
body {
    width:100%;
    height:100%;/* UPDATED*/
    margin: 0;
    padding:0;
    display:flex;/* UPDATED*/
}
.main {
    background-image: url("http://www.ghadaalsamman.com/new/images/bg.gif");
    background-repeat: no-repeat;
    background-position: center center;
    margin: 0;
    padding-top: 15vh;/* UPDATED*/
    background-size: 100%;
    width:100vh;/* UPDATED*/
    margin:auto;/* UPDATED*/
    max-width:100vw;/* UPDATED*/
    overflow:hidden;/* UPDATED hide marquee*/
}


.container {
    display: block;
    height: 100%;/* useless when parent has no height given */
    margin: 0 auto;
    position: relative;
}