一个div宽满屏高30px 怎么设置另一个div使其充满剩余的屏幕，并在任意屏幕都可以实现

要使第二个 `<div>` 充满剩余的屏幕高度，并且在任意屏幕上都实现，可以使用CSS中的Flexbox布局。

HTML代码示例：

<div class="container">
  <div class="header"></div>
  <div class="content"></div>
</div>

CSS代码示例：

.container {
  display: flex;
  flex-direction: column;
  height: 100vh; /* 使用视口高度作为容器的高度 */
}

.header {
  height: 30px;
  background-color: #f9f9f9;
}

.content {
  flex-grow: 1; /* 填充剩余的空间 */
  background-color: #ccc;
}

在上面的代码中，我们使用了Flexbox布局来实现两个 `<div>` 的自适应高度。

首先，将容器 `<div>` 的高度设置为视口高度（`100vh`），这样容器将占满整个屏幕的高度。

然后，通过设置容器的 `display` 属性为 `flex`，并将 `flex-direction` 属性设置为 `column`，使内部元素垂直排列。

接下来，设置头部 `<div>` 的高度为 `30px`，即固定的高度。

最后，通过设置内容 `<div>` 的 `flex-grow` 属性为 `1`，使其填充剩余的空间。

这样，第二个 `<div>` 将会自动填充剩余的屏幕高度，并且在任意屏幕上都实现。你可以根据需要自定义其他样式属性。