如何根据内部另一个div的大小调整div的大小？

Question

我有一个垂直导航＆＃34;滑块＆＃34;现在需要根据用户可用的链接数量动态调整大小。我已经搜遍了所有的搜索结果，但我发现的所有解决方案都无法解决问题。它可能只是我让我的CSS工作的方式。每当我尝试更改高度属性时，整个事情都会变得混乱。我试图在css中完全做到这一点。我知道它看起来应该很简单，我自己也无法弄清楚。

它基本上是：

<div class="slideMenu">
    <ul class="nav">menu items...</ul>
</div>

这是css：

.slideMenu {
  background: #449bb5;
  width: 140px;
  height: 100%;
  padding-right: 40px;
  position: absolute;
  z-index: 3;
  -webkit-box-shadow: -3px 0px 5px 0px rgba(0, 0, 0, 0.2);
  box-shadow: 3px 0px 5px 0px rgba(0, 0, 0, 0.2);
  left: -180px;
  color: #FFFFFF;
  opacity: 100;
  transition: .4s ease-in-out;
}

.slideMenu:not(:hover) {
    transition-delay: .4s;
}

.slideMenu:hover {
  transform: translate3d(160px, 0, 0);
}

.slideMenu .nav {
  position: absolute;
  top: 30%;
  height: auto;
  -webkit-transform: translateY(50%);
  -ms-transform: translateY(50%);
  transform: translateY(-50%);
  font-weight: 400;
}

JSFiddle here

Answer 1

您无需指定高度。在这个例子中，100％表示高度是它的父容器的100％......身体。不是你想要的。把它拿出来。您在此处还有其他问题可以改进，我在下面的代码的注释中标记了这些问题。

body {
  margin: 0;
  font-family: "Helvetica Neue", Helvetica, Arial, "sans-serif" !important;
  font-size: 12px;
}

.slideMenu {
  background: #449bb5;
  width: 140px;
  /* height: 100%; remove this */
  padding-right: 40px;
  position: absolute;
  z-index: 3;
  -webkit-box-shadow: -3px 0px 5px 0px rgba(0, 0, 0, 0.2);
  box-shadow: 3px 0px 5px 0px rgba(0, 0, 0, 0.2);
  left: -180px;
  top: 0;
  color: #FFFFFF;
  opacity: 100;
  transition: .4s ease-in-out;
}

.slideMenu:not(:hover) {
    transition-delay: .4s;
}

.slideMenu:hover/*, .slideMenu:focus*/ {
  transform: translate3d(160px, 0, 0);
}


.slideMenu .nav {
  /*position: absolute; changed to relative */
  position: relative;
  top: 30%;
  /* height: auto; remove. unnecessary */
  /*
  -webkit-transform: translateY(50%);
  -ms-transform: translateY(50%);
  transform: translateY(-50%);
  remove this. it's trying to center your menu */
  font-weight: 400;
}

.slideMenu .nav li {
  padding-bottom: 10px;
  padding-top: 10px;
  list-style-type: none;
}

.slideMenu .nav li a {
  display: block;
  text-decoration: none;
  color: white;
  cursor: pointer;
}

.slideMenu .nav li a:hover {
  color: #aaa;
}

.slideMenuTab {
	background: #449bb5;
	position: relative;
	width: 40px;
	z-index: 3;
	-webkit-box-shadow: -3px 0px 5px 0px rgba(0, 0, 0, 0.2);
	box-shadow: 3px 0px 5px 0px rgba(0, 0, 0, 0.2);
	left: 165px;
	color: #FFFFFF;
	text-align: right;
	padding-right: 8px;
	padding-top: 6px;
	padding-bottom: 3px;
	border-radius: 8px;
	cursor: pointer;
}

<div class="slideMenu">
   <div class="slideMenuTab"><img src="images/hamburger.png"/></div>
    <ul class="nav">
      <li><a data-type="ticketdialogbutton" data-class="PickTicket">Create Pick</a></li>
      <hr>
      <li><a data-type="ticketdialogbutton" data-class="ReturnTicket">Create Return</a></li>
      <hr>
      <li><a data-type="ticketdialogbutton" data-class="AdjustmentTicket">Create Adjustment</a></li>
      <hr>
      <li><a data-type="ticketdialogbutton" data-class="CreateMTRTicket">Create MTR</a></li>
      <hr>
      <li><a data-type="ticketdialogbutton" data-class="ReceiveMTRTicket">Receive MTR</a></li>
      <hr>
      <li><a href="https://ecom.schwarz.com" target="_blank" data-type="ticketdialogbutton">Order Signage</a>       </li>
      <li><a data-type="ticketdialogbutton" data-class="PickTicket">Create Pick</a></li>
      <hr>
      <li><a data-type="ticketdialogbutton" data-class="ReturnTicket">Create Return</a></li>
      <hr>
      <li><a data-type="ticketdialogbutton" data-class="AdjustmentTicket">Create Adjustment</a></li>
      <hr>
      <li><a data-type="ticketdialogbutton" data-class="CreateMTRTicket">Create MTR</a></li>
      <hr>
      <li><a data-type="ticketdialogbutton" data-class="ReceiveMTRTicket">Receive MTR</a></li>
      <hr>
      <li><a href="https://ecom.schwarz.com" target="_blank" data-type="ticketdialogbutton">Order Signage</a>       </li>
      <li><a data-type="ticketdialogbutton" data-class="PickTicket">Create Pick</a></li>
      <hr>
      <li><a data-type="ticketdialogbutton" data-class="ReturnTicket">Create Return</a></li>
      <hr>
      <li><a data-type="ticketdialogbutton" data-class="AdjustmentTicket">Create Adjustment</a></li>
      <hr>
      <li><a data-type="ticketdialogbutton" data-class="CreateMTRTicket">Create MTR</a></li>
      <hr>
      <li><a data-type="ticketdialogbutton" data-class="ReceiveMTRTicket">Receive MTR</a></li>
      <hr>
      <li><a href="https://ecom.schwarz.com" target="_blank" data-type="ticketdialogbutton">Order Signage</a></li>

    </ul>
</div>