Question

我尝试使用侧边栏和顶部栏创建一个网站（ASP.NET），其中顶部栏有3行，菜单栏，横幅栏和分隔栏。

只有侧边栏有垂直滚动条，而菜鸟栏和分隔栏只能水平放置。仅当悬停和窗口处于特定高度/宽度时，才会显示此滚动条。

我设法做到这一点。但是，我的侧边栏滚动条是INSIDE div重叠自己，我的菜单栏是OUTSIDE div重叠另一个div而我的dividerbar是INSIDE div重叠它自己。

我想要的是使所有滚动条都是div的INSIDE或OUTSIDE。无论如何都要这样做，否则它会像这样卡住？

（对不起审查，徽标是保密的）

这是我的母版页的代码

<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
        <div id="wrapper">
            <div id="sidebar-wrapper">
                <ul class="sidebar-nav">
                    <li>
                        <h1>Module</h1>
                    </li>
                    <li>
                        <br />
                    </li>
                    <li>
                        <asp:ImageButton ID="imgbtnOverallDashboard" runat="server" Height="60px" ImageUrl="Misc/RibbonIcon/OverallDashboard.png" PostBackUrl="~/OverallDashboard.aspx" />
                    </li>
                    <li>
                        <asp:ImageButton ID="imgbtnHull" runat="server" Height="60px" ImageUrl="Misc/RibbonIcon/Hull.png" PostBackUrl="~/M1-Hull/HullDashboard.aspx" />
                    </li>
                    <li>
                        <asp:ImageButton ID="imgbtnTopside" runat="server" Height="60px" ImageUrl="Misc/RibbonIcon/Topside.png" />
                    </li>
                    <li>
                        <asp:ImageButton ID="imgbtnTurret" runat="server" Height="60px" ImageUrl="Misc/RibbonIcon/Turret.png" />
                    </li>
                    <li>
                        <asp:ImageButton ID="imgbtnRiser" runat="server" Height="60px" ImageUrl="Misc/RibbonIcon/Riser.png" />
                    </li>
                    <li>
                        <asp:ImageButton ID="imgbtnMooring" runat="server" Height="60px" ImageUrl="Misc/RibbonIcon/Mooring.png" />
                    </li>
                    <li>
                        <br />
                    </li>
                    <li>
                        <asp:ImageButton ID="imgbtnSelectShip" runat="server" Height="60px" ImageUrl="Misc/RibbonIcon/Dashboard.png" PostBackUrl="SelectStructure.aspx" />
                    </li>
                    <li>
                        <asp:ImageButton ID="imgbtnHome" runat="server" Height="60px" ImageUrl="Misc/RibbonIcon/Dashboard.png" PostBackUrl="LogoutUser.aspx" />
                    </li>
                </ul>
            </div>
            <div>
                <div class="container-fluid">
                    <div class="row">
                        <div class="navbar-fixed-top topbar-nav">
                            <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">

                            </asp:ContentPlaceHolder>
                        </div>
                    </div>
                    <div class="row">
                        <div class="navbar-fixed-top topbar-banner">
                            <asp:ContentPlaceHolder id="ContentPlaceHolder2" runat="server">

                            </asp:ContentPlaceHolder>
                        </div>
                    </div>
                    <div class="row">
                        <div class="navbar-fixed-top topbar-divider">
                            <asp:ContentPlaceHolder id="ContentPlaceHolder3" runat="server">

                            </asp:ContentPlaceHolder>
                        </div>
                    </div>
                </div>
            </div>
            <div id="page-content-wrapper">
                <div class="container-fluid">
                    <div class="row">
                        <div class="page-content">
                            <asp:ContentPlaceHolder id="ContentPlaceHolder4" runat="server">

                            </asp:ContentPlaceHolder>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
</body>

这是我的CSS代码

#wrapper {
    padding-left: 1px;
}
#sidebar-wrapper {
    z-index: 1000;
    position: fixed;
    left: 250px;
    width: 0;
    height: 100%;
    margin-left: -250px;
    overflow-x: hidden;
    overflow-y: hidden;
    background-color: lightgrey;
    border-right: 1px solid rgb(0,177,169);
}
#page-content-wrapper {
    top: 170px;    
    position: absolute
}
.sidebar-nav {
    position: absolute;
    top: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: center
}
.sidebar-nav h1 {
    font-size: 14px
}
.topbar-nav {
    background-color: lightgrey;
    z-index: 1031;
}
.topbar-banner {
    background-color:rgb(235,235,235);
    top: 60px;
    height:75px
}
.topbar-divider {
    background-color:rgb(0,177,169);
    top: 135px;
    height: 35px
}
.topbar-nav,
.topbar-banner,
.topbar-divider {
    left: 1px;
    width: 100%;
    overflow-x: hidden;
    overflow-y: hidden;
    display: block;
    white-space: nowrap;
}
.topbar-nav,
.topbar-banner {
    font-size: 0
}
.topbar-nav:hover,
.topbar-divider:hover {
    overflow-x: auto
}
.page-content {
    white-space: nowrap;
}
@media(min-width: 768px) {
    #wrapper {
        padding-left: 61px
    }

    #sidebar-wrapper {
        width: 61px;
    }

    #sidebar-wrapper:hover {
        overflow-y: auto
    }

    #page-content-wrapper {
        position: relative
    }

    .topbar-nav,
    .topbar-banner,
    .topbar-divider {
        left: 61px
    }
}

我希望我对我的问题和预期目标的解释是清楚的。提前谢谢。

Scrollbar Inside / Outside Div使用CSS或任何可行的方式

0 个答案: