Phonegap - CSS Flexbox - div填滿頁面的其餘部分

我有一個問題，讓彈性框正確。我已嘗試設置here.。我希望帶有run-map類的div填充頁面的其餘部分，但我不明白。Phonegap - CSS Flexbox - div填滿頁面的其餘部分

body { 
 
    height:100% !important; 
 
} 
 

 
html { 
 
} 
 

 
.box { 
 
\t display: flex; 
 
\t flex-flow: column; 
 
\t justify-content: center; 
 
\t align-content: stretch; 
 
\t align-items: stretch; 
 
} 
 

 
.box div.header { 
 
\t order: 0; 
 
\t flex: 0 1 auto; 
 
\t align-self: auto; 
 
} 
 

 
.box div.run-data { 
 
\t order: 1; 
 
\t flex: 1 1 auto; 
 
\t align-self: auto; 
 
\t background-color: blue; 
 
} 
 

 
.box div.run-map { 
 
\t order: 2; 
 
\t flex: 2 1 auto; 
 
\t align-self: auto; 
 
\t background-color: red; 
 
}

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
     <meta charset="utf-8" /> 
 
     <title>Title</title> 
 
    </head> 
 
    <body> 
 
     <div id="app" class="box"> 
 
      <div class="header"> 
 
      \t \t <table id="header-table"> 
 
      \t \t \t <th onclick="loadContent('main.html')">Home</th> 
 
      \t \t \t <th onclick="loadContent('run.html')">Run</th> 
 
      \t \t \t <th>Statistics</th> 
 
      \t \t \t <th>Settings</th> 
 
      \t \t \t <th>Donate</th> 
 
      \t \t </table> \t 
 
      </div> 
 
      <div id="content" class="content-box"> 
 
      \t <div class="run-data"> 
 
\t \t  <script type="text/javascript">onload_run();</script> 
 
\t \t  <h1><span id="stopwatch">00:00:00</span></h1> 
 
\t \t  <p>Latitude: <span id="latitude"></span></p> 
 
\t \t  <p>Longitude: <span id="longitude"></span></p> 
 
\t \t  <p>Altitude: <span id="altitude"></span></p> 
 
\t \t  <p>Accuracy: <span id="accuracy"></span></p> 
 
\t \t  <p>Altitude Accuracy: <span id="altitude-accuracy"></span></p> 
 
\t \t  <p>Distance: <span id="distance"></span> km</p> 
 
\t \t  <p>Pace: <span id="pace"></span> min/km</p> 
 
\t \t  <input type="button" value="Start" onclick="start();"> 
 
\t \t  <input type="button" value="Stop" onclick="stop();"> 
 
\t \t  <input type="button" value="Reset" onclick="reset();"> 
 
\t \t </div> 
 
\t \t <div class="run-map"> 
 
\t \t  <script type="text/javascript"> 
 
\t \t \t //Load in the Map right at the beginning 
 
\t \t \t Map.initialize(); 
 
\t \t  </script> 
 
\t \t </div> 
 
      </div> 
 
     </div> 
 
    </body> 
 
</html>

我怎樣才能使最後一個div（運行圖）填補了頁面的其餘部分？

來源

2015-04-12 Con

你想讓紅色方塊在藍色方塊的下方或旁邊？下面是紅色框顯示在藍色框右側的示例。

作爲「填充頁面其餘部分的柔性盒子項目」的規則，請確保將height: 100%添加到<html>標記以及容納您要填充頁面其餘部分的項目的容器。

body { 
 
    height: 100%; 
 
    margin: 0; 
 
} 
 
html { 
 
    height: 100%; 
 
} 
 
.box { 
 
    display: flex; 
 
    flex-flow: column; 
 
    justify-content: center; 
 
    align-content: stretch; 
 
    align-items: stretch; 
 
    height: 100%; 
 
} 
 
.box div.header { 
 
    order: 0; 
 
    flex: 0 1 auto; 
 
    align-self: auto; 
 
} 
 
.box div.run-data { 
 
    order: 1; 
 
    flex: 1 1 auto; 
 
    align-self: auto; 
 
    background-color: blue; 
 
} 
 
.content-box { 
 
    height: 100%; 
 
    display: flex; 
 
} 
 
.box div.run-map { 
 
    order: 2; 
 
    flex: 2 1 auto; 
 
    align-self: auto; 
 
    background-color: red; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8" /> 
 
    <title>Title</title> 
 
</head> 
 

 
<body> 
 
    <div id="app" class="box"> 
 
    <div class="header"> 
 
     <table id="header-table"> 
 
     <th onclick="loadContent('main.html')">Home</th> 
 
     <th onclick="loadContent('run.html')">Run</th> 
 
     <th>Statistics</th> 
 
     <th>Settings</th> 
 
     <th>Donate</th> 
 
     </table> 
 
    </div> 
 
    <div id="content" class="content-box"> 
 
     <div class="run-data"> 
 
     <script type="text/javascript"> 
 
      onload_run(); 
 
     </script> 
 
     <h1><span id="stopwatch">00:00:00</span></h1> 
 
     <p>Latitude: <span id="latitude"></span> 
 
     </p> 
 
     <p>Longitude: <span id="longitude"></span> 
 
     </p> 
 
     <p>Altitude: <span id="altitude"></span> 
 
     </p> 
 
     <p>Accuracy: <span id="accuracy"></span> 
 
     </p> 
 
     <p>Altitude Accuracy: <span id="altitude-accuracy"></span> 
 
     </p> 
 
     <p>Distance: <span id="distance"></span> km</p> 
 
     <p>Pace: <span id="pace"></span> min/km</p> 
 
     <input type="button" value="Start" onclick="start();"> 
 
     <input type="button" value="Stop" onclick="stop();"> 
 
     <input type="button" value="Reset" onclick="reset();"> 
 
     </div> 
 
     <div class="run-map"> 
 
     <script type="text/javascript"> 
 
      //Load in the Map right at the beginning 
 
      Map.initialize(); 
 
     </script> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</body> 
 

 
</html>

來源

2015-04-12 19:53:41 ratherblue

Phonegap - CSS Flexbox - div填滿頁面的其餘部分

回答

相關問題