Question

我正在尝试使此div“ maindiv”触摸屏幕的两侧，或拉伸以同时触摸它们的两侧。我一直在寻找方法，但没有得到任何具体说明。

我只是试图将其拉伸到屏幕的两边，而不在底部创建滚动条！

    body {
        background-image: url("https://i.gyazo.com/b31293b75dbdff3868a22fc90f9d465c.jpg");
	    background-attachment: fixed;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }

    .header {
        min-height: 500px; 
    }

    .header p {
        text-align: center;
        position: relative;
        top: 250px;
        font-family: Montserrat;
        color: #f5dabf;
        font-size: 40px;
        text-transform: uppercase;
        font-weight: 100;
        letter-spacing: 5px;
        word-spacing: 20px;
        border-bottom: #f5dabf solid 1px;
        width: 25%;
        margin: auto;
        padding-bottom: 10px;
    }


    .maindiv {
       background-color: #ffffffe8;
       min-height: 250px;
       max-width: 100%;
       margin: auto;
	   margin-bottom: 10%;
      }

    .maindiv p {
      font-family: Verdana, sans-serif;
      padding: 30px;
   
    }

    <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <body>

    <div class="header"> <p> Infinite Design </p></div>

    <div class="maindiv">
    <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sed venenatis enim, ac auctor massa. Praesent eget libero sapien. Nulla facilisi. Proin id nunc diam. Aliquam efficitur consequat mauris. Donec vitae risus mollis, lobortis erat vitae, ultrices leo. Praesent rutrum mi non tellus malesuada, non mollis lacus blandit. Nullam ac tincidunt lacus. Integer maximus massa scelerisque placerat lacinia. Curabitur fermentum condimentum euismod. Nunc eu condimentum nunc. In vel viverra dolor. Cras vel ex molestie, gravida est et, ullamcorper sapien. Cras sapien leo, suscipit non tortor eu, hendrerit efficitur massa. Morbi ultricies hendrerit imperdiet.
    <br><br>
    Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla porttitor, elit quis eleifend dignissim, massa nunc dictum lorem, quis volutpat ex metus non urna. Morbi in vestibulum sapien. Phasellus massa dui, convallis eget consectetur non, aliquam sed ligula. Aliquam nec mauris tempor, laoreet lectus ut, gravida tortor. Aenean tempus hendrerit consequat. Nullam feugiat diam ut tortor congue, non consequat nulla consectetur. Integer eu consequat magna. Nunc placerat lacinia accumsan. Aliquam erat volutpat.
    <br><br>
    </p>
    </div>
    </body>
    </html>

感谢您的帮助！

Answer 1

有帮助吗？

html, body { 
    padding:0;
    margin:0;
}

Answer 2

您只需要重置边距和填充。试试这个代码。

* {
  margin: 0;
  padding: 0;
}

Answer 3

您可以在正文标签中添加margin:0;。

默认情况下，html会将空白添加到您的<body>标签中。

Div不会碰触屏幕的边缘

3 个答案: