Я работаю над созданием более доступных веб-страниц.Я сталкиваюсь с проблемой, когда, когда я делаю свою страницу шире, элементы, кажется, перемещаются дальше вниз по экрану.Я считаю, что это потому, что я устанавливаю верхнюю маржу на основе% не фиксированной.Я не совсем уверен, почему высота будет увеличиваться, поскольку экран становится шире.Установлены ли высота и ширина в фиксированном соотношении при использовании flexGrow?
Я использую material-ui с этими переопределениями стилей:
const styles = theme => ({
root : {
flexGrow: 1,
height: '100%',
width: '100%',
display: 'flex',
justifyContent: 'center',
backgroundColor: 'green'
},
form: {
backgroundColor: 'grey',
width: '75%',
display: 'flex',
flexDirection: 'column',
marginTop: '40%',
marginBottom: '50%',
padding: 20,
paddingTop: 35,
minHeight: 200,
},
})
Вот элемент формы, с которым я работаю:
<div className={classes.root}>
<form className={classes.form} onSubmit={this.login}>
<Typography component="h2" variant="headline">Login</Typography>
</form>
</div>
Я ожидаю, что высота формы останется неизменной при увеличении ширины, но это не тот результат, который я вижу.