时间戳

首页 > 解决方案 > Div 不会触摸屏幕的边缘

html - Div 不会触摸屏幕的边缘

问题描述

我试图让这个 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>

谢谢您的帮助！

标签： htmlcss

解决方案

您可以添加margin:0;到 body 标签。

<body>默认情况下，html 会为您的标签添加边距。

推荐阅读