Как настроить высоту на основе css содержимого

ProgramBox

Как настроить высоту на основе css содержимого

Post author:admin
Запись опубликована:24 августа, 2022
Post category:Вопросы по программированию

#html #css

#HTML #css

Вопрос:

Я пытаюсь настроить подменю на основе содержимого. Прямо сейчас это исправлено и может содержать 4 подменю. См. Раздел «продажа», он содержит 4, однако на «панели инструментов» он содержит три, и есть пустое место. Я не хочу, чтобы это пустое пространство было там.

Моему классу label присвоена высота

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

Я попытался установить его на 100%, а также попробовал автоматическое переполнение, но высота подменю не регулируется.

Есть идеи о том, как динамически устанавливать высоту?

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

1. Взглянул на codepen, но, честно говоря, понятия не имею, где искать, чтобы определить вашу проблему. Я немного смущен тем, что вы имеете в виду, хотя — по умолчанию элемент должен расширяться, чтобы соответствовать его содержимому, если не указано иное.

2. height: auto ?

3. @GeoffJames нет, он не отображается, если он автоматический..

4. @Santi Я немного отредактировал сообщение, надеюсь, оно понятно

5. Я согласен с @Santi — ваш CodePen чрезмерно сложен. height: auto Должно позволять дочерним элементам изменять высоту родительского объекта — но в этом случае вы используете переключатели, неупорядоченные списки, элементы списка и бог знает сколько классов. Попробуйте немного упростить свой код, чтобы мы могли сузить его — это также может немного помочь вам в определении вашей проблемы

Ответ №1:

Вам нужно установить height: auto; , чтобы высота соответствовала содержимому. Что затем вызывает проблемы, потому что высота вашего содержимого по существу равна 0, потому что вы сделали так много плавающих и абсолютных позиций. Тогда вам нужно это исправить.

 @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;
}

   <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
-->

Здесь это делается с помощью более чистого HTML:

 @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;
  }
}

 <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>

1. В качестве примечания я бы удалил теги img, использовал :before в промежутках и удалил разделители lil_arrow и заменил на :after в промежутках. Затем удалите div.bar и используйте:after на ярлыках. Вероятно, вам также не нужны шикарные _wrapper__content divs — просто используйте вложенный ul. Делает разметку намного чище.

2. Вот начало переделки. Просто добавьте html, очистите Less/Css и добавьте URL-адреса изображений: codepen.io/anon/pen/pEkVBP

Ответ №2:

не указывайте высоту.пусть div настраивает высоту в соответствии с содержимым

Метки: Как настроить высоту на основе css содержимого