0
У меня есть раздел div (# section1), который я хочу сохранить на 100% по высоте, но для расширения, если нужно, чтобы соответствовать другому контенту. Ширина составляет 100%. У меня есть другой div ниже этого, когда вы прокручиваете страницу вниз (# section2), тот же самый принцип 100% высоты и ширины, при этом высота увеличивается по мере необходимости. Моя проблема заключается в том, что второй не будет полностью задерживаться, из-за того, что первый div будет абсолютным. Вместо этого у него есть первый раздел поверх него. У кого-нибудь есть совет? Я использую Bootstrap 4 для этого проекта.Нажатие Div ниже другого
header {
line-height: 100px;
height: 100px;
width: 100%;
background: #f3f3f3;
position: fixed;
top: 0;
z-index: 2;
}
html {
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
min-height: 100%;
height: 100%;
}
body {
background: none;
height: 100%;
}
p {
font-size: 20px;
margin: 0;
}
#section1 {
padding: 0;
margin: 0;
background-color: #292929;
margin: 0 auto;
min-height: 100%;
width: 100%;
position: absolute;
}
#section2 {
padding: 0;
margin: 0;
background-color: red;
margin: 0 auto;
min-height: 100%;
width: 100%;
}
#section2 p {
background-color: inherit;
max-width: 600px;
margin: 0 auto;
}
#section2 a {
background-color: #2eb233;
color: #ffffff;
font-weight: 700;
font-size: 20px;
padding: 15px 40px;
}
#section2 a:hover {
text-decoration: none;
background-color: hsl(122, 79%, 38%);
}<!--Header-->
<header></header>
<!--Section 1-->
<div id="section1">
<div class="container">
<div class="row">
<div class="col-md-6 push-md-6">
<div id="quote-section">
<h1>What our customers <br> have to say...</h1>
<div id="quote-box">
<p><em>"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore repellat eos quas, similique tempora at magni ab cumque blanditiis labore provident quae dolorem optio nobis vel debitis quasi, rem recusandae!"</em>
</p>
<p id="quote-location">(Location)</p>
</div>
<a class="call-to-action" href="#">Find A Location</a>
<div id="border-section-off"></div>
<a class="call-to-action" href="#">Order Our Home Study Course</a>
</div>
</div>
</div>
</div>
</div>
<!--Section 2-->
<div id="section2">
<h1>Who We Are...</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo quaerat odit cumque assumenda voluptates ipsum nisi, aliquid consequuntur obcaecati commodi aperiam sequi officiis illo adipisci inventore, beatae, ex ab eveniet.Lorem ipsum dolor sit amet,
consectetur adipisicing elit. Nemo quaerat odit cumque assumenda voluptates ipsum nisi, aliquid consequuntur obcaecati commodi aperiam sequi officiis illo adipisci inventore, beatae, ex ab eveniet. Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Consequuntur iste suscipit deserunt ipsum officia, rerum. Aliquam distinctio, quia placeat praesentium, nesciunt fugiat, provident assumenda voluptates voluptate esse totam, nam vero!Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Magni quia officia quasi voluptas animi ex delectus reiciendis, commodi, voluptatum nemo, ullam sequi saepe! Ut dicta quidem odit cupiditate. Reprehenderit, id.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero quibusdam in laborum nobis
harum aspernatur, quidem repellat non nostrum, error dolore beatae saepe deserunt atque nemo repudiandae praesentium dolorem. Autem?</p>
</div>
Просто удалите 'position: absolute' в первом разделе - это нецелесообразно. –
Пожалуйста, дайте мне знать, если мой ответ не соответствует вашим потребностям –