Question

我的网页似乎正常使用 Bootstrap ，但每当我按下keydown（向下键）时，屏幕向下滚动，显示意外的空格，因为它已达到background-image的结尾，其大小为 1798px * 1080px 。

请参见图片：

以下是代码：

HTML ：

 <body style="background:url(assets/img/back-body-base.jpg); background-repeat:no-repeat; background-size:cover;">              
<div class="container-fluid">
    <div class="row">
        <nav class="col-lg-1" style="background-color:#2C2B2B;padding-bottom: 100%;margin-bottom: -100%;"></nav>
        <div class="col-lg-11" style="overflow: hidden">
            <div class="row">
                <header>
                    <div align="center" class="position-header">
                        <a href="index.html">
                            <div>
                                <img src="assets/img/logo.png" height="25%" width="25%"/>
                            </div>
                            <div class="p-top-10">
                                <img src="assets/img/sublogo.png" width="25%" height="25%"/>
                            </div>
                        </a>
                    </div>
                </header>
            </div>
            <div class="row">
                <div class="col-lg-1"></div>
                <div class="col-lg-11">
                    <div class="p-top-50"></div>
             <div class="row">                                          

                        <div class="col-lg-11">
                            <div class="row">
                                <div id="monday"  class="dayfloat daybutton-first w-200 dayList"    data-type="day"  data-daycount = "1"   tabindex="1">Mondat</div>
                                <div id="tuesday"  class="dayfloat daybutton-center w-200 dayList"    data-type="day" data-daycount = "2"    tabindex="2">Tuesday</div>
                                <div id="wednesday"  class="dayfloat daybutton-center w-200 dayList"    data-type="day" data-daycount = "3"    tabindex="3">Wednesday</div>
                                <div id="thursday"  class="dayfloat daybutton-center w-200 dayList"    data-type="day" data-daycount = "4"    tabindex="4">Thrusday</div>
                                <div id="friday"  class="dayfloat daybutton-center w-200 dayList"    data-type="day" data-daycount = "5"    tabindex="5">Friday</div>
                                <div id="saturday"  class="dayfloat daybutton-center w-200 dayList"    data-type="day" data-daycount = "6"    tabindex="6">Saturday</div>
                                <div id="sunday"   class="dayfloat daybutton-end w-200 dayList"   data-type="day"   data-daycount = "7"    tabindex="7">Sunday</div>        
                            </div>
                            <div class="row">
                                <div class="p-top-50"></div>
                                <div id="hour2" class="hour-to-hour-line"></div>                                            
                            </div>
                            <div class="row">
                                <div class="p-top-100"></div>
                                <div id="thumbnail" class="thumbs"></div>                                           
                            </div>
                        </div>                  
                    </div>
                </div>                      
            </div>                  
        </div>
    </div>
</div>
</body>

CSS ：

.p-top-10 {
    padding-top: 10px;
}
.p-top-30 {
    padding-top: 30px;
}
.p-top-50 {
    padding-top: 50px;
}

其他信息：

我使用jQuery实现了keydown事件，因此我可以转移到另一个事件   <div>

back-bode-base.jpg的分辨率＆＃39;是 1798px * 1080px

请帮助我。

Answer 1

使用下面的css，这会使你的背景固定为100％

body { 
   background: url(./images/back-body-base.jpg) no-repeat;
    background-size: 100% 100%;
    background-attachment:fixed;
}

在Bootsrap上按下keydown后意外向下滚动

1 个答案: