Issue
I have created a very simple dash application, but I cannot get the main div to stretch to the full page height.
Here is the python code
import dash
from dash import html
app = dash.Dash(__name__)
page = html.Div(id='page',
children=[html.H1('hello')],
style={'background-color': 'orange', 'height': '100%', 'width': '100%'},
className='flex-grow-1')
app.layout = html.Div(
page,
className='full-screen-div'
)
app.run_server()
Here is the css code under assets/custom.css
body, html {
height: 100%;
width: 100%;
margin: 0;
}
.full-screen-div {
width: 100vw;
height: 100%;
min-height: 100%;
box-sizing: border-box;
overflow-x: hidden;
overflow-y: hidden;
}
The page looks as shown below - I would like the orange background to stretch to fill the browser window.
I have tried setting height with the viewport height parameter, but that doesn't translate well between screen sizes. I have also tried setting position: fixed
, but that gives some overflow when introducing figures.
Solution
There is an additional <div>
that needs to be expanded, change your first CSS block to include #react-entry-point
:
body, html, #react-entry-point {
height: 100%;
width: 100%;
margin: 0;
}
That white spacing at the top is due to margin
on the <h1>
, if you want to remove that, consider resetting browser styling or add the following:
h1 {
margin: 0;
}
Answered By - 0stone0
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.