Question

你好，我面对一个问题，响应一个介绍，页面打开滚动，我想让页面显示完全响应没有任何滚动条，我试图设置高度100％没有运气< / p>

HTML

<div class="main">
<div class="container">
    <div class="marquee">
        <marquee scrollamount="3" direction="right" dir="ltr">
             <h3 align="center" style="color:#804000;font-size:large;margin-top:0px;">     <strong>  
<img height="auto" width="200%" src="http://www.ghadaalsamman.com/new/images/image21.png">
    </strong></h3>

        </marquee>
    </div>
   <a class="button" id="btn1" href="http://ghadaalsamman.com/new/site.html"></a>

  </div>
  </div>

CSS

html {
    height: 100%;
    width: 100%;
}
body {
    width: 100%;
    hight: 100%;
    margin: 0;
    padding: 0;
}
.main {
    background-image: url("http://www.ghadaalsamman.com/new/images/bg.gif");
    background-repeat: no-repeat;
    background-position: center center;
    margin: 0;
    padding-top: 30vw;
    background-size: 100%;
}
.marquee {
    display: block;
    position: relative;
    width: 51vw;
    margin: auto;
}
marquee {
    width: 100%;
    margin: auto;
    display: block;
}
#btn1 {
    background: url("http://www.ghadaalsamman.com/new/images/enter.gif") no-repeat scroll center center;
    display: block;
    height: 53px;
    margin: 0 auto;
    position: relative;
    width: 50%;
    background-size: 100%;
    margin-top: 33%;
    margin-bottom: 1%;
}
.button {
    padding: 5px;
}
.container {
    display: block;
    height: 100%;
    margin: 0 auto;
    max-width: 960px;
    position: relative;
}
@media screen and (max-width:500px) {
    #btn1 {
        background-size: 100% auto;
    }
}

这里的jsfiddle：

http://jsfiddle.net/m0sagal/afB6a/

先谢谢

Answer 1

这是问题

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

替换为

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

Answer 2

你的形象比例会让我很难相信。

由于您开始使用vw单位，也许这是一个使用vh单位和最大宽度的提示。

由于你的形象，太像广场一样，容器也需要稍微小一些才能保持在视线范围内。因为，大众单位，我建议使用display：fle轻松集中容器：

DEMO of my idea

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;
}

如何使设计充分响应

2 个答案: