Question

在另一篇文章发表之后，我想我需要退一步看看并做一个更明确的小提示来表明问题的发生。

所以，我在蓝色框内的内容与页脚和页面的其余部分重叠，当它达到一定高度时，它可以开始，但是一旦它到达结束它继续并溢出。溢出：隐藏只是隐藏文本，因此不是解决方案。

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

的更新小提琴

CODE

<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 BELOW

.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选项卡式菜单，100％高度不起作用 - 第2部分

0 个答案: