Div's将不会在海誓山盟

Question

我明白这已被问过，但是，以前的问题是没有帮助的。

我现在有这个

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; 
 

 
}

<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>

我的目标是让标题下方的中间部分，然后页脚中间部分的下方。我会如何去做这件事？

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>