ASPX页面textFields容器滚动无法粘顶的原因排查

DevOps 小满

2026-6-14

ASPX网站粘顶容器失效排查求助

我正在开发一个ASPX网站，前期通过HTML/CSS实现的页面中，textFields容器可正常实现滚动粘顶效果。转为ASPX并引入团队成员开发的带侧边导航的SiteMaster后，该容器失去粘顶功能，怀疑是SiteMaster或后端C#代码导致问题，现寻求排查方向。

期望的页面效果：滚动时textFields容器固定在页面顶部

概述

加入SiteMaster之前，ASPX环境中的粘顶功能运行正常，但引入带左侧侧边栏的SiteMaster后功能失效，同时项目新增了队友开发的C#后端代码，因变量较多，希望得到明确的排查方向。

页面内容

OSTA.aspx（目标粘顶容器代码）

注：该容器仅嵌套在主容器内，未嵌套其他容器。页面可正常滚动但容器未按预期粘顶，以下为目标容器相关代码：

<%@ 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">

    <!-- 上方内容 -->

    <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>

    <!-- 下方内容 -->

    </main>
</asp:Content>

OSTA.css（粘顶样式代码）

/* 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;
}

SiteMaster相关代码

SiteMaster页面

<%@ 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">
</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>

SiteMaster.css

/* 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;
}

排查方向

滚动上下文冲突：SiteMaster的.content设置了overflow-y: auto，导致滚动发生在该容器内而非浏览器窗口。position: sticky默认基于视口生效，此时会变成相对于.content粘顶。可以尝试移除.content的overflow-y: auto，让body承担全局滚动；若需保留容器内滚动，需调整.textFields的top值并确保.content高度足够触发滚动。
CSS样式覆盖：通过浏览器开发者工具查看.textFields的计算样式，确认position: sticky是否被其他样式（如父容器的overflow: hidden、position: absolute）覆盖，同时检查z-index是否足够避免被遮挡。
DOM结构变化：对比引入SiteMaster前后的页面渲染DOM结构，查看后端C#代码是否动态修改了.textFields或其父容器的层级、类名，导致粘顶逻辑失效。
Sticky属性生效条件验证：确保.textFields的父容器没有设置overflow: hidden/scroll/auto（除非滚动上下文就是该父容器），且已正确设置top值，元素本身未使用float或absolute定位。

内容的提问来源于stack exchange，提问作者Alexis Newland

ASPX页面textFields容器滚动无法粘顶的原因排查

概述 #

页面内容 #

OSTA.aspx（目标粘顶容器代码） #

OSTA.css（粘顶样式代码） #

SiteMaster相关代码 #

SiteMaster页面 #

SiteMaster.css #

排查方向 #

概述