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>