Announcing Dash Bio 1.0.0 🎉 : a one-stop-shop for bioinformatics and drug development visualizations.

How to make Dash dashboard 100% screensize? style={"height": "100vh"} not working

Dear community,

I am trying to get my dashboard to 100% screensize. I found this article on Github but when I apply it to my dashboard, size remains unchanged (still way too large to fit the display). The picture shows the dashboard at 30% browser size to make it fit).
Screenshot:

My code is


app.layout = dbc.Container([
    dbc.Row([dbc.Col([
        html.H1(id='H1', children=
                'Main Klima (Frankfurt a.M. 1870-2020)')])],
            style = {'textAlign': 'center', 'marginTop': 30, 'marginBottom': 10},
           className="h-10"),
    
    dbc.Row([
        dbc.Col([
            html.Img(src='data:image/png;base64,{}'.format(encoded_image.decode()),
                                                           style={'height':'80%', 'width':'90%'})
            ],
            )
    ],
    className="h-20"),

    dbc.Row([
        dbc.Col([dcc.Graph(id='deltas_div',
                           figure=deltas(df))],
                           xl=6, lg=6, md=6,sm=12, xs=12),                        
                
        dbc.Col([dcc.Graph(id='temp_mins',
                           figure=temperatur_min_trend_monat(df))],
                           xl=6, lg=6, md=6,sm=12, xs=12)
        ],
    className="h-35"),

    dbc.Row([
        dbc.Col([dcc.Graph(id='wuestentage',
                           figure=wuestentage(df))],
                           xl=6, lg=6, md=6,sm=12, xs=12),
                
        dbc.Col([dcc.Graph(id='tropennächte',
                           figure=tropennacht(df))],
                           xl=6, lg=6, md=6,sm=12, xs=12)  
    
        ],
    className="h-35")
        
           
    
],style={"height": "100vh"},
     fluid=True,
) 


if __name__ == '__main__':
    app.run_server()

Does anybody see what´s wrong and should be changed?

Thank you!

I think you can resize the encoded image automatically via style={"maxWidth":"100%","height":"auto"} :

It will look like this:

dbc.Row([
    dbc.Col([
        html.Img(src='data:image/png;base64,{}'.format(encoded_image.decode()),
                                                       style={"maxWidth":"100%","height":"auto"})
        ],
        )
],
className="h-20"),