正确设置weatherwidget.io天气组件尺寸 实现填满父DIV高度

不需要自行开发天气组件，通过样式和简单脚本调整即可实现组件填满父DIV的效果，具体操作如下：

• 首先调整父容器及子元素样式，在你的全局CSS中添加如下代码：

.weatherdiv {
  /* 按需设置父容器高度，固定值或百分比均可，使用百分比需确保所有上级父元素都有明确高度设置 */
  height: 300px;
  width: 100%;
  display: flex;
}
/* 覆盖组件渲染生成的iframe默认样式，强制撑满父容器 */
.weatherdiv iframe {
  width: 100% !important;
  height: 100% !important;
  border: 0;
  margin: 0;
  padding: 0;
}

• 若样式调整后仍未生效，可添加脚本在组件加载完成后动态适配高度，代码如下：

window.onload = function() {
  const weatherWrap = document.querySelector('.weatherdiv');
  const weatherFrame = weatherWrap?.querySelector('iframe');
  if (weatherWrap && weatherFrame) {
    weatherFrame.style.height = `${weatherWrap.offsetHeight}px`;
  }
}

• 视觉兼容优化：如果组件内部存在固定内边距，可将组件的data-basecolor参数值设置为和父DIV的背景色完全一致，视觉上也能达到填满容器的效果。

内容的提问来源于stack exchange，提问作者Philip König