div 內容不應下推 div 下面
[英]Div content should not push down div below
問題描述
編輯：似乎這個解決方案接近我想要的，但我想要它而不聲明固定或計算的高度。 有什么方法可以實現嗎？
我正在使用 React 和 Chakra-ui 創建一個聊天應用程序。 包含聊天消息的 div 不應將帶有下面輸入的 div 推送到視口之外，並且它應該是可滾動的。 我不知道我做錯了什么，因為 CSS 不是我的強項。 我嘗試給父 div overflow-y: scroll和很多其他的東西，但它只是不起作用。 代碼片段和截圖如下：
<Flex>
<Sidebar items={[]} />
<Flex flexDirection="column" w="100%">
<Header heading={'CHAT'} />
<Flex direction="column" height="100%" width="100%" pt="1rem">
<Flex paddingX="1.5rem" direction="column">
<Message username="User A" body="Test Message 1" time="13:39" />
<Message username="User B" body="Test Message 2" time="13:40" />
<Message username="User A" body="Test Message 1" time="13:39" />
<Message username="User B" body="Test Message 2" time="13:40" />
</Flex>
<Flex marginTop="auto" justify="space-between" width="100%">
<Textarea
resize="none"
color="#fff"
placeholder="Type something..."
borderTopWidth="1px"
borderColor="#6b6b6b"
borderRadius="0px"
_placeholder={{ color: '#6b6b6b' }}
paddingY={2}
paddingX={4}
variant="unstyled"
/>
<Flex
height="100%"
borderTopWidth="1px"
borderColor="#6b6b6b"
px="1rem"
>
<Center>
<IconButton size="sm" isRound icon={<ArrowRightIcon />} />
</Center>
</Flex>
</Flex>
</Flex>
</Flex>
</Flex>
3 個解決方案
解決方案1
1 已采納 2021-03-02 14:17:00
我找到了解決方案。 Chakra-ui 的 Grid 組件（以及一般的 css 網格）是實現我想要實現的最佳方法：
<Grid
height="100vh"
templateRows="repeat(15, 1fr)"
templateColumns="repeat(5, 1fr)"
>
<GridItem rowSpan={15} colSpan={1}>
<Sidebar items={state.rooms[ROOM_NAME]?.participants || []} />
</GridItem>
<GridItem colSpan={4} rowSpan={1}>
<Header heading={ROOM_NAME} />
</GridItem>
<GridItem colSpan={4} rowSpan={13} overflowY="auto">
<Flex direction="column">
<Box paddingX="1.5rem">
<Message username="User A" body="Test Message 1" time="13:39" />
<Message username="User B" body="Test Message 2" time="13:40" />
</Box>
</Flex>
</GridItem>
<GridItem colSpan={4} rowSpan={2}>
<Flex justify="space-between" width="100%">
<Textarea
resize="none"
color="#fff"
placeholder="Type something..."
borderTopWidth="1px"
borderColor="#6b6b6b"
borderRadius="0px"
_placeholder={{ color: '#6b6b6b' }}
paddingY={2}
paddingX={4}
variant="unstyled"
minHeight={null}
/>
<Flex borderTopWidth="1px" borderColor="#6b6b6b" px="1rem">
<Center>
<IconButton size="sm" isRound icon={<ArrowRightIcon />} />
</Center>
</Flex>
</Flex>
</GridItem>
</Grid>
解決方案2
0 2021-03-01 22:36:55
可以在此處找到此問題的一個非常常見的解決方案
只需使用 position:relative 設置父 div。 然后，你想粘在底部的內物品，只需使用 position:absolute 將它粘在物品的底部。
.footer { position: fixed; left: 0; bottom: 0; width: 100%; background-color: lightblue; color: white; text-align: center; }
<,DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width. initial-scale=1"> </head> <body> <h2>Lorem ipsum,</h2> <p>Lorem ipsum dolor sit amet. consectetur adipiscing elit. Integer ne.</p> <h2>Lorem ipsum,</h2> <p>Lorem ipsum dolor sit amet. consectetur adipiscing elit. Integer ne.</p> <h2>Lorem ipsum,</h2> <p>Lorem ipsum dolor sit amet. consectetur adipiscing elit. Integer ne.</p> <h2>Lorem ipsum,</h2> <p>Lorem ipsum dolor sit amet. consectetur adipiscing elit. Integer ne.</p> <div class="footer"> <p>Footer</p> </div> </body> </html>
解決方案3
0 2021-03-01 22:40:15
你應該給overflow-y: scroll; 對於這部分中的 Flex，那么當它達到該元素的最大高度時，它應該滾動而不是向下推
<Flex paddingX="1.5rem" direction="column">
<Message username="User A" body="Test Message 1" time="13:39" />
<Message username="User B" body="Test Message 2" time="13:40" />
<Message username="User A" body="Test Message 1" time="13:39" />
<Message username="User B" body="Test Message 2" time="13:40" />
</Flex>
出現 <div> 應該將圖像向下推
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.