Python 破折号 : Adding a scrollbar to a DIV

Question

我希望在 Dash 应用程序的侧边栏面板中添加滚动条 - 请参阅 app举个例子。当内容离开页面时，我可以让滚动条动态显示，但我似乎可以让主页面 div 显示在侧边栏 div 右侧的唯一方法是设置 CSS 样式 "位置”:“固定”。但是，即使滚动条可用，该设置也会将内容固定在适当的位置。

代码如下:

import dash
import dash_bootstrap_components as dbc
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output

app = dash.Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])

# the style arguments for the sidebar. We use position:fixed and a fixed width
SIDEBAR_STYLE = {
    "position": "fixed",
    "top": 0,
    "left": 0,
    "bottom": 0,
    "width": "16rem",
    "padding": "2rem 1rem",
    "background-color": "#f8f9fa",
}

# the styles for the main content position it to the right of the sidebar and
# add some padding.
CONTENT_STYLE = {
    "margin-left": "18rem",
    "margin-right": "2rem",
    "padding": "2rem 1rem",
    "display": "inline-block"
}

sidebar = html.Div(
    [
        html.H2("Sidebar", className="display-4"),
        html.Hr(),
        html.P(
            "A simple sidebar", className="lead"
        ),
    ],
    style=SIDEBAR_STYLE,
)

maindiv = html.Div(
    id="first-div",
    children=[
        # first row
        html.Div([
            html.H2("First Row"),
            html.Hr(),
            html.P(
                "First row stuff", className="lead"
            )
        ]),

        # second row
        html.Div([
            html.H2("Second Row"),
            html.Hr(),
            html.P(
                "Second row stuff", className="lead"
            )
        ])
    ],
    style=CONTENT_STYLE
)

app.layout = html.Div([sidebar, maindiv])

if __name__ == "__main__":
    app.run_server(port=8888)

Answer 1

好的..就像在我的 SIDEBAR_STYLE 字典中添加 "overflow": "scroll" 一样简单。