I am building a ASPX website. For designing purposes, I built out one of the website pages in HTML/CSS. I was able to have the container behave perfectly in that environment. As this project has progressed, the team and I had to pivot using aspx. I plugged in my HTML into the aspx file and have been able to get everything to look pretty identical to the page in the design phase, however, that container is no longer sticking to the top. Another team member built the site master for the website, which consists of a side navigation bar, and this sticky container I have, sits across the top of the page horizontally. I have suspicion that the sitemaster is interfering with that sticky container, but I am unsure if that is what is going on. There is also backend C# that could be interfering as well. Not sure.
This is how I want the webpage to work: Container Behavior
Below is what I tried in the aspx environment. Before Sitemaster was added/thrown into the mix, this worked great. But now with the sitemaster and its sidebar which sits next to my container on the left, it no longer works. There is also C# now tied to the equation that my teammate developed, and I wonder if for some reason that could be causing this? Just need to be pointed in the right direction since there are many variables at play.
Note: This container is not nested within another container, other than the main container. Also, for the sake of the question, I am not going to insert everything else regarding the content of the page, just the container in question; "not having enough page content" should not be causing the issue, because I can scroll down the page, the container just does not behave as it is supposed to when you scrolldown. Based on feedback I can edit and add more if needed.
<%@ Page Title="SADET - OSTA Form" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="OSTA.aspx.cs" Inherits="SADET_2025.OSTA" %>
<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
<link rel="stylesheet" href="Content/OSTA.css"/>
<link rel="stylesheet" href="Content/bootstrap.min2.css"/>
<script src="Content/popper.min.js"></script>
<main aria-labelledby="title">
<Stuff Above>
<div class="textFields bottom-line">
<div class="fileInfoHeader">
<p>File Information</p>
</div>
<div>
<div>
<p>File Number</p>
<textarea class="form-control" rows="1" name="OSTAFileNumber" id="OSTAFileNumber" maxlength="49" Runat="Server"></textarea>
</div>
<br>
<div>
<p>Escrow Officer</p>
<textarea class="form-control" rows="1" name="OSTAEscrowOfficer" id="OSTAEscrowOfficer" maxlength="49" Runat="Server"></textarea>
</div>
</div>
<div>
<div>
<p>Flash</p>
<textarea class="form-control" rows="1" name="OSTAFlash" id="OSTAFlash" maxlength="49" Runat="Server"></textarea>
</div>
<br>
<div>
<p>Date Closed</p>
<input class="form-control" type="date" value="" name="OSTADateClosed" id="OSTADateClosed" maxlength="49" Runat="Server">
</div>
</div>
<div>
<div>
<p>Branch</p>
<textarea class="form-control" rows="1" name="OSTABranch" id="OSTABranch" maxlength="49" Runat="Server"></textarea>
</div>
<br>
<div>
<div>
<p>Transaction Type</p>
<select class="form-select" aria-label="Default select example" name="OSTATransactionType" id="OSTATransactionType" Runat="Server">
<option value="1">Residential Sale</option>
<option value="2">Refinance</option>
<option value="3">Other</option>
</select>
</div>
</div>
</div>
<div>
<div style="padding-top: 4%;">
<p>Transaction Amount</p>
<input class="form-control" type="number" step="1.00" min="0" placeholder="$0.00" name="OSTATransactionAmount" id="OSTATransactionAmount" maxlength="49" Runat="Server">
</div>
<br>
<div style="padding-top: 1%;">
<p>Exception Percentage
<a class="d-inline-block" style="padding-right: 0.75%;" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="This is the execpetion percentage score for this file." data-bs-custom-class="custom-tooltip">
<img src="Images/info-circle.png" alt="Information Icon">
</a>
</p>
<div style="padding-right: 35%; padding-left: 35%;">
<asp:TextBox ID="OSTAExceptionPercentage" style="text-align: center;" Width="85px" visible="true" runat="server" placeholder="0.0" MaxLength="6" class="form-control" ReadOnly="true"/>
</div>
</div>
</div>
</div>
<Stuff Below>
</main>
</asp:Content>
/* Body */
body {
font-family: 'Segoe UI';
background-color: #f7f3eb !important;
}
/* File Information */
.textFields {
padding: 1%;
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 10px;
justify-items: center;
align-items: center;
position: -webkit-sticky;
position: sticky;
top: 0;
background-color: #f7f3eb !important;
z-index: 1000;
}
.textFields p {
text-align: center;
font-size: large;
}
.fileInfoHeader {
justify-content: center;
align-items: center;
}
.fileInfoHeader p {
text-align: center;
font-size: x-large;
padding: 10%;
}
.bottom-line {
border-bottom: 1px solid lightgrey;
}
<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="SADET_2025.SiteMaster" %>
<!DOCTYPE html>
<html>
<head runat="server">
<title></title>
<link href="Content/Site.css" rel="stylesheet" />
<link rel="stylesheet" href="Content/all.min.css">
<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"> -->
</head>
<body>
<form id="form1" runat="server">
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-dark bg-dark" style="background-color: #ffffff !important;">
<h1><img src="Images/FNF_logo_BIG.png" style="height:70px; width:70px"/></h1>
<h1><img src="Images/DSG_LOGO.png"/></h1>
</nav>
<div class="wrapper">
<div class="sidebar" style="height=100%">
<br />
<h1><a href="Home.aspx"><img src="Images/SADETs.png" alt="SADET"/></a></h1>
<nav>
<ul>
<li><a href="RONSA.aspx"><img src="Images/RONSA.png" alt="RONSA" /></a></li>
<li><a href="COSTA.aspx"><img src="Images/COSTA.png" alt="COSTA" /></a></li>
<li><a href="OSTA.aspx"><img src="Images/OSTA.png" alt="OSTA" /></a></li>
<li><a href="About.aspx"><img src="Images/PlaceHolder.png" alt="OSTA" /></a></li>
<li><a href="Contact.aspx"><img src="Images/envelope.png" alt="Support" /></a></li>
</ul>
</nav>
</div>
<div class="content">
<asp:ContentPlaceHolder ID="MainContent" runat="server" />
</div>
</div>
</form>
</body>
</html>
/* Wrapping element */
/* Set some basic padding to keep content from hitting the edges */
.body-content {
margin-top: 15px;
padding-left: 15px;
padding-right: 15px;
}
/* Set widths on the form inputs since otherwise they're 100% wide */
input,
select,
textarea {
max-width: 280px;
}
/* Responsive: Portrait tablets and up */
@media screen and (min-width: 768px) {
.body-content {
padding: 0;
}
}
html, body {
height: 100%;
margin: 0;
font-family:'Segoe UI';
}
.navbar {
padding: 0;
background-color: #ffffff !important;
height: 80px;
width: 100%;
align-items: center;
flex-direction: row;
display: flex;
}
h1 {
margin: 0;
}
h1 img {
width: 200px;
height: 70px;
}
.wrapper {
display: flex;
height: 100%;
position: relative;
}
.sidebar {
width: 100px;
height: 1000px;
background-color: #383838;
padding: 15px;
box-sizing: border-box;
font-family: 'Segoe UI';
display: flex;
flex-direction: column;
align-items: center;
}
.sidebar h1 {
margin: 0;
padding: 10px 0;
font-size: 24px;
}
.sidebar h1 img {
width: 250px;
height: 30px;
}
.sidebar h1 a {
text-decoration: none;
color: #f31414;
}
.sidebar h1 a img {
width: 90px;
height: 90px;
}
.sidebar nav ul {
list-style-type: none;
padding: 0;
display: flex;
flex-direction: column;
align-items: center;
}
.sidebar nav ul li {
margin: 10px 0;
}
.sidebar nav ul li img {
width: 80px;
height: 50px;
}
.sidebar nav ul li a {
text-decoration: none;
color: #ffffff;
}
.content {
flex-grow: 1;
box-sizing: border-box;
overflow-y: auto;
position: relative;
}
I believe I was able to get your desired result by simpling adding height: 100vh to .content and .sidebar in the css.
Try it out in the snippet below:
/* Wrapping element */
/* Set some basic padding to keep content from hitting the edges */
.body-content {
margin-top: 15px;
padding-left: 15px;
padding-right: 15px;
}
/* Set widths on the form inputs since otherwise they're 100% wide */
input,
select,
textarea {
max-width: 280px;
}
/* Responsive: Portrait tablets and up */
@media screen and (min-width: 768px) {
.body-content {
padding: 0;
}
}
html,
body {
height: 100%;
margin: 0;
font-family: 'Segoe UI';
}
.navbar {
padding: 0;
background-color: #ffffff !important;
height: 80px;
width: 100%;
align-items: center;
flex-direction: row;
display: flex;
}
h1 {
margin: 0;
}
h1 img {
width: 200px;
height: 70px;
}
.wrapper {
display: flex;
height: 100%;
position: relative;
}
.sidebar {
width: 100px;
height: 100vh;
background-color: #383838;
padding: 15px;
box-sizing: border-box;
font-family: 'Segoe UI';
display: flex;
flex-direction: column;
align-items: center;
}
.sidebar h1 {
margin: 0;
padding: 10px 0;
font-size: 24px;
}
.sidebar h1 img {
width: 250px;
height: 30px;
}
.sidebar h1 a {
text-decoration: none;
color: #f31414;
}
.sidebar h1 a img {
width: 90px;
height: 90px;
}
.sidebar nav ul {
list-style-type: none;
padding: 0;
display: flex;
flex-direction: column;
align-items: center;
}
.sidebar nav ul li {
margin: 10px 0;
}
.sidebar nav ul li img {
width: 80px;
height: 50px;
}
.sidebar nav ul li a {
text-decoration: none;
color: #ffffff;
}
.content {
flex-grow: 1;
box-sizing: border-box;
overflow-y: auto;
position: relative;
height: 100vh;
}
.content p {
width: 200px; /* to give it more scroll */
}
/* Body */
body {
font-family: 'Segoe UI';
background-color: #f7f3eb !important;
}
/* File Information */
.textFields {
padding: 1%;
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 10px;
justify-items: center;
align-items: center;
position: -webkit-sticky;
position: sticky;
top: 0;
background-color: #f7f3eb !important;
z-index: 1000;
}
.textFields p {
text-align: center;
font-size: large;
}
.fileInfoHeader {
justify-content: center;
align-items: center;
}
.fileInfoHeader p {
text-align: center;
font-size: x-large;
padding: 10%;
}
.bottom-line {
border-bottom: 1px solid lightgrey;
}<!DOCTYPE html>
<html>
<body>
<form id="form1" runat="server">
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-dark bg-dark" style="background-color: #ffffff !important;">
<h1><img src="Images/FNF_logo_BIG.png" style="height:70px; width:70px"/></h1>
<h1><img src="Images/DSG_LOGO.png"/></h1>
</nav>
<div class="wrapper">
<div class="sidebar" style="height=100%">
<br />
<h1><a href="Home.aspx"><img src="Images/SADETs.png" alt="SADET"/></a></h1>
<nav>
<ul>
<li><a href="RONSA.aspx"><img src="Images/RONSA.png" alt="RONSA" /></a></li>
<li><a href="COSTA.aspx"><img src="Images/COSTA.png" alt="COSTA" /></a></li>
<li><a href="OSTA.aspx"><img src="Images/OSTA.png" alt="OSTA" /></a></li>
<li><a href="About.aspx"><img src="Images/PlaceHolder.png" alt="OSTA" /></a></li>
<li><a href="Contact.aspx"><img src="Images/envelope.png" alt="Support" /></a></li>
</ul>
</nav>
</div>
<div class="content">
<div class="textFields bottom-line">
<div class="fileInfoHeader">
<p>File Information</p>
</div>
<div>
<div>
<p>File Number</p>
<textarea class="form-control" rows="1" name="OSTAFileNumber" id="OSTAFileNumber" maxlength="49" Runat="Server"></textarea>
</div>
<br>
<div>
<p>Escrow Officer</p>
<textarea class="form-control" rows="1" name="OSTAEscrowOfficer" id="OSTAEscrowOfficer" maxlength="49" Runat="Server"></textarea>
</div>
</div>
<div>
<div>
<p>Flash</p>
<textarea class="form-control" rows="1" name="OSTAFlash" id="OSTAFlash" maxlength="49" Runat="Server"></textarea>
</div>
<br>
<div>
<p>Date Closed</p>
<input class="form-control" type="date" value="" name="OSTADateClosed" id="OSTADateClosed" maxlength="49" Runat="Server">
</div>
</div>
<div>
<div>
<p>Branch</p>
<textarea class="form-control" rows="1" name="OSTABranch" id="OSTABranch" maxlength="49" Runat="Server"></textarea>
</div>
<br>
<div>
<div>
<p>Transaction Type</p>
<select class="form-select" aria-label="Default select example" name="OSTATransactionType" id="OSTATransactionType" Runat="Server">
<option value="1">Residential Sale</option>
<option value="2">Refinance</option>
<option value="3">Other</option>
</select>
</div>
</div>
</div>
<div>
<div style="padding-top: 4%;">
<p>Transaction Amount</p>
<input class="form-control" type="number" step="1.00" min="0" placeholder="$0.00" name="OSTATransactionAmount" id="OSTATransactionAmount" maxlength="49" Runat="Server">
</div>
<br>
<div style="padding-top: 1%;">
<p>Exception Percentage
<a class="d-inline-block" style="padding-right: 0.75%;" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="This is the execpetion percentage score for this file." data-bs-custom-class="custom-tooltip">
<img src="Images/info-circle.png" alt="Information Icon">
</a>
</p>
<div style="padding-right: 35%; padding-left: 35%;">
<asp:TextBox ID="OSTAExceptionPercentage" style="text-align: center;" Width="85px" visible="true" runat="server" placeholder="0.0" MaxLength="6" class="form-control" ReadOnly="true" />
</div>
</div>
</div>
</div>
<p>
Lorem ipsum odor amet, consectetuer adipiscing elit. Aenean ridiculus litora integer integer nascetur quam porta torquent! Aptent montes dictum at consequat elit semper. Vestibulum parturient ornare, sollicitudin nibh turpis purus. Donec fringilla erat facilisi felis fringilla egestas elementum luctus. Libero lectus neque maximus hac torquent velit elementum tempor. Accumsan fermentum ipsum posuere commodo auctor consectetur; gravida inceptos sed. Libero tempus integer eu dapibus sed dictum euismod inceptos. Cubilia posuere ante erat pharetra massa odio, ridiculus enim?
</p><p>
Urna amet vehicula netus per sodales ultricies vel. Et ligula mollis id gravida nascetur! Facilisis magna convallis ex nunc mus efficitur molestie fames. Urna diam convallis velit posuere ad sapien. Pretium vel justo justo nisl euismod aenean! Viverra et sagittis porta vel pharetra eleifend. Sollicitudin lobortis parturient senectus urna eget pulvinar.
</p><p>
Non magnis potenti tristique; curabitur eros massa. Nullam vel non curae nec fermentum justo quis velit. Tempor cubilia elit amet hendrerit commodo dictum facilisis maximus. Integer molestie neque enim efficitur duis. Elementum metus massa est blandit habitasse. Vivamus ipsum lacus nec massa cras lobortis parturient. Enim porta porttitor ad dictum montes. Magnis primis id orci natoque faucibus augue. Pulvinar dignissim vestibulum vulputate non dictumst.
</p><p>
Diam nostra est adipiscing velit suspendisse diam sollicitudin aliquet. Porta bibendum semper magna proin phasellus porttitor cubilia. Bibendum dis primis erat ligula ullamcorper ullamcorper iaculis. Feugiat luctus laoreet est faucibus ut nostra. Id dis orci volutpat dignissim magnis efficitur quisque? Semper eros adipiscing hac eu ullamcorper ornare diam fringilla lacinia. Morbi lobortis diam natoque ridiculus etiam natoque erat.
</p><p>
Hendrerit sollicitudin sodales sapien curae fermentum at id suscipit eleifend. Pretium sodales semper consequat aliquam orci felis vel. Imperdiet enim duis conubia et quisque fusce eu. Tortor sapien lobortis tristique nisi ridiculus auctor libero tortor. Est ante primis ante vitae vehicula habitasse cubilia augue semper. Habitant placerat euismod nulla imperdiet nostra adipiscing molestie lacinia. Odio sollicitudin sollicitudin bibendum curae platea dictumst nibh eu? Laoreet tortor posuere nascetur netus vulputate massa.
</p><p>
Dis rhoncus fames tortor auctor efficitur; habitasse enim odio. Sagittis accumsan sapien ornare placerat vestibulum condimentum. Pharetra phasellus malesuada ridiculus; dis cubilia nisl felis sollicitudin. Maecenas vel id sapien quam netus? Ligula imperdiet libero lectus luctus scelerisque. Maecenas arcu eu vulputate placerat; sollicitudin hac class vestibulum netus. Viverra rutrum vitae inceptos magnis fermentum ex finibus tempor?
</p><p>
Eu non tempor porttitor vivamus ultrices suscipit. Consectetur ultrices taciti augue ut massa maximus. Consectetur sollicitudin rhoncus imperdiet; magnis placerat elementum blandit. Ornare blandit aliquam pellentesque pharetra scelerisque, consectetur pellentesque senectus sit? Rutrum tortor primis dignissim; facilisis nibh sodales. Conubia cras nostra enim tellus auctor non habitant pharetra. Diam tincidunt maximus nec quis, at felis natoque convallis luctus. Eleifend molestie congue a viverra ridiculus, morbi blandit erat. Sapien fringilla duis elit rhoncus libero vulputate, eleifend per. Massa augue velit ex nisi neque.
</p><p>
Eleifend mauris et mollis auctor curabitur penatibus maecenas. Neque feugiat nulla bibendum vivamus proin massa proin dolor. Finibus euismod taciti in tellus malesuada hac curae; aliquam pellentesque. Pretium potenti tortor maximus luctus habitasse rhoncus. Porttitor vel viverra volutpat nostra ac nibh phasellus placerat. Sapien euismod at class, molestie felis fringilla diam lacus potenti.
</p><p>
Lectus senectus quisque nisl ornare dictum orci. Lorem finibus magna blandit eu sagittis penatibus. Magna vitae leo inceptos dis velit rutrum commodo auctor. Feugiat justo class diam rutrum ac vitae interdum elementum. Dis ultricies eget adipiscing quisque gravida sagittis. Ex donec est purus phasellus vitae sollicitudin. Cras integer varius vel dignissim nunc? Proin blandit nullam vestibulum taciti donec sapien?
</p><p>
Mus ex morbi vulputate curae posuere fames. Aliquam sollicitudin ridiculus posuere posuere volutpat. Felis mauris augue suscipit velit parturient? Ut nec fringilla dapibus diam fringilla phasellus rutrum tortor himenaeos. Ullamcorper augue lectus etiam scelerisque enim in. Litora vel id integer natoque platea phasellus elementum. Justo finibus aliquet habitasse risus metus viverra consectetur. Mollis rutrum dapibus tempus in; aliquam velit erat porttitor. Etiam sit laoreet viverra elit pulvinar habitant sagittis rutrum. Congue velit felis malesuada pellentesque justo morbi himenaeos fames?
</p>
</div>
</div>
</form>
</body>
</html>