我希望我的 div 是使用样式组件的父 div 的 100%答案

【问题标题】：I want my div to be 100% of my parent div using styled component我希望我的 div 是使用样式组件的父 div 的 100%
【发布时间】：2020-11-12 05:25:54
【问题描述】：

我希望我的 NavDiv 样式组件是我的 Wrapper 样式组件的 100%，但它没有按预期工作。高度只能使用 px 单位设置，percentage、em、rem 等单位似乎不起作用

const Wrapper = styled.div`
    min-width: 100vw;
    min-height: 100vh;
`

const NavDiv = styled.div`
    border: 1px solid blue;
    position: relative;
    width: 100%; 
    height: 100%;
    font-size: 1rem;
    padding: 4em 2em;
`

应用组件

const App = () => {
        return (
            <Wrapper>
                <Navbar></Navbar>
            </Wrapper>
        )
    }

导航栏组件

const Navbar = props => {
    return (
        <NavDiv>
            
        </NavDiv>
    )
}

【问题讨论】：

标签： javascript html css reactjs styled-components

【解决方案1】：

不是styled-component 的问题，而是css 的问题。属性 height: 100% 将不起作用，除非父级也具有 height 属性并且 min-height 不能解决问题。

.wrapper {
    min-width: 100vw;
    height: 100vh; /* I've used height instead of min-height */
}

.nav-div {
    border: 1px solid blue;
    position: relative;
    width: 100%; 
    height: 100%;
    font-size: 1rem;
    padding: 4em 2em;
}

&lt;div class=wrapper&gt;&lt;div class=nav-div&gt;&lt;/div&gt;&lt;/div&gt;

【讨论】：