JSFiddle

Question

我有以下代码：

<title>Waypoints in directions</title>
<style>
  html, body{
    height: 100%;
    margin: 0px;
    padding: 0px
  }
  #map-canvas{
    height: 90%;
    margin: 0px;
    padding: 0px
  }
  .boxsizingBorder {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
</style>
</head>
<body>
<div id="map-canvas"></div>
<div><input id="navigate" type="button" value="Navigate" onClick="calcRoute()" style="width:100%;height:10%;" /></div>

</body>

我正在尝试使map-canvas div占整个页面的90％，导航按钮占所有页面的10％，但无论我在导航按钮的高度写什么，它都没有改变，
为什么？但是如果将它的高度改为px，就像70px那样会发生变化。

Answer 1

为了使用基于百分比的测量，父元素必须具有定义的高度。目前，您的导航按钮包含在没有设置高度的div中，因此它不知道基于10％高度的基础。如果你给包含div一个高度它将起作用。

<div style="height:200px;"><input id="navigate" type="button" value="Navigate" onClick="calcRoute()" style="width:100%;height:30%;" /></div>

JSFiddle

Answer 2

只需删除包装div

即可

<body>
    <div id="map-canvas"></div>

    <input id="navigate" type="button" value="Navigate" onClick="calcRoute()" style="width:100%;height:10%;" />
</body>

Answer 3

您需要为按钮的父级添加一个高度，以便它可以继承某些内容。您也可以使用

-webkit-appearance: none;
appearance: none;

然后根据需要设置按钮的样式

示例：http://jsfiddle.net/59cpxL3n/4/

调整HTML元素的大小

3 个答案:

JSFiddle