如何繼承最小寬度和最大寬度的寬度？

Question

如何繼承width與家長的min-width和/或max-width ？

子元素#main_header的寬度必須與父元素#main寬度相同

我添加了#main_inner作為中間元素/幫助元素。

jsfiddle

https://jsfiddle.net/p010bx5w/4/

 #main { position:relative; min-width:200px; max-width:300px; background:blue; height:350px; } #main_inner { width:100%; background:red; height:300px; } #main_header { position:fixed; width:inherit; background:yellow } 

 <div id="main"> <div id="main_inner"> <div id="main_header"> hey <div style="text-align:right">right</div> </div> </div> </div> 

Answer 1

標題“如何繼承最小寬度和最大寬度的寬度？”的簡單答案。 是：

min-width: inherit;
max-width: inherit;

由於中間還有一個輔助容器，因此您也必須在其上進行設置，並添加width: 100%; 對於孩子來說，似乎運作良好。

 #main { position: relative; min-width: 200px; max-width: 300px; background: red; } #main_inner { min-width: inherit; max-width: inherit; width: 100%; height: 300px; background: yellow; } #main_header { min-width: inherit; max-width: inherit; width: 100%; position: fixed; background: blue; } 

 <div id="main"> <div id="main_inner"> <div id="main_header">hey</div> </div> </div> 

編輯

在下面添加了jQuery方法：

$(window).on('resize', function() {
  $('#main_header').css('width', $('#main').width());
}).trigger('resize');

 $(window).on('resize', function() { $('#main_header').css('width', $('#main').width()); }).trigger('resize'); 

 #main { position: relative; min-width: 200px; max-width: 300px; background: red; } #main_inner { width: 100%; height: 300px; background: yellow; } #main_header { position: fixed; background: blue; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="main"> <div id="main_inner"> <div id="main_header"> hey <div style="text-align:right">right</div> </div> </div> </div> 

Answer 2

代碼的問題在於，假設最小寬度和最大寬度規則會自動影響子元素本身的寬度。 只需設置最小寬度規則即可繼承，您就可以開始了

#main_header {
  position:fixed;
  min-width:inherit;
  background:blue
}

響應您的編輯：具有與父元素寬度完全相同的子元素，就像將子元素設置為100％寬度一樣簡單

#main_header {
  position:fixed;
  min-width:inherit;
  max-width:inherit;
  width:100%;
  background:blue
}