Question

我的网站有一个向上滚动页面的div。它填充了100％的屏幕，但由于某种原因，有一点水平滚动可用，背景延伸了额外的位。

我试图让div与屏幕/背景的宽度相匹配，而不需要任何水平滚动。问题发生在最右边。

HTML：

<body>
    <div class="summaryPanel">
        <p>Summary</p>
    </div>
</body>

CSS：

body {
    position: relative;
    background-image: url(../images/trees.jpeg);
    background-color: white;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    z-index: -2;
}

.summaryPanel {
    position: absolute;
    top: 10vh;
    z-index: -1;
    height: 100vh;
    width: 100vw;     // I also tried "100%"
    background-color: #242A31;
    border-top: 3px solid rgb(74, 74, 74);
}

Answer 1

你应该这样试试。添加新课程（wrapper）代替body

＆＃13;

*{margin:0;padding:0}
.wrapper {
    position: fixed;
    background-image: url(../images/trees.jpeg);
    background-color: white;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    z-index: -2;
}
.summaryPanel {
    position: relative;
    top: 10vh;
    z-index: -1;
    height: 90vh;
    width: 100vw;
    background-color: #242A31;
    border-top: 3px solid rgb(74, 74, 74);
}

＆＃13;

<div class="wrapper">
 <div class="summaryPanel">
        <p>Summary</p>
    </div>
</div>

＆＃13;

我希望它会对你有所帮助。

Answer 2

$(document).ready(function(){
$(".summaryPanel").height($(window).height());
$(".summaryPanel").width($(window).width());
});

使用jQuery设置div的宽度和高度

Answer 3

我希望这会有所帮助。

添加到正文标记

body{
    overflow-x: hidden;
}

Answer 4

我没有对此进行过测试，但我认为这样可以解决您的问题...

 body 
       {
          margin: 0;
          padding: 0;
          width:100%;//if needed
          height:100%;//if needed
       }
       #divID
       {
         margin: 0;
         width: 100%;
         height: 100%
         background-color: red;//for test
       }

100％是其父级的100％，更多信息here

我的网站上的Div有100％的宽度，但没有身体宽？

4 个答案: