頁腳重疊列格

我有一個很好的註腳，但是當我粘貼在它重疊它上面的DIV（這是一個移動網站。）頁腳重疊列格

這是它看起來像我的手機上：

這就是我想要它看起來像：

而這方面的箱子此刻的代碼：

<div class="area-blocks"> 
       <div class="box-area col-xs-6"> 
        <div class="area-box"> 
         <div class="col-xs-8"> 
          <div class="area-file-name"> 
           <span> 
           Bike trips on lombok 
           </span> 
          </div> 
         </div> 
         <div class="col-xs-4"> 
          <div class="area-file-type"> 
           <img src="includes/img/pdf.png" alt=""> 
          </div> 
         </div> 
        </div> 
       </div> 
       <div class="box-area col-xs-6"> 
        <div class="area-box"> 
         <div class="col-xs-4"> 
          <div class="area-file-type"> 
           <img src="includes/img/pdf.png" alt=""> 
          </div> 
         </div> 
         <div class="col-xs-8"> 
          <div class="area-file-name"> 
           <span> 
           Bike trips on lombok 
           </span> 
          </div> 
         </div> 
        </div> 
       </div> 
       <div class="box-area col-xs-6"> 
        <div class="area-box"> 
         <div class="col-xs-8"> 
          <div class="area-file-name"> 
           <span> 
           Bike trips on lombok 
           </span> 
          </div> 
         </div> 
         <div class="col-xs-4"> 
          <div class="area-file-type"> 
           <img src="includes/img/pdf.png" alt=""> 
          </div> 
         </div> 
        </div> 
       </div> 
       <div class="box-area col-xs-6"> 
        <div class="area-box"> 
         <div class="col-xs-4"> 
          <div class="area-file-type"> 
           <img src="includes/img/pdf.png" alt=""> 
          </div> 
         </div> 
         <div class="col-xs-8"> 
          <div class="area-file-name"> 
           <span> 
           Bike trips on lombok 
           </span> 
          </div> 
         </div> 
        </div> 
       </div> 
       <div class="box-area col-xs-6"> 
        <div class="area-box"> 
         <div class="col-xs-8"> 
          <div class="area-file-name"> 
           <span> 
           Bike trips on lombok 
           </span> 
          </div> 
         </div> 
         <div class="col-xs-4"> 
          <div class="area-file-type"> 
           <img src="includes/img/pdf.png" alt=""> 
          </div> 
         </div> 
        </div> 
       </div> 
       <div class="box-area col-xs-6"> 
        <div class="area-box"> 
         <div class="col-xs-4"> 
          <div class="area-file-type"> 
           <img src="includes/img/pdf.png" alt=""> 
          </div> 
         </div> 
         <div class="col-xs-8"> 
          <div class="area-file-name"> 
           <span> 
           Bike trips on lombok 
           </span> 
          </div> 
         </div> 
        </div> 
       </div> 
      </div>

而CSS爲：

.box-area { 
    background-color: #BA5e8e; 
    padding-right: 20px; 
    border-top-right-radius: 10px; 
    border-bottom-right-radius: 10px; 
} 

/* this is the boxes to align to the right */ 
.box-area:nth-child(2n) { 
    border-radius: 10px 0 0 10px; 
}

和腳註代碼：

<div id="footer"> 
     <div class="container"> 
      <div class="footer-top"> 
       <h1>Villa Campi Sorga</h1> 
      </div> 
      <div class="footer-left"> 
       <h2>Say Hello<br>to Rik Studios</h2> 

       <form role="form" method="post" action="/index.php" id="footercontact" novalidate="novalidate"> 
        <fieldset> 
         <div class="row"> 
          <div class="form-group col-sm-6"> 
           <input type="text" name="contactname" id="contactname" value="" class="form-control input-sm required" role="input" aria-required="true" data-placement="top" placeholder="YOUR NAME"> 
          </div> 
          <div class="form-group col-sm-6"> 
           <input type="email" name="email" id="email" value="" class="form-control input-sm required email" role="input" aria-required="true" data-placement="top" placeholder="YOUR EMAIL"> 
          </div> 
         </div> 
         <div class="form-group"> 
          <textarea type="text" rows="8" name="message" id="message" class="form-control input-sm required" role="textbox" aria-required="true" data-placement="top" placeholder="YOUR MESSAGE..."></textarea> 
         </div> 
         <div class="row"> 
          <div class="form-group col-sm-6"> 
           <input type="submit" value="SEND TO US" name="submit" id="submitButton" class="button" title="Click to send!"> 
          </div> 
         </div> 

        </fieldset> 
       </form> 
      </div> 
      <div class="footer-right"> 
       <h2>How to<br>find us</h2> 
       <p>Want to talk? Nice, we are ready to chat about your ideas, while sipping a cup of coffee (or tea if you like). </p> 
       <ul> 
        <li>Snelliusweg 40-15</li> 
        <li>6827 DH Arnhem</li> 
        <li>The Netherlands</li> 
        <li><a href="tel:+31267074344">+31(0)26 70 74 344</a></li> 
        <li><a href="mailto:[email protected]">[email protected]</a></li> 
       </ul> 
      </div> 
     </div> 
    </div>

及其產生的CSS：

/* TEXT STYLE *************************/ 
#footer h2 { 
    color: #FFFFFF; 
    margin-bottom: 20px; 
} 

h2 { 
    color: #000000; 
    font-size: 24px; 
    font-weight: 700; 
    font-family: 'Montserrat', Arial, Helvetica, sans-serif; 
    text-transform: uppercase; 
} 
h1, h2, h3, h4, h5, h6 { 
    font-family: 'Montserrat', Arial, Helvetica, sans-serif; 
    margin-top: 0px; 
} 

/* FOOTER *****************************/ 
fieldset { 
    border: 0px !important; 
} 
#footer { 
    position:relative; 
    background: url(http://www.axastudios.com/images/bg-footer.jpg) bottom center #000000; 
    background-size: cover; 
    color: #777777; 
    padding-bottom: 50px; 
    border-bottom: 1px solid #000000; 
} 
.footer-top { 
    position: relative; 
    padding: 60px 0px 60px 0px; 
    text-align: center; 
    font-size: 30px; 
} 
.footer-top h1{ 
    display: inline-block; 
    font-family: sunshine; 
    color: #fff; 
} 
.footer-left, .footer-right{ 
    position:relative; 
    float: left; 
    width: 50%; 
} 
.footer-left{ 
    padding-right: 20px; 
} 
#footer h2{ 
    color: #FFFFFF; 
    margin-bottom: 20px; 
} 
#footer h2:after{ 
    color: #FFFFFF; 
} 
#footercontact{ 
    position: relative; 
    padding-top: 10px; 
} 
#footer .form-group { 
    margin-bottom: 30px; 
} 

#footer input.button:hover { 
    color: #FFFFFF; 
    border: 1px solid rgba(255, 255, 255, 0.7); 
    -webkit-animation: btn-animate 0.2s ease-in-out; 
    -ms-animation: btn-animate 0.2s ease-in-out; 
    animation: btn-animate 0.2s ease-in-out; 
} 

#footer input.button { 
    position: relative; 
    cursor: pointer; 
    color: #FFFFFF; 
    line-height: 20px; 
    font-size: 16px; 
    font-weight: 700; 
    border: 1px solid #FFFFFF; 
    border-radius: 0px; 
    outline: none; 
    background: none; 
    text-align: center; 
    text-transform: uppercase; 
    -webkit-transition: all 0.2s; 
    -moz-transition: all 0.2s; 
    transition: all 0.2s; 
    font-family: 'Montserrat', Arial, Helvetica, sans-serif; 
} 

input.button, .btn-primary { 
    position: relative; 
    margin: 0; 
    height: 40px; 
    padding: 0px 30px 0px 30px; 
} 

#footer .form-control { 
    display: block; 
    width: 100%; 
    height: 50px; 
    padding: 10px 15px; 
    font-size: 14px; 
    line-height: 1.42857; 
    color: #777; 
    background: none; 
    border: 1px solid #999; 
    border-radius: 0px; 
    box-shadow: none; 
    margin:0 !important; 
    transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s; 
} 
#footer .form-control:focus { 
    border-color: rgba(186, 94, 142, 255) !important; 
    outline: 0px none; 
    box-shadow: none; 
} 
#footer textarea.form-control { 
    display: block; 
    height: 150px; 
    width: 100%!important; 
} 
#footer ::-webkit-input-placeholder { 
    font-family: 'Montserrat', Arial, Helvetica, sans-serif; 
    color: #555555; 
    font-weight: 700; 
} 
#footer :-moz-placeholder { 
    font-family: 'Montserrat', Arial, Helvetica, sans-serif; 
    color: #555555; 
    font-weight: 700; 
} 
#footer ::-moz-placeholder { 
    font-family: 'Montserrat', Arial, Helvetica, sans-serif; 
    color: #555555; 
    font-weight: 700; 
} 
#footer :-ms-input-placeholder { 
    font-family: 'Montserrat', Arial, Helvetica, sans-serif; 
    color: #555555; 
    font-weight: 700; 
} 
#footer .button{ 
    display: block; 
    width: 100%; 
    height: 50px; 
    border: 1px solid #999; 
} 
.footer-right{ 
    padding-left: 120px; 
    font-size: 16px; 
    line-height: 30px; 
    float: right 
} 
.footer-right ul{ 
    list-style: none; 
    background: url(http://www.axastudios.com/images/icon-pointer.png) left 5px no-repeat; 
    background-size: 22px; 
    padding-left: 40px; 
    margin-bottom: 10px; 
} 
#footer-copyright{ 
    background: #1c1c1c; 
    border-top: 1px solid #2b2b2b; 
} 
.copyright{ 
    padding: 40px 0px; 
    text-transform: uppercase; 
    color: #777777; 
    font-size: 12px; 
} 
.footer-right a{ 
    color: #777777; 
} 
.footer-right a:hover{ 
    color: #ed1c24; 
} 

.details > p:nth-child(1) { 
    margin-top: 40px; 
} 

.copyright { 
    text-align: center; 
} 

@media (max-width: 767px) { 
    .footer-top { 
     position: relative; 
     padding: 60px 40px 60px 40px; 
    } 
    .footer-left, .footer-right { 
     position: relative; 
     float: none; 
     width: 100%; 
     padding: 0px 25px; 
     margin-bottom: 40px; 
    } 
    a.button{ 
     display: block; 
    } 
    .mob-break{ 
     display: inline; 
    } 
}

很抱歉，如果我包含了太多的代碼，但我不知道問題在哪裏。

在此先感謝！〜裏克

來源

2016-09-28 Rik

這不能是整個代碼。也許你有一個鏈接到您的網站？ –

這確實不是整個代碼。這裏：http：//campi.nijdeken.com/mobile/ – Rik

似乎你解決了這個問題，現在看起來不錯。 –

我不認爲所有的款式都包括在內，即使裝載引導CSS它並不完全像你的例子，但如果添加到.row兩個主要的div，即信息：

<div class="area-blocks row">

和

<div class="row" id="footer">

這應該解決它。

看你的代碼更接近這似乎是這個問題：

.area { 
    height: 35vh; 
}

你需要改變這種&可能使用@media查詢，使其響應。

如果我從.area添加以下

.area-blocks { 
    position: relative; 
    display: block; 
    width: 100%; 
    margin-bottom: 20px; 
    height: 35vh; 
}

，並刪除height: 35vh它看起來不錯

來源

2016-09-28 19:43:13

沒有修復它。以下是完整的代碼：http://campi.nijdeken.com/mobile/ – Rik

更新了我的答案，您將需要使用px或將div包裝在容器中並對其重新設計。 –

我認爲這與自舉列表有關。因爲當我刪除'height：35vh;'它通常應該調整到所有div的大小。但現在它只是停在塊之後？這可能是問題 – Rik

你可以用一個類添加一個div總是您包含#footer的模擬頁腳的高度，例如：

HTML：

<div class="height-footer"></div> 
<div id="footer"> 
.... 
</div>

級的CSS：

.height-footer{ 
    height: // here you need to put the height of your #footer 
}

這是使用固定的頁腳時，我用了一招，但這一招適用於所有位置。

問候！

來源

2016-09-28 19:52:35

但是他的頁腳並不固定：'position：relative;' –

我知道但那只是一個例如，這個技巧適用於所有職位 –

頁腳重疊列格

回答

相關問題