Question

我有一个固定高度的祖父母div（直到css媒体查询另有决定）。用户可以输入高度的父div（主要是百分比值，在极少数情况下px值）子div是用户可以输入百分比和px值的地方。

我尝试完成的任务：

如果用户未定义父div的值，则所有子div都需要遵循其自然内容高度。
如果用户已为父div定义了一个值，并且没有为子项定义值，则所有子div应该平均分配。

1和2被覆盖。

现在我试图围绕以下事项：

如果为父div输入了值，则除了输入值的子div之外，所有子div应该平均分配。应该尊重这个价值。

我现在得到了以下内容：

http://jsfiddle.net/andyderuyter/qepqdmer/

$('.child').each(function() {

  var aantalDivs = $(".child").length;
  var parentHeight = $(this).parent().height();
  var childNewHeight = parentHeight / aantalDivs;
  var hasHeight = $(this).height().length;

  if (parentHeight == 700) {
    $('.child').height(childNewHeight);
  }

});

.grandparent {
  height: 700px;
}
.parent {
  height: 100%;
  background-color: black;
  text-align: center;
}
.child-1 {
  background-color: orange;
}
.child-2 {
  background-color: purple;
  color: white;
}
.child-3 {
  background-color: violet;
}
.vertical {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="grandparent">
  <div class="parent">
    <div class="child child-1">
      <div class="vertical">Div 1</div>
    </div>
    <div class="child child-2">
      <div class="vertical">Div 2</div>
    </div>
    <div class="child child-3" style="height:25%;">
      <div class="vertical">Div 3</div>
    </div>
  </div>
</div>

Answer 1

假设目标是为不包含样式标记中设置的直接高度的所有div设置固定高度（因此不包括通过css设置的任何内容），您可以使用jquery属性过滤器，例如[style*=height]：

var childdivs = $('.child'); //get all child elements
var height = childdivs.parent().height();
var withheight = childdivs.filter('[style*=height]'); //get all elements with a style tag containing height
withheight.each(function(){height-=$(this).height();}); //subtract those heights from parentheight
var otherdivs = childdivs.not(withheight); //get all other elements (without height tag)
otherdivs.height(height/otherdivs.length); //set all elements to parentheight/otherelementcount

Fiddle

正如其他人所提到的，如果使用类来操纵自定义高度，可能会更好地处理，即使用户已经这样做了，但上述内容应适用于特定示例。

Answer 2

你应该在设置高度时添加一个类，这样你就可以在div上使用hasClass（）来知道是否设置了高度。

OR

您可以使用attr（'style'）和serch for height。

function isHeightSet(styletext){
  if(typeof styletext != 'undefined'){
    testStyleL = styletext.toLowerCase(),
    testH = testStyleL.indexOf('height'),
    test1 = false;
    if(testH >= 0){
       return true;
    }
  } 
  return false;
}

var test1Style = $('.test1').attr('style'),
test1 = isHeightSet(test1Style);

var test2Style = $('.test2').attr('style');
test2 = isHeightSet(test2Style);

$('.test1').html('Height : '+test1Style + '/' + test1);
$('.test2').html('Height : '+test2Style + '/' + test2);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="test1" style="Height:120px;">Test1</div>
<div class="test2" ><span>Test2</span></div>

Answer 3

我更新了你的jsFiffle http://jsfiddle.net/001z9xvk/2/。您已将高度设置为所有 .child 。如果其中一个 .child 没有将您的高度确定为所有 .child ，那么就更改$('.child').height $(this).height。

检查div是否有样式高度。如果是，请不要调整身高

3 个答案: