Question

我有一个问题，正确的弹性框。我尝试了设置here.。我希望运行映射类的div填满页面的其余部分，但我只是不明白。

＆＃13;

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

＆＃13;

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

＆＃13;

如何让最后一个div（run-map）填满页面的其余部分？

Answer 1

您想要红色框位于蓝色框下方或旁边吗？这是一个示例，红色框显示在蓝色框的右侧。

作为填充页面其余部分的＆＃34;弹性框项目的规则＆＃34;，请务必将height: 100%添加到<html>标记以及包含该项目的容器想要填满页面的其余部分。

＆＃13;

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

＆＃13;

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

＆＃13;

Phonegap - CSS Flexbox - div填充页面的其余部分

1 个答案: