css - CSS タブ付きメニュー、高さ 100% が機能しない - パート 2

Question

これに関する別の投稿の後、問題が発生していることを示すために、一歩下がって見て、より明確なフィドルを作成する必要があると思います。

そのため、青いボックス内のコンテンツは、特定の高さに達するとフッターとページの残りの部分に重なっています。最初は問題ありませんが、最後に到達すると、続けてオーバーフローします。overflow:hidden は単純にテキストを非表示にするため、それは解決策ではありません。

必要なのはフッターで、ページの残りの部分は常にコンテンツの最下部に配置されるように再調整する必要があります。

これは問題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