我在嘗試根據內容調整子菜單。現在它是固定的，可以容納4個子菜單。見'銷售'它擁有4，但在'儀表板'它擁有三個，有一個空的空間。我不希望這個空白的空間在那裏。如何根據內容css調整高度
沒有分配我的標籤類
input[type='radio']:checked + label {
height: 325px;
我試着將它設置爲100％，並且還試圖溢出汽車，但子菜單的高度不會調整的高度。
關於如何動態設置高度的任何想法？
CodePen：https://codepen.io/anon/pen/gwjvvw
您需要設置height: auto;允許高度是內容是什麼提到height.let股利udjust高度。這會導致問題，因爲你的內容高度基本上是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>就像一個筆記，我會刪除img標籤，使用：之前的跨度，並刪除lil_arrow divs並取代：跨越後。然後刪除div.bar並在標籤後使用：。您可能不需要swanky_wrapper__content div - 只需使用嵌套的ul。使得標記更清晰。 –
這是返工的開始。只需添加html，清理Less/Css，並添加圖像URL：https://codepen.io/anon/pen/pEkVBP –
不要根據內容
接過一看codepen但坦率地說，不知道去哪裏找，以確定你的問題。儘管如此，我對你的意思有點困惑 - 默認情況下，一個元素應該擴展以適應其內容，除非另有指示。 – Santi
'height：auto'？ –
@GeoffJames nope它不顯示，如果它是自動的。 –