阻止 div 在导航栏上重叠

Posted 2023-03-06

【中文标题】阻止 div 在导航栏上重叠

【英文标题】：Stop div from overlapping over nav bar

【发布时间】：2021-04-28 14:47:52

【问题描述】：

我有一个 App 容器，它有两个组件，导航栏和内容 div。现在的问题是由于某种原因，当我调整窗口大小时，特别是高度，内容 div 会悄悄地与导航栏重叠。窗口的高度越小，它覆盖的导航栏就越多。

编辑：刚刚意识到当我完全删除内容时，它仍然会这样做？？？就像空无一物仍然在导航栏上。那么是导航栏的高度降低了吗？但是如果是的话，文本仍然是完美放置的，那是怎么回事。导航栏占满的空白怎么办

主布局.js

// Defining styles
const AppContainer = styled.div`
    box-sizing: border-box;
`;

// Defining styles
const Content = styled.div `
    display:flex;
    min-height: 94vh;
    width: 100vw;
`;


const Container = styled.div `
    background-color: #FAFFEB;
    padding: 15px;
    flex-grow: 12;
    
    `;
    
// -------------
// Nav Bar styles
// ------------
[enter image description here][1]
const NavBar = styled.nav `
    background-color: #f06e6c;
    width: 100vw;
    height:6vh;
`;

const NavList = styled.ul `
    padding: 0px 0px;
    list-style: none;
    height:6vh;
    margin: 0px;
    display: flex;
    align-items: center;
    flex-direction: row;
    
`;

const NavItem = styled.li `
    padding: 30px 10px 0px 10px;
    height:6vh;
    font-family: 'Poppins', sans-serif;
    font-size: 12pt;
    font-weight: 600;
    color: #FAFFEB;
    text-align: center;

    
    &:hover 
        background: #ff8987;
        cursor: pointer;
    
    
`;

const Logo = styled.li `
    padding: 10px 10px 0px 10px;
    height:6vh;
    font-family: 'Roboto Slab', serif;
    font-size: 24pt;
    font-weight: 600;
    color: #FAFFEB;
    text-align: center;
    
    &:hover 
        cursor: pointer;
    
`;



function MainLayout(children) 
    return (
        <AppContainer>
            
            <NavBar>
                <NavList>
                    <Logo>Tasks</Logo>
                    <NavItem>Login</NavItem>
                </NavList>
            </NavBar>
    
            <Content> 
                <SideBar /> 
                <Container>
                    children

                </Container>
            </Content>
        </AppContainer>
    )


export default MainLayout

【参考方案1】：

我认为您的问题可能来自“最小高度”属性；这给出了最小高度但不是最大值，所以这可能导致内容 div 在调整大小时变得大于 94vh。

也许更好的方法是使用以下样式：

内容 div = '身高：94%' Nav div = '身高：6%'。

让父 div AppContainer 有样式： '高度：100vh; 宽度：100vw;'

这样子 div 的 Content 和 Nav 将始终与其父级成比例。

【讨论】：

不，没有区别。这很奇怪。因为是的，正如您所说，内容高度由于某种原因正在发生变化，但不是从底部开始。它从顶部？因为喜欢它一点一点地增加，直到它覆盖它上面的导航栏。即使我将高度设置为 90%，它也会从底部裁剪，但仍会爬到导航栏上

哦不，刚刚意识到当我完全删除内容时，它仍然可以吗？？？就像空荡荡的虚无仍然在导航栏上。那么是导航栏的高度降低了吗？但如果是的话，文字还是完美放置的，怎么会这样

nvm，意识到在导航栏上使用 6vh 并不是最聪明的想法，因为它只会越来越小，我不希望我的导航栏变小。所以现在我只使用 px。但我还有其他问题。 ffs。我们坚持ig

Saif，为您的导航栏设置静态宽度是个好主意。恐怕很难从您的描述中想象出了什么问题（也许截图会有所帮助？）。我认为 css 导致它以您意想不到的方式运行。也许尝试尝试：从容器 div 中删除 flex:grow，或者正如 Yasin 所说，删除 'display:flex' 属性，或者修复导航栏的位置（'position:fixed'）或者可能带来 z-index导航栏前进（'z-index：9999'）。