I'm sitting with a slight problem in my razor pages project.
I'm trying to make contact page, with two sections, one stretching across the entire page, without affecting the body element.
The first section is using position absolute, and that makes the second section stay behind the first. I wanted to know if there is a way dynamically changing "margin-top" on section 2 to be the height of section 1
Html
.sit-contact-downarrow {
fill: var(--color-second);
position: absolute;
bottom: -22.5px;
height: 22.5px;
width: 150px;
left: 50%;
transform: translate(-50%, 0%);
}
.sit-contact-downarrow path {
transform: scaleX(2);
}
.sit-contact-section {
position: absolute;
width: 100vw;
background-color: var(--color-second);
left: 50%;
transform: translate(-50%, 0%);
}
.sit-contact-section-item img {
height: var(--iconSize);
max-width: var(--iconSize);
max-height: var(--iconSize);
}
.sit-contact-section-items {
display: flex;
justify-content: space-between
}
.sit-contact-section-item {
word-wrap: anywhere;
width: 30%;
text-align: center;
background-color: rgba(220,220,255,0.3);
border: 2px solid black;
border-radius: 25px;
padding: 15px 5px;
}
.sit-contact-section-item a, .sit-contact-section-item span {
color: #333;
text-decoration: underline;
font-weight: 600;
font-size: 16px;
}
.sit-contact-section-content {
width: 40%;
margin: 20px auto;
} <div>
<div class="sit-contact-section">
<div class="sit-contact-section-content">
<h1>Kontakt os</h1>
<div class="sit-contact-section-items">
<div class="sit-contact-section-item" id="sit-item-map">
<img src="~/Pictures/map.svg" />
<div class="sit-contact-section-item-content">
<h3>Find os her</h3>
<a href="@(Model.LocationHref)" target="_blank">@Model.LocationShow</a>
</div>
</div>
<div class="sit-contact-section-item" id="sit-item-phone">
<img src="~/Pictures/phone.svg" />
<div class="sit-contact-section-item-content">
<h3>Ring til os</h3>
<a href="tel:@(Model.TelephoneNumberHref)">@Model.TelephoneNumberShow</a>
</div>
</div>
<div class="sit-contact-section-item" id="sit-item-mail">
<img src="~/Pictures/email.svg" />
<div class="sit-contact-section-item-content">
<h3>Send en email</h3>
<a href="mailto:@(Model.MailHref)">@Model.MailShow</a>
</div>
</div>
</div>
</div>
<svg class="sit-contact-downarrow">
<path d="M0 0 L37.5 22.5 L75 0 Z" />
</svg>
</div>
<div>
<div class="sit-contact-info">
</div>
<div class="sit-contact-form">
<form method="post">
<div>
<div>
<label></label>
<input type="text" />
</div>
<div>
<label></label>
<input type="text" />
</div>
</div>
<div>
<label></label>
<input type="text" />
</div>
<div>
<label></label>
<input type="text" />
</div>
<input type="submit" />
</form>
</div>
</div>
</div>