页脚重叠列div

时间：2016-09-28 19:22:49

标签： html css

我有一个不错的页脚，但是当我粘贴它时它重叠了它上面的div（它是一个移动网站。）

这就是我手机上的样子：
Right now

这就是我想要的样子：
Expected end result

这是目前区域框的代码：

<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:hello@axastudios.com">hello@axastudios.com</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;
    }
}

很抱歉，如果我包含太多代码，但我不知道问题出在哪里。

提前致谢！ ~Rik

2 个答案:

答案 0 :(得分：0)

我不认为你的所有风格都包括在内，即使加载bootstrap css它也不像你的例子，但如果你将.row添加到两个主要的div中，即：

<div class="area-blocks row">

和

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

这应该解决它。

仔细观察您的代码，这似乎是个问题：

.area {
    height: 35vh;
}

你需要改变这个＆amp;可能会使用@media个查询来使其响应。

如果我添加以下内容

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

并从height: 35vh移除.area看起来不错

答案 1 :(得分：0)

您可以添加一个带有类的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
}

这是我使用固定页脚时使用的技巧，但这个技巧适用于所有位置。

问候！

相关问题
最新问题