css - CSS 选项卡式菜单，100% 高度不起作用 - 第 2 部分

Question

在关于此的另一篇文章之后，我想我需要退后一步，看看并做出更清晰的小提琴来展示正在发生的问题。

所以，我在蓝色框中的内容在达到一定高度时与页脚和页面的其余部分重叠，开始时很好，但一旦到达末尾，它就会继续并溢出。溢出：隐藏只是隐藏文本，所以这不是解决方案。

需要发生的是页脚，页面的其余部分需要重新调整，使其始终位于内容的底部。

这是一个更新的小提琴问题http://jsfiddle.net/3ZV3P/1/

代码

<div class="cont-wrapper">
<ul class="tabs">
    <li>
      <input type="radio" checked name="tabs" id="tab2">
      <label for="tab2"><h2>TEST1</h2><br>
     TEST TEXT<br>
      </label>
      <div id="tab-content2" class="tab-content animated fadeIn">

      <div id="further-left-tech-info" >
        TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT    GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERETEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE
        </div>
            <div id="further-right" >
                <div class="blue-box cta">
                        <p>TEXT IN HERE </p>
                    <a href="http://www.google.co.uk"></a> 
                    </div>
            </div>
        </div>
    </li>
</ul>
  </div>
        <footer>
   <div class="footer-content">
  <div class="footer-col col1">
  <p class="copyright">Company name<br></p>
  ADD1<br>
  ADD2<br>
  uk<br>
  Postcode<br>
  <p class="copyright2"><a href="http://www.google.co.uk">Home</a><br></p>
  <a href="http://www.google.co.uk">About Us</a><br>
  <a href="http://www.google.co.uk">Contact Us</a><br>
  <a href="http://www.google.co.uk">Register</a>    <br><br>
  <div class="copyright-centre">&copy; 2014 &nbsp;Company Name</div>
    </div>
  </div>
</footer>

下面的 CSS

.tabs input[type=radio] {
      position: absolute;
      top: -9999px;
      left: -9999px;
}
.tabs {
width: 1020px;
float: none;
list-style: none;
position: relative;
padding: 0;
margin: 20px auto;
}
  .tabs li{
    float: left;
    width:300px;
    margin-left:24px;
}
  .tabs label {
      display: block;
      padding: 10px 20px;
      border-radius: 2px 2px 0 0;
      color: #08C;
      background: rgba(255,255,255,0.2);
      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;
      border-radius: 8px 8px 0px 0px;
  }
  .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{
    display: none;
    text-align: left;
    width: 96%;
    font-size: 20px;
    line-height: 140%;
    padding-top: 10px;
    background: #FFF;
    border-radius: 8px 8px 8px 8px;
    border: 1px solid #08C;
    padding: 15px;
    color: #4a4949;
    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;
    margin-top:72px;
  }
  .cont-wrapper{
    width: 980px;
    background: #ffffff;
    padding-right: 0px;
    padding-left: 0px;
    height:950px;
    margin-left:20px;
    margin-right:20px;
    }
#further-left-tech-info {
width: 645px;
padding-right: 20px;
float: left;
padding-top: 5px;
font-size: 18px;
padding-bottom: 5px;
background: #ffffff;
padding-left: 0px;
}
#further-right {
float: right;
width: 234px;
padding-top: 20px;
position: relative;
padding-bottom: 20px;
margin-right: 35px;
}
.blue-box {
background:url(../images/blue-box.jpg) bottom;
width:249px;
height:146px;
margin-left:0px;
padding:25px;
padding-bottom:0;
width:199px;
color:#fff;
font-size:18px;
}

css - CSS 选项卡式菜单，100% 高度不起作用 - 第 2 部分

0 回答 0

Related

Reference