CODEWITHSUNDEEP
csshtmlcordovaflexbox
Greeneco
Greeneco

Reputation: 741

Phonegap - CSS Flexbox - div fill up rest of page

I have a problem by getting flex boxes right. I have tried the settings here.. I want that the div with the run-map class fills up the rest of the page, but I just do not get it.

body {
    height:100% !important;
}

html {
}

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

.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;
}

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

How can I make the last div (run-map) fill up the rest of the page?

Upvotes: 0

Views: 210

Answers (1)

ratherblue
ratherblue

Reputation: 2108

Do you want the red box to be below or next to the blue box? Here is an example with the red box showing to the right of the blue box.

As a rule for "flex box items that fill the rest of the page", make sure to add height: 100% to the <html> tag AND the container that holds the item you want to fill up the rest of the page. 

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>

Upvotes: 1

Related Questions