Question

希望你能帮助我。我正在尝试使用可变数量的列表元素创建导航。现在我想根据周围div元素的高度以及div中列表元素的数量自动设置列表元素的高度。有没有办法这样做，或者我只能这样做，只是不给div一个高度值，而是给列表元素一个固定的高度？

希望你能帮助我。

#nav ul{
    margin: 0;
    padding: 0;
    list-style: none;
}

#nav{
    margin-top: 30px;
    width: 19%;
    background-color: red;
    float:left;
    border-top: 1px solid black;
}

#nav ul li{
text-align: center;
width: 100%;
background-color: yellow;
height: 50px;
margin-top: 20px;
line-height: 50px;
border-bottom: 1px solid black;
border-left: 1px solid black;
transform: rotate(20deg);
}

Answer 1

所以基本上你想要的是，如果div是100px高而你在列表中有4个项目，每个项目应该是25px高，如果你有5个项目，那么每个应该是20px高。这是对的吗？

在这种情况下，如果您不想使用javascript，则可以使用flexbox。在这里，javascript仅用于动态添加项目到菜单以展示flexbox行为：

＆＃13;

var menuEl = document.getElementById('menu');

document.getElementById('addMenuItemBtn').onclick = function () {
	var numberOfItems = menuEl.childElementCount;
  // create a new menu item
  var newListElement = document.createElement('li');
  newListElement.appendChild(document.createTextNode('Menu item ' + (numberOfItems + 1)));
  newListElement.setAttribute('class', 'item');
  // append the new item
  menuEl.appendChild(newListElement);
}

document.getElementById('removeMenuItemBtn').onclick = function () {
	var numberOfItems = menuEl.childElementCount;
  if (numberOfItems > 1) {
  	// if there are at least 2 items, remove the last item
    var lastItemIndex = numberOfItems - 1;
    var lastItem = menuEl.children[lastItemIndex];
    lastItem.remove();
  }
}

＆＃13;

.container {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 320px;
  height: 240px; /* enough for 6 items with a height of 40px */
  background-color: #DDD;
  display: flex;
  flex-direction: column;
}
.item {
  width: 100%;
  margin: 5px;
  padding: 5px;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 30px;
}

＆＃13;

<ul class="container" id="menu">
  <li class="item">Menu item 1</li>
  <li class="item">Menu item 2</li>
</ul>
<input type="button" value="Add menu item" id="addMenuItemBtn">
<input type="button" value="Remove menu item" id="removeMenuItemBtn">

＆＃13;

由于容器高240px且物品的最小高度为40px（柔性基础：30px +边距：5px），因此有足够的空间容纳6个项目。如果添加的项目超过6个，则额外的元素将会溢出。

您可以在css-tricks.com上的this article中阅读有关flexbox的更多信息。您可能希望在我的代码段中更改很多内容，它只是一个概念证明！请记住，一些旧的浏览器不支持它，或支持它遗留语法。

Answer 2

你可以使用下面的代码，它肯定会起作用

＆＃13;

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<div id="change" style="height:200px;border:1px solid black">
<ul>
<li>HI</li>
<li>Hello</li>
<li>Bye</li>
<li>Byesdfsd</li>
<li>sdfsd</li>
<li>sdfsd</li>
</ul>
</div>
<script>
var height=document.getElementById("change").style.height;
height=height.replace("px","");
var lis=document.getElementsByTagName("li");
for(var i=0;i<lis.length;i++){
	lis[i].style.height=(parseInt(height))/(parseInt(lis.length))+"px";
	console.log("getting height "+lis[i].style.height);
}
</script>
</body>
</html>

＆＃13;

因此，您可以在类或内联样式中给出div的高度，但是您必须在js部分中相应地更改代码以获取div的高度。
我有li标签然后根据他们的号码我将封闭div的高度除以列表标签的数量

根据div高度设置<li>的高度

2 个答案: