擴展div通過頁腳運行

我有一個帶有tableview的頁面。當您點擊「顯示更多」按鈕時，每行下方會顯示更多詳細信息。當我沒有將頁腳添加到頁面時，內容更改時，外部div（雙線）大小正確。擴展div通過頁腳運行

當我添加我的頁腳時，外部div的大小以某種方式中斷，並且擴展表的內容通過我的頁腳運行。我一直在玩絕對/相對頁腳位置和不同的頁腳顯示類型，但我無法讓它工作。

我該如何解決這個問題？

/* Generic */ 
 
html, body { 
 
    position: relative; 
 
    min-height: 100%; 
 
    height: 100%; 
 
    font-family: 'Montserrat', sans-serif; 
 
    background-color: #404040; 
 
    color: #ffffff; 
 
} 
 
h1 { 
 
    position: absolute; 
 
    width: 100%; 
 
    font-size: 5.5vh; 
 
    font-weight: 600; 
 
    text-align: center; 
 
} 
 

 
.container--padding { 
 
    padding-top: 10vh; 
 
} 
 

 
.shorten { 
 
    overflow: hidden; 
 
    white-space: nowrap; 
 
    text-overflow: ellipsis; 
 
} 
 
h2 { 
 
    padding-top: 12vh; 
 
    font-family: Lora, serif; 
 
    font-style: italic; 
 
    text-align: center; 
 
    font-size: 2.9vh; 
 
    line-height: 1.5; 
 
    width: 100%; 
 
} 
 
.link a { 
 
    text-indent: 3em; 
 
    line-height: 2em; 
 
    color: #ffffff; 
 
    text-decoration: underline; 
 
} 
 
.link a:hover { 
 
    text-indent: 3em; 
 
    line-height: 2em; 
 
    color: #404040; 
 
    text-decoration: underline; 
 
    background-color: #cccccc; 
 
    padding: 5px; 
 
} 
 
.clear { 
 
    clear: both; 
 
    padding-top: 40px; 
 
} 
 

 
/* Block: Header */ 
 

 
.container-padding-home { 
 
    padding-top: 30vh; 
 
} 
 
.homepage-header h1 { 
 
    position: absolute; 
 
    width: 100%; 
 
    font-size: 5.5vh; 
 
    font-weight: 600; 
 
    text-align: center; 
 
} 
 

 
.homepage-header h2 { 
 
    padding-top: 15vh; 
 
    font-family: Lora, serif; 
 
    font-style: italic; 
 
    text-align: center; 
 
    font-size: 2.9vh; 
 
    line-height: 1.5; 
 
    width: 100%; 
 
} 
 
.homepage-block { 
 
    height:100vh; 
 
    } 
 
.header-block { 
 
    height: 50vh; 
 
} 
 

 
/* Block: Tile Menu */ 
 
.tile-menu { 
 
    padding: 20px 15px 20px 15px; 
 
} 
 
.thumbnail { 
 
    border: 0 none; 
 
    box-shadow: none; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.thumbnail img { 
 
    width: 100%; 
 
    vertical-align: top; 
 
} 
 
.thumbnail:after { 
 
    content: "\A"; 
 
    position:absolute; 
 
    width:100%; height:110%; 
 
    top:0; left:0; 
 
    background: 
 
      linear-gradient(
 
        rgba(255,255,255,0.2), 
 
        rgba(255,255,255,0.2) 
 
      ), 
 
      url(../../images/focus.png) no-repeat center; 
 
    opacity:0; 
 
    transition: all 0.5s; 
 
    -webkit-transition: all 0.5s; 
 
} 
 
.thumbnail:hover:after { 
 
    opacity:1; 
 
} 
 
.caption { 
 
    width:100%; 
 
    bottom: -20px; 
 
    position: absolute; 
 
    background: #404040; 
 
    background: -webkit-linear-gradient(bottom, #404040 50%, rgba(0, 0, 0, 0) 100%) repeat scroll 0 0 rgba(0, 0, 0, 0); 
 
    background: -moz-linear-gradient(bottom, #404040 75%, rgba(0, 0, 0, 0) 100%) repeat scroll 0 0 rgba(0, 0, 0, 0); 
 
    background: -o-linear-gradient(bottom, #404040 75%, rgba(0, 0, 0, 0) 100%) repeat scroll 0 0 rgba(0, 0, 0, 0); 
 
    background: linear-gradient(to top, #404040 75%, rgba(0, 0, 0, 0) 100%) repeat scroll 0 0 rgba(0, 0, 0, 0); 
 
} 
 
.caption h3 { 
 
    color: #ffffff; 
 
    -webkit-font-smoothing: antialiased; 
 
} 
 

 
/* Block: Contact */ 
 
.contact-form h3 { 
 
    font-size: 3.5em; 
 
    font-weight: 600; 
 
} 
 
.subtitle { 
 
    display: block; 
 
    font-style: italic; 
 
    text-align: center; 
 
    font-size: 20px; 
 
    line-height: 26px; 
 
    color: #cccccc; 
 
    margin-bottom: 30px; 
 
    font-family: Lora, serif; 
 
} 
 
.contact { 
 
    border: 1px solid #cccccc; 
 
    background-color: #f5f5f5; 
 
    border-radius: 3px; 
 
    color: #404040; 
 
    width: 100%; 
 
    line-height: 1.43; 
 
    min-height: 3.5em; 
 
    padding: 0.5em 1.07em 0.5em; 
 
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s; 
 
    display: block; 
 
} 
 
.btn-rwdb { 
 
    background-color: #cccccc; 
 
    border-color: #404040; 
 
    color: #404040; 
 
    letter-spacing: 2px; 
 
    padding: 10px 20px; 
 
} 
 
.btn-rwdb:hover { 
 
    background-color: #f5f5f5; 
 
    color: #404040; 
 
    border-color: #404040; 
 
    letter-spacing: 2px; 
 
    padding: 10px 20px; 
 
} 
 

 
/* Block: Overview */ 
 
#overview { 
 
    padding-top: 50px; 
 
    width: 100%; 
 
} 
 
.overview { 
 
    text-align: center; 
 
    padding-bottom: 50px; 
 
} 
 
.overview img { 
 
    width: 100%; 
 
    vertical-align: middle; 
 
    padding-bottom: 30px; 
 
} 
 
.card-title { 
 
    text-align: center; 
 
    letter-spacing: -1px; 
 
    font-weight: 600; 
 
    font-size: 20px; 
 
} 
 
.card-subtitle { 
 
    margin-bottom: 20px; 
 
    font-style: italic; 
 
    font-weight: 400; 
 
    font-size: 15px; 
 
    font-family: "Lora", serif; 
 
    color: #cccccc; 
 
    margin-top: -1rem; 
 
    line-height: 1.7857; 
 
    padding-bottom: 2rem; 
 
    text-align: center; 
 
} 
 
.btn-card { 
 
    background-color: #cccccc; 
 
    border-color: #404040; 
 
    color: #404040; 
 
    letter-spacing: 2px; 
 
    padding: 10px 20px; 
 
    position: absolute; 
 
    bottom: 0; 
 
    left: 50%; 
 
    transform:translateX(-50%); 
 
    margin-bottom: 40px; 
 
} 
 
.btn-card:hover { 
 
    background-color: #ffffff; 
 
    color: #404040; 
 
    border-color: #404040; 
 
    letter-spacing: 2px; 
 
    padding: 10px 20px; 
 
} 
 

 
/* Block: Search */ 
 
#imaginary_container { 
 
    margin-top: 7%; 
 
    margin-bottom: 7%; 
 
} 
 
.stylish-input-group .input-group-addon { 
 
    background: #cccccc !important; 
 
} 
 
.stylish-input-group .form-control { 
 
    border-right: 0; 
 
    box-shadow: 0 0 0; 
 
    border-color: #cccccc; 
 
} 
 
.stylish-input-group button { 
 
    border:0; 
 
    background:transparent; 
 
} 
 

 
/* Block: Lyric */ 
 
.lyric-detail { 
 
    padding-bottom: 10vh; 
 
} 
 

 
/* Block: Table */ 
 
.table-header { 
 
    border: 2px #515151; 
 
    border-top-style: solid; 
 
    padding: 4px; 
 
    color: #ffffff; 
 
    font-weight: bold; 
 
} 
 

 
.table-body { 
 
    border: 1px #515151; 
 
    border-top-style: solid; 
 
    padding: 4px; 
 
    color: #ffffff; 
 
} 
 

 
.cancelled { 
 
    text-decoration: line-through; 
 
    color: #808080; 
 
} 
 

 
/* Block: Google Maps */ 
 
#map_wrapper { 
 
    height: 600px; 
 
    color: #404040; 
 
} 
 
#map_canvas { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
/*Block: Discography Details*/ 
 
.disc-details { 
 
    padding: 20px 0 20px 0; 
 
} 
 
.disc-padding { 
 
    padding-top: 20px; 
 
} 
 
.disc-border { 
 
    border: 3px double #515151; 
 
} 
 
.disc-specs { 
 
    padding-top: 20px; 
 
} 
 
.details { 
 
    display: none; 
 
} 
 
.btn-details { 
 
    background-color: #cccccc; 
 
    border-color: #404040; 
 
    color: #404040; 
 
    letter-spacing: 2px; 
 
    padding: 10px 20px; 
 
    margin-top: 10px; 
 
    margin-left: 38%; 
 
} 
 
.btn-details:hover { 
 
    background-color: #f5f5f5; 
 
    color: #404040; 
 
    border-color: #404040; 
 
    letter-spacing: 2px; 
 
    padding: 10px 20px; 
 
} 
 
/*Block: Footer */ 
 
.wrapper { 
 
    min-height: 100%; 
 
    margin-bottom: -100px; 
 
} 
 
.footer { 
 
    background-color: #000000; 
 
    text-align: center; 
 
    line-height: 2; 
 
    position: relative; 
 
    width: 100%; 
 
} 
 
.footer ul { 
 
    list-style-type: none; 
 
} 
 
.copyright { 
 
    text-align: center; 
 
    width: 100%; 
 
} 
 

 
.layout-margin-top { 
 
    margin-top: 20px; 
 
} 
 

 
.footer, .push { 
 
    height: 100px; 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic&amp;subset=latin"> 
 
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:400,700"> 
 
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i"> 
 
    <link rel="stylesheet" href="https://www.rwdb.info/assets/tether/tether.min.css"> 
 
    <link rel="stylesheet" href="https://www.rwdb.info/assets/bootstrap/css/bootstrap.min.css"> 
 
    <link rel="stylesheet" href="https://www.rwdb.info/assets/animate/animate.min.css"> 
 
    <link rel="stylesheet" href="https://www.rwdb.info/assets/rwdb-custom/rwdb-custom.css"> 
 
    <link rel="stylesheet" href="https://www.rwdb.info/assets/rwdb-custom/rwdb-menu.css"> 
 

 

 
</head> 
 
<body> 
 
<nav id="nav" class="navbar navbar-default"> 
 
    <div class="container"> 
 
     <div class="navbar-header"> 
 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
 
       <span class="sr-only">Toggle navigation</span> 
 
       <span class="icon-bar"></span> 
 
       <span class="icon-bar"></span> 
 
       <span class="icon-bar"></span> 
 
      </button> 
 
      <a href="/" class="navbar-logo"><img src="/images/rwdb-logo.png" alt="RWDB"></a> 
 
     </div> 
 
     <div id="navbar" class="navbar-collapse collapse"> 
 
      <ul class="nav navbar-nav navbar-right"> 
 
       <li class="dropdown"> 
 
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">MAIN #1 
 
         <span class="caret"></span> 
 
        </a> 
 
        <ul class="dropdown-menu"> 
 
         <li><a href="#">Sub #1-1</a></li> 
 
         <li><a href="#">Sub #1-2</a></li> 
 
        </ul> 
 
       </li> 
 
       <li class="dropdown"> 
 
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">MAIN #2 
 
         <span class="caret"></span> 
 
        </a> 
 
        <ul class="dropdown-menu"> 
 
         <li><a href="#">Sub #2-1</a></li> 
 
         <li><a href="#">Sub #2-2</a></li> 
 
         <li><a href="#">Sub #2-3</a></li> 
 
         <li><a href="#">Sub #2-4</a></li> 
 
         <li><a href="#">Sub #2-5</a></li> 
 
         <li><a href="#">Sub #2-6</a></li> 
 
        </ul> 
 
       </li> 
 
       <li><a href="#">MAIN #3</a></li> 
 
       <li><a href="#">MAIN #4</a></li> 
 
      </ul> 
 
     </div> 
 
    </div> 
 
</nav> 
 
<section class="header-block" style = "background: url('https://paulpichugin.com/wp-content/uploads/2016/04/macpac-19-960x636.jpg') no-repeat; background-size: cover;"> 
 
    <div class="container--padding animated slideInUp"> 
 
     <div class="col-xs-8 col-xs-offset-2"> 
 
      <h1>Main header</h1> 
 
     </div> 
 
     <div class="col-xs-12 col-md-8 col-md-offset-2"> 
 
      <h2>Subheader</h2> 
 
     </div> 
 
    </div> 
 
</section> 
 
<div class="disc-padding">&nbsp;</div> 
 
    <div id="picture-left-text-right-1" class="container disc-border wow fadeInLeft"> 
 
     <div class="col-xs-12 col-sm-4 disc-details row-eq-height"> 
 
      <div class="col-xs-12 text-center"> 
 
       <img alt="Heavy Entertainment Show" src="https://lh3.googleusercontent.com/dB3Dvgf3VIglusoGJAfpNUAANhTXW8K9mvIsiIPkhJUAbAKGKJcEMPTf0mkSexzLM5o=w300" style="width: 100%"> 
 
       <div class="row disc-specs">Label: Sony Music<br />Barcode: 8898 5 37103 2<br />Release type: Album<br />Region: Europe</div> 
 
      </div> 
 
      <a id="expandAll" href="#" class="btn btn-default" role="button">Expand All</a> 
 
      <a id="collapseAll" href="#" class="btn btn-default" role="button">Collapse All</a> 
 
     </div> 
 
     <div class="col-xs-12 col-sm-8 disc-details row-eq-height"> 
 
      <div class="col-xs-12"> 
 
       <div class="row"> 
 
        <div id="headerNumber-1-1" class="col-sm-offset-1 col-xs-1 table-header">#</div> 
 
        <div id="headerTitle-1-1" class="col-xs-7 col-sm-6 table-header">Title</div> 
 
        <div id="headerLength-1-1" class="col-xs-4 col-sm-3 table-header">Length</div> 
 
       </div> 
 
      </div> 
 
      <div id="accordion" class="col-xs-12"> 
 
       <div class="row"> 
 
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" class=""> 
 
         <div class="col-sm-offset-1 col-xs-1 table-body">1</div> 
 
         <div class="col-xs-7 col-sm-6 table-body">Song #1</div> 
 
         <div class="col-xs-4 col-sm-3 table-body">03:21</div> 
 
        </a> 
 
        <div id="collapseOne" class="panel-collapse collapse"> 
 
          <div class="col-xs-offset-2 col-xs-9 table-body"><small>Vocals : A </small></div> 
 
          <div class="col-xs-offset-2 col-xs-9 table-body"><small>Written by : A B C </small></div> 
 
          <div class="col-xs-offset-2 col-xs-9 table-body" style="text-align:justify"><small>A B C D </small></div> 
 
        </div> 
 
       </div> 
 
      </div> 
 
      <div id="accordion" class="col-xs-12"> 
 
       <div class="row"> 
 
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" class=""> 
 
         <div class="col-sm-offset-1 col-xs-1 table-body">2</div> 
 
         <div class="col-xs-7 col-sm-6 table-body">Song #2</div> 
 
         <div class="col-xs-4 col-sm-3 table-body">03:02</div> 
 
        </a> 
 
        <div id="collapseTwo" class="panel-collapse collapse"> 
 
         <div class="col-xs-offset-2 col-xs-9 table-body"><small>Vocals : A </small></div> 
 
         <div class="col-xs-offset-2 col-xs-9 table-body"><small>Written by : A B C </small></div> 
 
         <div class="col-xs-offset-2 col-xs-9 table-body" style="text-align:justify"><small>A B C D </small></div> 
 
        </div> 
 
       </div> 
 
      </div> 
 
      <div id="accordion" class="col-xs-12"> 
 
       <div class="row"> 
 
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree" class=""> 
 
         <div class="col-sm-offset-1 col-xs-1 table-body">3</div> 
 
         <div class="col-xs-7 col-sm-6 table-body">Song #3</div> 
 
         <div class="col-xs-4 col-sm-3 table-body">03:45</div> 
 
        </a> 
 
        <div id="collapseThree" class="panel-collapse collapse"> 
 
         <div class="col-xs-offset-2 col-xs-9 table-body"><small>Vocals : A </small></div> 
 
         <div class="col-xs-offset-2 col-xs-9 table-body"><small>Written by : A B C </small></div> 
 
         <div class="col-xs-offset-2 col-xs-9 table-body" style= "text-align:justify"><small>A B C D </small></div> 
 
        </div> 
 
       </div> 
 
      </div> 
 
       <div id="accordion" class="col-xs-12"> 
 
        <div class="row"> 
 
         <a data-toggle="collapse" data-parent="#accordion" href="#collapseFour" class=""> 
 
          <div class="col-sm-offset-1 col-xs-1 table-body">4</div> 
 
          <div class="col-xs-7 col-sm-6 table-body">Song #4</div> 
 
          <div class="col-xs-4 col-sm-3 table-body">04:12</div> 
 
         </a> 
 
         <div id="collapseFour" class="panel-collapse collapse"> 
 
          <div class="col-xs-offset-2 col-xs-9 table-body"><small>Vocals : A </small></div> 
 
          <div class="col-xs-offset-2 col-xs-9 table-body"><small>Written by : A B C </small></div> 
 
          <div class="col-xs-offset-2 col-xs-9 table-body" style="text-align:justify"><small>A B C D </small></div> 
 
          </div> 
 
         </div> 
 
        </div> 
 

 
       <div id="accordion" class="col-xs-12"> 
 
        <div class="row"> 
 
         <a data-toggle="collapse" data-parent="#accordion" href="#collapseFive" class=""> 
 
          <div class="col-sm-offset-1 col-xs-1 table-body">5</div> 
 
          <div class="col-xs-7 col-sm-6 table-body">Song #5</div> 
 
          <div class="col-xs-4 col-sm-3 table-body">03:45</div> 
 
         </a> 
 
         <div id="collapseFive" class="panel-collapse collapse"> 
 
          <div class="col-xs-offset-2 col-xs-9 table-body"><small>Vocals : A </small></div> 
 
          <div class="col-xs-offset-2 col-xs-9 table-body"><small>Written by : A B C </small></div> 
 
          <div class="col-xs-offset-2 col-xs-9 table-body" style="text-align:justify"><small>A B C D </small></div> 
 
         </div> 
 
        </div> 
 
       </div> 
 
       <div id="accordion" class="col-xs-12"> 
 
        <div class="row"> 
 
         <a data-toggle="collapse" data-parent="#accordion" href="#collapseSix" class=""> 
 
          <div class="col-sm-offset-1 col-xs-1 table-body">6</div> 
 
          <div class="col-xs-7 col-sm-6 table-body">Song #6</div> 
 
          <div class="col-xs-4 col-sm-3 table-body">03:45</div> 
 
         </a> 
 
         <div id="collapseSix" class="panel-collapse collapse"> 
 
          <div class="col-xs-offset-2 col-xs-9 table-body"><small>Vocals : A </small></div> 
 
          <div class="col-xs-offset-2 col-xs-9 table-body"><small>Written by : A B C </small></div> 
 
          <div class="col-xs-offset-2 col-xs-9 table-body" style="text-align:justify"><small>A B C D </small></div> 
 
         </div> 
 
        </div> 
 
       </div> 
 

 
    </div> 
 
<!--scripts loaded here--> 
 

 
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> 
 
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 

 

 
<script> 
 
    $(function() { 
 
     $('a[data-toggle="collapse"]').on('click',function() { 
 
      var objectID=$(this).attr('href'); 
 
      if($(objectID).hasClass('in')) { 
 
       $(objectID).collapse('hide'); 
 
      } 
 
      else { 
 
       $(objectID).collapse('show'); 
 
      } 
 
     }); 
 
     $('#expandAll').on('click',function(){ 
 
      $('a[data-toggle="collapse"]').each(function(){ 
 
       var objectID=$(this).attr('href'); 
 
       if($(objectID).hasClass('in')===false) 
 
       { 
 
        $(objectID).collapse('show'); 
 
       } 
 
      }); 
 
     }); 
 
     $('#collapseAll').on('click',function(){ 
 
      $('a[data-toggle="collapse"]').each(function(){ 
 
       var objectID=$(this).attr('href'); 
 
       $(objectID).collapse('hide'); 
 
      }); 
 
     }); 
 
    }); 
 
</script> 
 
</div> 
 

 
<!-- When I add this it breaks --> 
 
<footer class="footer"> 
 
    <div class="container"> 
 
     <div class="row layout-margin-top"> 
 
      <div class="col-xs-12 col-sm-4"> 
 
       <ul> 
 
        <li class="link"><a href="#">Contact</a></li> 
 
       </ul> 
 
      </div> 
 
      <div class="col-xs-12 col-sm-4"> 
 
       <ul> 
 
        <li class="link"><a href="#">Privacy &amp; Cookies Policy</a></li> 
 
       </ul> 
 
      </div> 
 
      <div class="col-xs-12 col-sm-4"> 
 
       <ul> 
 
        <li class="link"><a href="#">Disclaimer</a></li> 
 
       </ul> 
 
      </div> 
 
     </div> 
 
     <div class="row copyrightcol-xs-12">&copy; Copyright 2017. All rights reserved.</div> 
 
    </div> 
 
</footer> 
 

 
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script> 
 
<script src="https://www.rwdb.info/assets/matchheight/jquery.matchHeight.js" type="text/javascript"></script> 
 
<script src="https://www.rwdb.info/assets/rwdb-custom/rwdb-custom.js"></script> 
 
<script src="https://www.rwdb.info/assets/tether/tether.min.js"></script> 
 
<script src="https://www.rwdb.info/assets/bootstrap/js/bootstrap.min.js"></script> 
 
</body> 
 
</html>

來源

2017-10-19 tampie

取下行「行EQ高」：

<div class="col-xs-12 col-sm-4 disc-details row-eq-height">

它現在應該展開容器。

此外，請檢查您的[data-toggle =「collapse」]功能，因爲它在點擊兩首歌曲時似乎不會摺疊內容。

來源

2017-10-19 20:53:48 grusl83

我完全忽略了row-eq-height。非常感謝，這就是訣竅！我也解決了崩潰的功能。 – tampie

擴展div通過頁腳運行

回答

相關問題