带有填充屏幕的子div的动态标题？

【问题标题】：Dynamic header with child divs that fill screen?带有填充屏幕的子div的动态标题？
【发布时间】：2016-10-02 12:58:31
【问题描述】：

我已经问过这个问题了，但是方法不对。我应该告诉你们我想要什么，而不是如何解决我的问题......

基本上我想要一个动态的、固定高度的 (150px) 标题，它由一个图像（带 alpha 通道的 PNG）和一个延伸到屏幕边缘的框组成。整个事情也需要50% 透明。

我已经尝试使用 div 来创建拉伸框，将它们和图像放在父 div 中，但从未让它们调整宽度以到达屏幕边缘。

这是一个图表： [---div---][---image---][---div---]

有人有什么想法吗？

【问题讨论】：

标签： html image

【解决方案1】：

#header
{
  position: absolute;
  top: 0px;
  left: 0px;
  height: 150px;
  width: 100%;
  opacity: 0.5;
  background-color: gray;
  display: table;
}

#l
{
  background-color: red;
}

#r
{
  background-color: blue;
}

.headDiv
{
  
  height: 100%;
  width: 50%;
  vertical-align: middle;
  display: table-cell;
}

<head>
  <div id="header">
    <div class="headDiv" id="l"></div>
    <img src="https://upload.wikimedia.org/wikipedia/en/thumb/9/9e/Flag_of_Japan.svg/1280px-Flag_of_Japan.svg.png" width=auto height=150px style="display:block">
    <div class="headDiv" id="r"></div>
  </div>
</head>

<body style="background-color:green; margin-top:160px;">
  Things in the body go here.
</body>

这是工作栏，带有颜色编码的divs 和代表中心的日本国旗。所有功劳都归功于 Marc Audet，他出色的 display: table 填充空间策略。

【讨论】：