html - 没有内容高度设置问题的纯 CSS 垂直选项卡
问题描述
我尝试创建一个纯 CSS 垂直标签系统，但似乎无法解决高度问题。
在线的每个 jsFiddle 示例都有相同的问题（在桌面视口上）但没有显示，因为它们没有在选项卡容器之后添加内容。这是一个分叉示例的示例：
https://jsfiddle.net/rL0fwtjd/
/* variables */
body {
font-family: 'Ubuntu', sans-serif;
color: rgba(48, 69, 92, 1);
background: rgba(34, 190, 198, 1);
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
}
body h1 {
font-family: 'Source Sans Pro', sans-serif;
font-weight: 700;
line-height: 1;
letter-spacing: -0.05em;
padding: 1em 0;
font-size: 2em;
color: rgba(254, 255, 250, 1);
text-transform: capitalize;
text-align: center;
}
body h2 {
position: relative;
color: rgba(48, 69, 92, 1);
font-family: 'Source Sans Pro', sans-serif;
font-weight: 700;
padding-bottom: 0.5em;
margin-bottom: 1.5em;
border-bottom: 1px solid rgba(220, 231, 235, 0.5);
}
body .tabordion {
position: relative;
width: 80%;
color: rgba(48, 69, 92, 1);
margin: 0;
}
body .tabordion section {
display: block;
width: 100%;
left: 0;
}
body .tabordion section input[name="sections"] {
left: -9999px;
position: absolute;
top: -9999px;
}
body .tabordion section input[name="sections"]:checked + label {
background: rgba(254, 255, 250, 1);
color: rgba(48, 69, 92, 1);
}
body .tabordion section input[name="sections"]:checked ~ article {
display: block;
}
body .tabordion section label {
background: rgba(220, 231, 235, 0.5);
border-bottom: 1px solid rgba(34, 190, 198, 1);
font-family: 'Source Sans Pro', sans-serif;
font-weight: 700;
color: rgba(254, 255, 250, 1);
cursor: pointer;
display: block;
font-size: 1.2em;
font-weight: bold;
padding: 1em 0.83em;
position: relative;
width: 100%;
z-index: 100;
}
body .tabordion section article {
display: none;
left: 0;
width: 100%;
padding: 1em;
position: relative;
top: 0;
background: rgba(254, 255, 250, 1);
font-family: 'Ubuntu', sans-serif;
font-weight: 300;
line-height: 1.7;
}
body .tabordion section article p {
margin-bottom: 1em;
}
body .tabordion section article:after {
background-color: transparent;
bottom: 0;
content: "";
display: block;
left: -229px;
position: absolute;
top: 0;
width: 220px;
z-index: 1;
}
@media all and (min-width: 768px) {
body .tabordion {
width: 80%;
color: rgba(48, 69, 92, 1);
}
body .tabordion section label {
background: rgba(220, 231, 235, 0.5);
border-left: 1px solid rgba(34, 190, 198, 1);
padding: 1em 2.5%;
width: 20%;
}
body .tabordion section article {
position: absolute;
width: 70%;
left: 26.5%;
}
}<h1>Responsive CSS-only Vertical Tabs</h1>
<div class="tabordion">
<section id="section1">
<input type="radio" name="sections" id="option1" checked>
<label for="option1">Heisenberg</label>
<article>
<h2>Heisenberg</h2>
<p>Stop. Stop! You keep saying that word - danger... danger! No and I have never used that word. I said things were complicated. And then you flew off the handle!</p><p>Gus is gonna make his move. I don't know when, I don't know where or how. All I know is it's gonna happen. Powerless to stop him.</p><p>I have been waiting. I've been waiting all day. Waiting for Gus to send one of his men to kill me. And it's you. Who do you know, who's okay with using children, Jesse? Who do you know... who's allowed children to be murdered... hmm? Gus! He has, he has been ten steps ahead of me at every turn. And now, the one thing that he needed to finally get rid of me is your consent and boy he's got that now. He's got it. And not only does he have that, but he manipulated you into pulling the trigger for him.</p><p>No! You don't even believe that! Gus has cameras everywhere, please. Listen to yourself! No, he has known everything, all along. Where were you today? In the lab? And you don't think it's possible that Tyrus lifted the cigarette out of your locker? Come on! Don't you see? You are the last piece of the puzzle. You are everything that he's wanted.
</p>
</article>
</section>
<section id="section2">
<input type="radio" name="sections" id="option2">
<label for="option2">Jesse Pinkman</label>
<article>
<h2>Jesse Pinkman</h2>
<p>Four pounds... foooour pounds as if two pounds wasn't bad enough. we're talking two three hundred boxes of sinus pills there ain't that many Smurfs in the world. So no sudo? So you do have a plan! Yeah, Mr. White! Yeah, science! </p>
<p>Yo... it's appointment only! Jeez, you look like... Lex Luthor. I got two dudes turned into raspberry slushy and flushed down my toilet. I can't even take a proper dump in there. I mean the whole damn house has gotta be haunted by now. </p>
<p>You didn't actually see Tuco? You got this money from Tuco? Tuco gave you this is what you're saying? You made a deal? How... why would you make a deal with that scumbag? You see what he did to me? No way man, okay, no understanding! Without even talking to me, you told this... insane ass-clown, dead-eyed killer, that uh... that we would give him two pounds a week?</p>
<p>Don't talk to me about hours, what about sudo, man? How are we gonna get that? You think the meth fairy is gonna just bring it to us? God it takes me a week to get this stuff. I'm driving all the way up to Las Cruces, two hundred miles each way to meet up with my Smurfs. The dudes who go to the drug stores and get a couple boxes at a time and then sell 'em to me. And that's maybe only good for, like a half pound worth. See that's the bottle neck in your brilliant business plan. Of course you would've known that if you would've just asked me. </p>
</article>
</section>
<section id="section3">
<input type="radio" name="sections" id="option3">
<label for="option3">Skyler White</label>
<article>
<h2>Skyler White</h2>
<p>
I would greatly appreciate it if you would just, help me out here. Um, he's fine. No, absolutely not and I mean to keep it that way, so. Six-hundred and seventeen thousand dollars written out to me. Uh... what is this? Well, and why is that? It feels wrong. Uh huh. Well, um... Ted, the whole reason we're in this mess is because you had me cooking your books. So, when did wrong suddenly become a problem for you? </p>
<p>No, Ted, this is the big mistake right here. You owe the federal government six-hundred and seventeen thousand dollars. If you do not pay them, they will come after you, and then they will come after me. And if they audit my business, find out that Walt and I paid for it with close to a million dollars in untaxed gambling winnings. We will go to prison, where you will already be. Do you understand? Oh my god, how are you not following me here?</p>
</article>
</section>
<section id="section4">
<input type="radio" name="sections" id="option4">
<label for="option4">Saul Goodman</label>
<article>
<h2>Saul Goodman</h2>
<p>Hello. Welcome. What a pleasure it is to have you. Just gonna call you Skyler if that's okay. It's a lovely name. It reminds me of the big, beautful sky. Walter always told me how lucky he was, prior to recent unfortunate events. Clearly his taste in women is the same as his taste in lawyers: only the very best with just the right amount of dirty.</p>
<p>Walter, I'm your lawyer. Anything you say to me is totally privileged. I'm not in the shakedown racket. I'm a lawyer. Even drug dealers need lawyers, right? Especially drug dealers.</p>
<p>No shit! Right now you're Fredo. But, y'know, with some sound advice and proper introductions, who knows? I'll tell you one thing: you've got the right product. Anything that gets the DEA's panties in this big a bunch, you're onto something special. And I would like to be a small and silent part of it. Food for thought, yeah? So if you want to make more money and keep the money that you make, better call Saul! </p>
</article>
</section>
</div>
<p>No shit! Right now you're Fredo. But, y'know, with some sound advice and proper introductions, who knows? I'll tell you one thing: you've got the right product. Anything that gets the DEA's panties in this big a bunch, you're onto something special. And I would like to be a small and silent part of it. Food for thought, yeah? So if you want to make more money and keep the money that you make, better call Saul! </p>有没有办法在不设置（最小）高度的情况下通过这个？
解决方案
如果您在项目中使用 jQuery，只需应用以下代码：
var firstTabHeight = $('.tabordion section:first-child article').outerHeight(); //get the height of the first selected tab
$('.tabordion').height(firstTabHeight); //set the height of the tabs wrapper to be as the height of the first selected tab
//on click get the height of the selected tab and apply it to the tabs wrapper
$('.tabordion section').on("click", function () {
var selectedTabHeight = $('.tabordion section input[name="sections"]:checked ~ article').outerHeight();
$(this).parent().height(selectedTabHeight);
});
您不必在 css 中设置任何固定高度，一切都是动态的。
仅 CSS 解决方案：
.section-triggers {
width:20%;
}
section {
display: flex;
justify-content: space-between;
// label
label {
background: $lightgrey;
border-left:1px solid $blue;
padding: 1em 2.5%;
width: 20%;
left: 0;
position: absolute;
top: 0;
}
// article
article {
width: 70%;
}
}
section:nth-child(2) label {
top: 60px;
}
section:nth-child(3) label {
top: 120px;
}
section:nth-child(4) label {
top: 180px;
}
正如您所看到的，您需要删除“位置：绝对；” 和“文章”元素的左值，您需要<div class="section-triggers"></div>在每个单选输入之前添加一个 div。看看，只有 css：https ://jsfiddle.net/rL0fwtjd/29/
您可能需要在这里和那里进行一些微调，但它确实有效。