Div不会在彼此之下

Question

我之前已经问过这个问题，但之前的问题没有帮助。

我目前有这个

＆＃13;

＆＃13;

body{
    color: white;
    font-family: 'Open Sans', sans-serif;
}

#wrapper{
    margin: 0 auto;
}

#header{
    background-color: #00CACA;
    position: fixed; 
    top: 0; 
    left: 0;
    right: 0;
    width: 100%;
    height: 90vh;
}

#middle-section{
    background-color: #FFAA00;
    position: relative; 
    height: 10vh;

}

#footer{
    background-color: #D0003F;
    position: relative; 

}

＆＃13;

<div id="wrapper">

        <div id="header">
            <p>Header</p>
        </div>

        <div id="middle-section">
            <p>Middle section</p>
        </div>

        <div id="footer">
            <p>Footer</p>
        </div>

    </div>

＆＃13;

＆＃13;

＆＃13;

我的目标是在标题下方设置中间部分，然后在中间部分下方设置页脚。我该怎么做呢？

Answer 1

这是你在找什么？

@import url(https://fonts.googleapis.com/css?family=Open+Sans);

body{
    color: white;
    font-family: 'Open Sans', sans-serif;
}

#wrapper{
    margin: 0 auto;
}

#header{
    background-color: #00CACA;
    width: 100%;
    float: left;
}

#middle-section{
    background-color: #FFAA00;
    width: 100%;
    float: left;

}

#footer{
    background-color: #D0003F;
    width: 100%;
    float: left;
}

    <div id="wrapper">

        <div id="header">
            <p>Header</p>
        </div>

        <div id="middle-section">
            <p>Middle section</p>
        </div>

        <div id="footer">
            <p>Footer</p>
        </div>

    </div>