javascript - 如何让固定位置的 Div 继承或具有 x px 的最小宽度？没有 jQuery 解决方案

Question

1.我正在尝试获取一个固定位置的 div (#externalPopupHeader) 以继承其父宽度 (#reportsWrap) 的宽度，但没有成功。

2 我还试图让带有冗长内容的#externalPopupHeader div 水平滚动，而滚动条不可见。这是必需的，因为我想使用 javascript 将列标题与下面的内容同步。

#reportsWrap{
 min-width: 1050px;
 overflow: hidden;
 position: relative
}
 #externalPopupHeader{
 width: inherit // Have aslo tried min-width: 1050px, and width: 100%;
 position: fixed;
 top: 0
 overflow-x: scroll // hidden disables the scrolling.
 }



 <div id="reportsWrap">
    <div id="externalPopupHeader">
          <div id="genConfigFieldsWrap">
              <div class="genField">Record No.</div>
              <div class="genField">Serial Number</div>
              <div class="genField">Room Number</div>
              <div class="genField">Codec IP</div>
              <div class="genField">Model</div>
              <div class="genField">Version</div>
              <div class="genField">NTP Status</div>
              <div class="genField">Speaker Track</div>
              <div class="genField">Max RX Kbps</div>
              <div class="genField">Max TX Kbps</div>
              <div class="genField">Default Call Kbps</div>
              <div class="genField">Remote View</div>
              <div class="genField">Voice VLAN</div>
              <div class="genFieldTrans">Transport</div>
              <div class="genField">Olson Zone</div>
              <div class="genField">Time Zone</div>
              <div class="genField">Helpdesk</div>
              <div class="genField">Provisioning</div>
         </div>

    </div>
    <div id="innerReportWrap">
        <div id="genConfigAnchor">
        </div>
    </div>
</div>

Answer 1

你的代码没问题。您的 div 数据太小，无法检查原始行为。

尝试添加更多文本以进行检查。

<div class="genField">NTP Status NTP Status NTP Status NTP Status</div>

然后你会发现它是正确的。

你可以看看这个例子

https://jsfiddle.net/r61t50sb/1/