内容框响应高度

Question

问题

我在获取响应式内容框的高度以垂直填充屏幕时遇到问题。包括宽度在内的所有内容都可以在 Dev Tools 中调整大小，但是当我在 CSS 代码中调整内容框高度时，我只能以像素为单位输入静态高度（下面的代码中为 483）。当我尝试将高度设置为 100% 时，内容框中的 google 地图消失了。当我手动调整内容框 contenta 高度时，地图会很好地调整大小，这样似乎可以正常工作。我的元标记为 <meta content="width=device-width, height=device-height, initial-scale=1.0" charset="utf-8">

搜索其他问题未找到任何解决方案。

问题

我是否缺少允许响应式内容框垂直填充的编码？

working test page

CSS

 body {
  font-family: Arial, Helvetica, sans-serif;
  width: 99%;
  height:100%;
  background-color: #52669c;
}

#map {
  width:100%;
  height:100%;
  border-radius: 15px;
}

#contenta {
  float: left;
  background: #0099ff;
  width: 95%;
  height: 483px;
}

#rightcolumn {
  background: #FFFFFF;
  width: 2%;
  float: left;
}

Answer 1

在您的 html 中使用此模板以获得全宽和全高

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="https://saltwx.com/css/responsive.css">
  <title>My website</title>
  <!--
  rest of your <head>
  -->
</head>
<body>
<div class="page-wrapper">
  <!--
  rest of your <body>
  -->
</div>
</body>
</html>

用这个css

html, body, .page-wrapper {
  margin: 0;
  box-sizing: border-box;
}
html, body {
  height: 100%;
}
.page-wrapper {
  min-height: 100%;
}

内容框响应高度

content box responsive height

css

responsive-design