ASP.Net中TreeView导航与MainContent固定布局问题咨询

Here's your implementation of a fixed, scrollable left TreeView navigation paired with a scrollable main content area using an ASP.NET Master Page. This setup uses Bootstrap's grid system alongside inline CSS to achieve the fixed positioning and scrolling behavior:

<div class="container body-content">
    <div class="row">
        <hr />
        <!-- Fixed Scrollable Left Navigation -->
        <div class="col-md-2" style="overflow-y:scroll; overflow-x:scroll; height:700px; position:fixed;">
            <p style="font-size:20px; color:blue;"> Menu Navigation</p>
            <asp:TreeView ID="TV_Navigation" runat="server" ImageSet="Simple" NodeIndent="10" DataSourceID="SiteMapDataSource1">
                <HoverNodeStyle Font-Underline="True" ForeColor="#DD5555" />
                <NodeStyle Font-Names="Verdana" Font-Size="8pt" ForeColor="Black" HorizontalPadding="0px" NodeSpacing="2px" VerticalPadding="0px"></NodeStyle>
                <ParentNodeStyle Font-Bold="False" />
                <SelectedNodeStyle Font-Underline="True" HorizontalPadding="0px" VerticalPadding="0px" ForeColor="#DD5555" />
            </asp:TreeView>
            <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" ShowStartingNode="false" />
        </div>
        
        <!-- Fixed Scrollable Main Content -->
        <div class="col-md-8" style="overflow-y:scroll; overflow-x:scroll; height:700px; position:fixed; width:80%;">
            <asp:ContentPlaceHolder ID="MainContent" runat="server">
            </asp:ContentPlaceHolder>
        </div>
    </div>
</div>

Key Style Notes: #

• position:fixed: Ensures both the navigation and content areas stay anchored in place as the page scrolls.
• overflow-y:scroll & overflow-x:scroll: Adds scrollbars to each section whenever content exceeds the defined height or width.
• height:700px: Sets a fixed vertical limit to trigger scrolling instead of letting content expand the page.
• Bootstrap's grid classes (col-md-2, col-md-8) handle the initial layout, though the width:80% on the content div might cause overlap on smaller screens—consider removing that to let Bootstrap's grid manage width responsively.

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