Question

我正在尝试在另一个div中显示一个div，如果父母的身高大于650px：

  <div class="parent">
       <div class="child>this need to be showed if parent's height is greater than 650px</div>
    </div>

有什么方法可以使用CSS？我问了很多东西。

编辑：还接受CSS以外的其他解决方案，但我想知道是否有可能。

谢谢！

Answer 1

这可以通过使用height()方法的JQuery轻松完成。我为您的.child添加了ID，以便我们可以将document.getElementById分别用于display:block和display:none

尝试以下操作：（只需将父高的值更改为650px以上和650px以下进行测试即可。）

var parent = $(".parent").height();

if (parent>650) {
	document.getElementById("child").style.display = "block";
}

#child {
  display: none;
}

.parent {
  height: 651px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
   <div class="child" id="child">this need to be showed if parent is greater than 650px</div>
</div>

注意：父级的CSS高度纯粹是出于测试目的，以查看此代码是否有效。测试之后，您可以删除该代码，并让父类的自然高度在其中。摘录在代码段之前的括号中。

Answer 2

我知道您要求使用仅使用CSS的方法，但是您的问题带有javascript标记-这样您就可以获得一个javascript解决方案：

HTML：

<div id="parent">
   <div id="child">This needs to be shown if parent has a height greater than 650px</div>
</div>

Javascript：

function checkHeight() {
  var parentHeight = document.getElementById('parent').clientHeight;
  if (parentHeight > 650) {
    document.getElementById('child').style.display = "block";
  } else {
    document.getElementById('child').style.display = "none";
  }
}

Element.clientHeight用于获取元素的高度，包括填充，但不包括水平滚动条的高度，边框或边距。 在MDN文档here

中了解有关此内容的更多信息

每当要检查parent的高度时，请调用函数checkHeight()

更新：如果您使用的是类：See this JSFiddle

Answer 3

一个Javascript解决方案，可以连续监视父级的高度。因此，如果您通过Ajax将任何其他元素插入到父级中，则一旦达到设置的高度限制，就会显示该子级。

const parent = document.getElementsByClassName("parent")[0];
const child = document.getElementsByClassName("child")[0];
document.addEventListener("resize", checkParent);
let lastHeight = 0;
/* 
  The button and #demo are for demonstration purpose only
*/
const demo = document.getElementById("demo");
const button = document.getElementsByTagName("button")[0];
button.onclick = () => demo.style.height = "101px";

function checkParent() {
  const parentHeight = parent.clientHeight;
  /* 
    For the sake of example a height of 100 is used
    This can obviously be set to any desired value
  */
  if (parentHeight >= 100) child.style.display = "block";
}

/* 
  Monitor the height of parent continuously
*/
function checkForChanges() {
  const parentHeight = parent.clientHeight;
  if (parentHeight != lastHeight) {
    checkParent();
    lastHeight = parentHeight;
  }
  setTimeout(checkForChanges, 500);
}

checkForChanges();

.child {
  display: none;
}

<div class="parent">
  <div class="child">this need to be showed if parent's height is greater than 100px</div>
  <!-- demo is only used to demonstrate the functionality -->
  <div id="demo"></div>
  <button>Click me</button>
</div>

如果父级的高度div大于X，则显示该div

3 个答案:

HTML：

Javascript：