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

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

Существует высота назначен на моем лейбле класса

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

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

Любые идеи о том, как установить высоту динамически?

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

источник

2016-10-14 Will W-Train Gao

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

'height: auto'? –

@GeoffJames нет, это не рендер, если это авто .. –

Вам нужно установить 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>

источник

2016-10-14 18:13:13

Как примечание, я удаляю теги img, используя: before на пролетах и удаляю div div lil_arrow и заменяю: after на промежутках. Затем удалите div.bar и используйте: after на ярлыках. Вам, вероятно, не нужны также swancy_wrapper__content divs - просто используйте вложенную ul. Делает гораздо более чистую разметку. –

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

Dont упомянуть height.let в DIV udjust высоты в соответствии с содержанием

источник

2016-10-14 16:52:06

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

ответ

Смежные вопросы