如何根据内容

Question

我正在尝试根据内容调整子菜单。现在它已经固定，可以容纳4个子菜单。看到'sale'它拥有4，但是在'dashboard'上它有三个并且有一个空的空间。我不希望这个空的空间在那里。

我的标签类

指定了一个高度

  input[type='radio']:checked + label {
  height: 325px;

我尝试将其设置为100％并尝试溢出自动但子菜单的高度无法调整。

有关如何动态设置高度的任何想法？

CodePen：https://codepen.io/anon/pen/gwjvvw

Answer 1

您需要设置height: auto;以允许高度为内容。这会导致问题，因为您的内容高度基本上为0，因为您已经完成了很多浮动和位置绝对。然后你需要解决这个问题。

＆＃13;

＆＃13;

@import url(http://fonts.googleapis.com/css?family=Roboto:400,700,300);
ul {
  padding: 0;
  margin: 0;
}

li {
  list-style-type: none;
}

input[type='radio'] {
  display: none;
}

label {
  cursor: pointer;
}

::-webkit-scrollbar {
  display: none;
}

body .swanky {
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

body {
  height: 100vh;
  font-weight: 500;
  font-family: "Roboto", sans-serif;

  -webkit-font-smoothing: antialiased;
  font-size: 12px;
}


body .swanky_title__social a {
  position: relative;
  overflow: hidden;
  width: 140px;
  margin-right: 15px;
  text-decoration: none;
  padding: 0px 0px 5px 0px;
  height: 40px;
  border: 2px solid white;
  float: left;
  color: white;
  font-size: 12px;
  font-weight: 400;
  margin-top: 20px;
}
body .swanky_title__social a .slide {
  height: 45px;
  width: 100px;
  float: left;
  position: absolute;
  transform: skew(20deg);
  left: -120px;
  transition-property: left;
  transition-duration: .2s;
  background: white;
}
body .swanky_title__social a .slide .arrow {
  position: absolute;
  right: 31px;
  top: 24px;
  opacity: 0;
  transform: skew(-20deg);
}
body .swanky_title__social a .slide .arrow .stem {
  width: 10px;
  height: 2px;
  background: #858490;
}
body .swanky_title__social a .slide .arrow .point {
  width: 6px;
  height: 6px;
  border-right: 2px solid #858490;
  top: -3px;
  right: 1px;
  position: absolute;
  transform: rotate(45deg);
  border-top: 2px solid #858490;
}
body .swanky_title__social a img {
  width: 16px;
  margin-left: 10px;
  position: relative;
  margin-right: 8px;
  transition-property: margin-left;
  transition-duration: .1s;
  margin-top: 10px;
  top: 4px;
}
body .swanky_title__social a:hover > .slide {
  left: -70px;
  transition-property: left;
  transition-duration: .1s;
}
body .swanky_title__social a:hover > img {
  margin-left: 40px;
  transition-property: margin-left;
  transition-duration: .1s;
}
body .swanky_title__social a:hover > .slide .arrow {
  right: 11px;
  opacity: 1;
  transition-property: right,opacity;
  transition-delay: .07s;
  transition-duration: .2s;
}
body .swanky .intro {
  float: right;
  color: white;
  width: 370px;
  top: 50px;
  position: relative;
}
body .swanky .intro h1 {
  text-shadow: 0px 2px rgba(0, 0, 0, 0.26);
}
body .swanky .intro p {
  line-height: 20px;
  text-shadow: 0px 1px rgba(0, 0, 0, 0.26);
}
body .swanky_wrapper {
  width: 225px;
  height: auto;
  overflow: hidden;
  border-radius: 4px;
  background: #2c2e2f;
}
body .swanky_wrapper label {
  /* padding: 25px; */
  float: left;
  height: 72px;
  border-bottom: 1px solid #313437;
  position: relative;
  width: 100%;
  color: #eff4fa;
  transition: text-indent .15s, height .3s;
  box-sizing: border-box;
}
body .swanky_wrapper label img {
  margin-right: 10px;
  position: relative;
  top: 2px;
  width: 16px;
  margin-left: 25px;
  margin-top: 25px;
}
body .swanky_wrapper label span {
  position: relative;
  top: -3px;
}
body .swanky_wrapper label:hover {
  background: #212e41;
  border-bottom: 1px solid #313437;
  text-indent: 4px;
}
body .swanky_wrapper label:hover .bar {
  width: 100%;
}
body .swanky_wrapper label .bar {
  width: 0px;
  transition: width .15s;
  height: 2px;
  position: absolute;
  display: block;
  background: #355789;
  bottom: 0;
  left: 0;
}
body .swanky_wrapper label .lil_arrow {
  width: 5px;
  height: 5px;
  -webkit-transition: transform 0.8s;
  transition: transform 0.8s;
  -webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  border-top: 2px solid white;
  border-right: 2px solid white;
  float: right;
  position: relative;
  top: 6px;
  right: 2px;
  transform: rotate(45deg);
  margin-right:25px;
  margin-top:25px;
}
body .swanky_wrapper__content {
  /*position: absolute;*/
  display: none;
  overflow: hidden;
  left: 0;
  width: 100%;
  margin-top: 25px;
}
body .swanky_wrapper__content li {
  width: 100%;
  opacity: 0;
  left: -100%;
  background: #313437;
  padding: 25px 0px;
  text-indent: 25px;
  box-shadow: 0px 0px #126CA1  inset;
  transition: box-shadow .3s,text-indent .3s;
  position: relative;
}
body .swanky_wrapper__content li:hover {
  background: #313437;
  box-shadow: 3px 0px #126CA1  inset;
  transition: box-shadow .3s linear,text-indent .3s linear;
  text-indent: 31px;
}
body .swanky_wrapper__content .clear {
  clear: both;
}

input[type='radio']:checked + label .swanky_wrapper__content {
  display: block;
  top: 68px;
  border-bottom: 1px solid #313437;
}

input[type="radio"]:checked + label > .lil_arrow {
  -webkit-transition: -webkit-transform 0.8s;
  transition: transform 0.8s;
  -webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  -webkit-transform: rotate(135deg);
  -ms-transform: rotate(135deg);
  transform: rotate(135deg);
  border-top: 2px solid #14a3f9;
  border-right: 2px solid #14a3f9;
}

input[type='radio']:checked + label {
  height: auto;
  background: #212e41;
  text-indent: 4px;
  transition-property: height;
  transition-duration: .6s;
  -webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

input[type='radio']:checked + label .bar {
  width: 0;
}

input[type='radio']:checked + label li:nth-of-type(1) {
  animation: in 0.15s 0.575s forwards;
  -webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  -moz-animation: in 0.15s 0.575s forwards;
  -moz-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
input[type='radio']:checked + label li:nth-of-type(2) {
  animation: in 0.15s 0.7s forwards;
  -webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  -moz-animation: in 0.15s 0.7s forwards;
  -moz-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
input[type='radio']:checked + label li:nth-of-type(3) {
  animation: in 0.15s 0.825s forwards;
  -webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  -moz-animation: in 0.15s 0.825s forwards;
  -moz-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
input[type='radio']:checked + label li:nth-of-type(4) {
  animation: in 0.15s 0.95s forwards;
  -webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  -moz-animation: in 0.15s 0.95s forwards;
  -moz-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes in {
  from {
    left: -100%;
    opacity: 0;
  }
  to {
    left: 0;
    opacity: 1;
  }
}
.love {
  position: absolute;
  right: 20px;
  bottom: 0px;
  font-size: 11px;
  font-weight: normal;
}
.love p {
  color: white;
  font-weight: normal;
  font-family: 'Open Sans', sans-serif;
}
.love a {
  color: white;
  font-weight: 700;
  text-decoration: none;
}
.love img {
  position: relative;
  top: 3px;
  margin: 0px 4px;
  width: 10px;
}

.brand {
  position: absolute;
  left: 20px;
  bottom: 14px;
}
.brand img {
  width: 30px;
}

＆＃13;

  <div class="swanky_wrapper">
    <input id="Dashboard" name="radio" type="radio"></input>
    <label for="Dashboard">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/dash.png"/>
      <span>Dashboard</span>
      <div class="lil_arrow"></div>
      <div class="bar"></div>
      <div class="swanky_wrapper__content">
        <ul>
          <li>Tools</li>
          <li>Reports</li>
          <li>Analytics</li>
          
        </ul>
      </div>
    </label>
    <input id="Sales" name="radio" type="radio"></input>
    <label for="Sales">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/del.png"/>
      <span>Sales</span>
      <div class="lil_arrow"></div>
      <div class="bar"></div>
      <div class="swanky_wrapper__content">
        <ul>
          <li>New Sales</li>
          <li>Expired Sales</li>
          <li>Sales Reports</li>
          <li>Deliveries</li>
        </ul>
      </div>
    </label>
    <input id="Messages" name="radio" type="radio"></input>
    <label for="Messages">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/mess.png"/>
      <span>Messages</span>
      <div class="lil_arrow"></div>
      <div class="bar"></div>
      <div class="swanky_wrapper__content">
        <ul>
          <li>Inbox</li>
          <li>Outbox</li>
          <li>Sent</li>
          <li>Archived</li>
        </ul>
      </div>
    </label>
    <input id="Users" name="radio" type="radio"></input>
    <label for="Users">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/users.png"/>
      <span>Users</span>
      <div class="lil_arrow"></div>
      <div class="bar"></div>
      <div class="swanky_wrapper__content">
        <ul>
          <li>New User</li>
          <li>User Groups</li>
          <li>Permissions</li>
          <li>Passwords</li>
        </ul>
      </div>
    </label>
    <input id="Settings" radio="radio" type="radio"></input>
    <label for="Settings">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/set.png"/>
      <span>Settings</span>
      <div class="lil_arrow"></div>
      <div class="swanky_wrapper__content">
        <ul>
          <li>Databases</li>
          <li>Design</li>
          <li>Change User</li>
          <li>Log Out</li>
        </ul>
      </div>
    </label>
  </div>

<!--/ My Footer
-->

＆＃13;

＆＃13;

＆＃13;

这里使用更干净的HTML：

＆＃13;

＆＃13;

@import url(http://fonts.googleapis.com/css?family=Roboto:400,700,300);
ul,
li {
  margin: 0;
  padding: 0;
  list-style: none;
}
ul.swanky_wrapper {
  width: 225px;
  height: auto;
  overflow: hidden;
  border-radius: 4px;
  background: #2c2e2f;
}
ul.swanky_wrapper > li {
  position: relative;
}
ul.swanky_wrapper > li:after {
  content: '';
  display: block;
  position: absolute;
  height: 2px;
  left: -100%;
  transition: .15s all;
  bottom: 0;
  width: 225px;
  z-index: 10;
  background-color: #355789;
}
ul.swanky_wrapper > li:hover:after {
  left: 0;
}

ul.swanky_wrapper input[type='radio'] {
  display: none;
}
ul.swanky_wrapper input[type='radio'] + label {
  padding: 25px;
  height: 72px;
  border-bottom: 1px solid #313437;
  position: relative;
  color: #eff4fa;
  -webkit-transition: text-indent 0.15s, height 0.3s;
  transition: text-indent 0.15s, height 0.3s;
  box-sizing: border-box;
  display: block;
}
ul.swanky_wrapper input[type='radio'] + label:hover {
  background: #212e41;
  border-bottom: 1px solid #313437;
  text-indent: 4px;
}
ul.swanky_wrapper input[type='radio'] + label:before {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  background-size: cover;
  margin-right: 10px;
  position: relative;
  top: 3px;
}
ul.swanky_wrapper input[type='radio'] + label:after {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  -webkit-transition: transform 0.8s;
  -webkit-transition: -webkit-transform 0.8s;
  transition: -webkit-transform 0.8s;
  transition: transform 0.8s;
  transition: transform 0.8s, -webkit-transform 0.8s;
  -webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  border-top: 2px solid white;
  border-right: 2px solid white;
  position: absolute;
  top: 6px;
  right: 2px;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  margin-right: 25px;
  margin-top: 25px;
}
ul.swanky_wrapper input[type='radio'] + label + ul {
  display: none;
}
ul.swanky_wrapper input[type='radio']:checked + label {
  height: auto;
  background: #212e41;
  text-indent: 4px;
  -webkit-transition-property: height;
  transition-property: height;
  -webkit-transition-duration: .6s;
          transition-duration: .6s;
  -webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
ul.swanky_wrapper input[type='radio']:checked + label:after {
  -webkit-transform: rotate(135deg);
          transform: rotate(135deg);
}
ul.swanky_wrapper input[type='radio']:checked ~ ul {
  display: block;
  top: 68px;
  border-bottom: 1px solid #313437;
}
ul.swanky_wrapper input[type='radio']:checked ~ ul li {
  position: relative;
  -webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
          transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  color: #fff;
}
ul.swanky_wrapper input[type='radio']:checked ~ ul li:nth-of-type(1) {
  -webkit-animation: in 0.15s 0.575s forwards;
          animation: in 0.15s 0.575s forwards;
}
ul.swanky_wrapper input[type='radio']:checked ~ ul li:nth-of-type(2) {
  -webkit-animation: in 0.15s 0.7s forwards;
          animation: in 0.15s 0.7s forwards;
}
ul.swanky_wrapper input[type='radio']:checked ~ ul li:nth-of-type(3) {
  -webkit-animation: in 0.15s 0.825s forwards;
          animation: in 0.15s 0.825s forwards;
}
ul.swanky_wrapper input[type='radio']:checked ~ ul li:nth-of-type(4) {
  -webkit-animation: in 0.15s 0.95s forwards;
          animation: in 0.15s 0.95s forwards;
}
ul.swanky_wrapper ul li {
  width: 100%;
  opacity: 0;
  left: -100%;
  background: #313437;
  padding: 25px 0px;
  text-indent: 25px;
  box-shadow: 0px 0px #126CA1 inset;
  -webkit-transition: box-shadow 0.3s, text-indent 0.3s;
  transition: box-shadow 0.3s, text-indent 0.3s;
  position: relative;
}
ul.swanky_wrapper ul li:hover {
  background: #313437;
  box-shadow: 3px 0px #126CA1 inset;
  -webkit-transition: box-shadow 0.3s linear, text-indent 0.3s linear;
  transition: box-shadow 0.3s linear, text-indent 0.3s linear;
  text-indent: 31px;
}
ul.swanky_wrapper li:nth-of-type(1) label:before {
  background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/dash.png');
}
ul.swanky_wrapper li:nth-of-type(2) label:before {
  background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/del.png');
}
ul.swanky_wrapper li:nth-of-type(3) label:before {
  background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/mess.png');
}
ul.swanky_wrapper li:nth-of-type(4) label:before {
  background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/users.png');
}
ul.swanky_wrapper li:nth-of-type(5) label:before {
  background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/set.png');
}
body {
  height: 100vh;
  font-weight: 500;
  font-family: "Roboto", sans-serif;
  -webkit-font-smoothing: antialiased;
  font-size: 12px;
}
@-webkit-keyframes in {
  from {
    left: -100%;
    opacity: 0;
  }
  to {
    left: 0;
    opacity: 1;
  }
}
@keyframes in {
  from {
    left: -100%;
    opacity: 0;
  }
  to {
    left: 0;
    opacity: 1;
  }
}

＆＃13;

<ul class="swanky_wrapper">
  <li>
    <input id="Dashboard" name="radio" type="radio" />
    <label for="Dashboard">Dashboard</label>
    <ul>
      <li>Tools</li>
      <li>Reports</li>
      <li>Analytics</li>
    </ul>
  </li>
  <li>
    <input id="Sales" name="radio" type="radio"></input>
    <label for="Sales">Sales</label>
    <ul>
      <li>New Sales</li>
      <li>Expired Sales</li>
      <li>Sales Reports</li>
      <li>Deliveries</li>
    </ul>
  </li>
  <li>
    <input id="Messages" name="radio" type="radio"></input>
    <label for="Messages">Messages</label>
    <ul>
      <li>Inbox</li>
      <li>Outbox</li>
      <li>Sent</li>
      <li>Archived</li>
    </ul>
  </li>
  <li>
    <input id="Users" name="radio" type="radio"></input>
    <label for="Users">Users</label>
    <ul>
      <li>New User</li>
      <li>User Groups</li>
      <li>Permissions</li>
      <li>Passwords</li>
    </ul>
  </li>
  <li>
    <input id="Settings" name="radio" type="radio"></input>
    <label for="Settings">Settings</label>
    <ul>
      <li>Databases</li>
      <li>Design</li>
      <li>Change User</li>
      <li>Log Out</li>
    </ul>
  </li>
</ul>

＆＃13;

＆＃13;

＆＃13;

Answer 2

不要提到height.let div根据内容调整高度