html - 我在 .tab-content div 中有一些内容，但该内容出现在 .tab-content div 之外

Question

我有一个背景为白色的 div .tab-content，所有内容都在这个 div 中，但内容出现在白色背景之外。

你知道如何解决这个问题吗？

http://jsfiddle.net/c3ey5qr1/2/

html:

<div id="container">
<div class="tabs">
<div class="tab">
<input type="radio" id="tab-1" name="tab-group-1" checked>
<label for="tab-1">Tab Two</label>
<div class="tab-content">
   <div class="left">
      <div class="box-left-up">
         <h2>Test</h2>
         <div class="content">
            <a href="#">test</a><br>
            <a href="#">test</a><br>
            <a href="#">test</a>
            <a href="#">test</a>
         </div>
      </div>
   </div>
</div>

CSS:

* {
    font-family: 'Pacifico', cursive;
    margin: 0;
    padding: 0;
}

body{
    background: #F9F9F9;
}

.tabs {
  position: relative;   
  background: green;

}
.tab {
  float: left;

}
.tab label {
  background: #eee; 
  padding: 10px; 
  border: 1px solid #ccc; 
  margin-left: -1px; 
  position: relative;
  left: 1px; 
  top: -30px;
}
.tab [type=radio] {
  display: none;   
}
.tab-content {
  position: absolute;
  top: -1px;
  left: 0;
  background: white;
  right: 0;
  bottom: 0;
  padding: 20px;
  border: 1px solid #ddd; 
  opacity: 0;
}
[type=radio]:checked ~ label {
  background: white;
  border-bottom: 1px solid white;
  z-index: 2;
}
[type=radio]:checked ~ label ~ .tab-content {
  z-index: 1;
  opacity: 1;
}
.clear{
    clear: both;
}

#container {
    margin: 0 auto;
    width: 80%; 
}

#container h1{
    text-align: center;
    padding: 20px;
}

.left{
    float:left;
    width:60%;
    margin-right:5%;
}

Answer 1

您所要做的就是从 .tab-content 中删除 bottom: 0; 希望这会有所帮助。