Question

我有一些标签内容。这一切都很美妙，除了我需要它推动＆＃39;当我的页面的高度超过它所包含的页面的高度时，我的页面会被删除。

单击选项卡3时，您可以看到问题here。如果没有我需要更改我网站的其他布局，是否有某种简单的解决方法？我可以通过在选项卡式内容所在的页面中添加
语句来使其工作，但这实际上并不是一个可行的解决方案。

这是显示标签内容的html。注意＆＃34; br＆＃34;声明因此标签1和标签2的内容与我的其余部分不重叠。

<ul class="tabs">
            <li>
              <input type="radio" checked name="tabs" id="tab1">
              <label for="tab1">tab 1</label>
              <div id="tab-content1" class="tab-content animated fadeIn">
               This is ok
              </div>
            </li>
            <li>
              <input type="radio" name="tabs" id="tab2">
              <label for="tab2">tab 2</label>
              <div id="tab-content2" class="tab-content animated fadeIn">
                    This is ok too.
              </div>
            </li>
            <li>
              <input type="radio" name="tabs" id="tab3">
              <label for="tab3">tab 3</label>
              <div id="tab-content3" class="tab-content animated fadeIn">
                "This isn't ok :( But I must explain to you how all this mistaken idea of     denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resultant pleasure?"
              </div>
            </li>
        </ul>


<br>
<br>
<br>
<br>
<br>
<br>

这是css：

.tabs input[type=radio] {
    position: absolute;
    top: -9999px;
    left: -9999px;
}
.tabs {
  width: 650px;
  float: none;
  list-style: none;
  position: relative;
  padding: 0;
  margin: 75px auto;
  background-color: grey;
}
.tabs li{
  float: left;
}
.tabs label {
    display: block;
    padding: 10px 20px;
    border-radius: 2px 2px 0 0;
    color: #08C;
    font-size: 24px;
    font-weight: normal;
    font-family: 'Roboto', helveti;
    background: grey;
    cursor: pointer;
    position: relative;
    top: 3px;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
.tabs label:hover {
  background: rgba(255,255,255,0.5);
  top: 0;
}

[id^=tab]:checked + label {
  background: #08C;
  color: white;
  top: 0;
}

[id^=tab]:checked ~ [id^=tab-content] {
    display: block;
}
.tab-content{
 /* z-index: 2;*/
  display: none;
  text-align: left;
  width: 100%;
  font-size: 20px;
  line-height: 140%;
  padding-top: 10px;
  background: #08C;
  padding: 15px;
  color: black;
  position: absolute;
  top: 53px;
  left: 0;
  box-sizing: border-box;
  -webkit-animation-duration: 0.5s;
  -o-animation-duration: 0.5s;
  -moz-animation-duration: 0.5s;
  animation-duration: 0.5s;
}

Answer 1

您可以将overflow:hidden设置为.tabs。

示例：

.tabs {
  width: 650px;
  float: none;
  list-style: none;
  position: relative;
  padding: 0;
  margin: 75px auto;
  background-color: grey;
  overflow:hidden;
}

Answer 2

高度需要px才是有效规则。但是，您不希望在这样的事情上对高度进行硬编码。

#tab_container {
  background: red;
  overflow: auto;
  height: 500;
}

如何将标签内容添加到＆＃39;推送＆＃39;其他页面内容而不是覆盖？

2 个答案: