Вертикальные вкладки только для css без заданной высоты содержимого

Question

Я пытался создать систему вертикальных вкладок только для 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>

Есть ли способ обойти это без установки (min-) высоты?

Answer 1

Если вы используете 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 Only:

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

Как вы можете видеть среди прочего, вам нужно убрать 'position: absolute;' и левое значение от элемента article, и вам нужно добавить div <div class="section-triggers"></div> перед каждым радиовходом. Посмотрите, только css: https://jsfiddle.net/rL0fwtjd/29/

Возможно, вам придется выполнить тонкую настройку здесь и там, но это работает.