如何继承min-width和max-width的宽度？

Question

如何使用width和/或min-width继承父级的max-width？

子元素#main_header的宽度必须与父元素#main

的宽度相同

我添加了#main_inner作为中间/辅助元素。

的jsfiddle

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

＆＃13;

＆＃13;

#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
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

您的代码的问题在于您假设min-width和max-width规则会自动影响子元素本身的宽度。 只需将最小宽度规则设置为继承，您就可以继续了

$scope.closeItem = function() { ngDialog.close(); }
$scope.createdItem = function() { // do whatever }

ngDialog.open({
                      template: 'app/confirmation/saveItem.html',
                      scope: $scope,
                      showClose: false
                   });

响应您的修改： 拥有与其父元素宽度完全相同的子元素就像将子元素设置为100％宽度一样简单

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

Answer 2

标题的简单答案＆＃34;如何继承最小宽度和最大宽度的宽度？＆＃34;是：

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

由于中间还有一个辅助容器，你也必须将它设置在那个容器上，然后将width: 100%;添加到孩子身上，它似乎运行良好。

＆＃13;

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

修改

在下面添加了一个jQuery方法：

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

＆＃13;

＆＃13;

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

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;