[英]Push elements down to fill up remaining vertical space
quick rundown of code before I ask question (Im using Material UI in react)在我提问之前快速浏览代码(我在反应中使用 Material UI)
this is a container that should just hold chat messages这是一个应该只保存聊天消息的容器
const ChatContainer = ({ chatMessages }) => {
const classes = useStyles();
return (
<Paper className={classes.chatContainer}>
{chatMessages.map((msg) => (
<ChatMessage key={msg.id} author={msg.author} content={msg.content} />
))}
</Paper>
);
};
export default ChatContainer;
this is a component to send things in this case a chat message这是一个发送内容的组件,在这种情况下是聊天消息
const SendInput = ({ label, onSubmit }) => {
const [inputValue, setInputValue] = useState("");
const classes = useStyles();
const handleChange = (e) => setInputValue(e.target.value);
const handleSubmit = (e) => {
e.preventDefault();
onSubmit(inputValue);
setInputValue("");
};
return (
<form onSubmit={(e) => handleSubmit(e)}>
<TextField
label={label}
placeholder={label}
variant="outlined"
value={inputValue}
onChange={handleChange}
fullWidth
InputProps={{
endAdornment: (
<>
<Divider orientation="vertical" className={classes.divider} />
<IconButton type="submit">
<SendIcon color="primary" />
</IconButton>
</>
),
}}
/>
</form>
);
};
export default SendInput;
this is how im rendering them together这就是我将它们渲染在一起的方式
<Box>
<ChatContainer chatMessages={chatMsgs} />
<SendInput label="Send message" onSubmit={handleSubmit} />
</Box
here is what the screen looks like https://gyazo.com/d96744d356ceef81aa06345f0f0c2304这是屏幕的样子https://gyazo.com/d96744d356ceef81aa06345f0f0c2304
what I want is the ChatContainer to fill up the whitespace and push the input to the bottom of the screen.我想要的是 ChatContainer 来填充空白并将输入推送到屏幕底部。 any help would be appreciated thx
任何帮助将不胜感激
There are multiple ways to achieve this.有多种方法可以实现这一目标。 This question has many of them.
这个问题有很多。 I use
flexbox
approach which is given that answer.我使用给出该答案的
flexbox
方法。
Make the height of root item (Box) 100vh to fill all screen, make it flex, and set its direction as column to show child items vertically.使根项(Box)的高度为 100vh 以填满整个屏幕,使其弯曲,并将其方向设置为列以垂直显示子项。
const useStyles = makeStyles({
root: {
display: "flex",
flexDirection: "column",
height: "100vh"
}
});
export default function App() {
const classes = useStyles();
const handleSubmit = console.log;
return (
<Box className={classes.root}>
<ChatContainer chatMessages={chatMsgs} />
<SendInput label="Send message" onSubmit={handleSubmit} />
</Box>
);
}
Make marginTop
property of last item auto
to push it bottom.使最后一项的
marginTop
属性auto
将其推到底部。
const useStyles = makeStyles({
root: {
marginTop: "auto"
}
});
const SendInput = ({ label, onSubmit }) => {
const classes = useStyles();
// removed for simplicity
return (
<form onSubmit={(e) => handleSubmit(e)} className={classes.root}>
{/* removed for simplicity */}
</form>
);
};
View at codesandbox .查看codesandbox 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.