我正在尝试使此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>
谢谢您的帮助!
最佳答案
您只需要重置边距和填充。试试这个代码。
* {
margin: 0;
padding: 0;
}
关于html - Div不会碰到屏幕的边缘,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/50959981/