Question

我正在尝试将静态网页构建为更大项目的一部分（该项目在Laravel中）。除了页脚行为异常之外，其他所有内容似乎都正常运行。尽管它位于HTML树的底部，但它往往会占用更多空间，使上面的许多元素重叠。

我已经尝试将div（页脚）更改为“ footer”元素，然后更改为“ section”元素，但无济于事。

我的HTML文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Medical Insurance</title>
    <link rel="stylesheet" type="text/css" href="{{ asset('web/css/medicalInsuranceStyles.css') }}">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
    <div class="container-fluid">

        <!-- header -->

        <div class="row">
            <div class="col-xs-4 col-sm-4 col-md-offset-1 col-md-3">
                <a href="https://www.letsmd.com/">
                    <img id='main-logo' src="<?php echo e(asset('/web/images/logo-without-Tagline.svg')); ?>">
                </a>
            </div>
        </div>

        <!-- banner -->

        <div id='banner-container'>
            <div id="transparent-div"></div>
            <div id='banner-text-div'>
                <h1>Smart Health Insurance Cover</h1>
                <h2>Starting from ₹5/day</h2>
            </div>
        </div>

        <!-- content part one -->

        <div>
            <div class='col-md-12 col-sm-12 col-xs-12' id="content-div-one">
                <h2>Same premium, <span id='content-div-one-span'>2x</span> the value</h2>
                <button class="btn btn-default">Apply Now</button>
            </div>
        </div>

        <!-- content part two -->

        <div>
            <div class='col-md-offset-1 col-md-10 col-sm-offset-1 col-sm-10 col-xs-12' id="content-div-two">
                <h2><span>CARE COVER</span> PLAN</h2>
                <p>Ensures affordable, comprehensive cover</p>
                <ul>
                    <li>Coverage for family</li>
                    <li>Covers everything under a standard health policy</li>
                    <li>Sum Insured options upto 5lacs with deductibles</li>
                    <li>Sum Insured on family floater basis</li>
                    <li>Hospitalisation expenses + pre - post hospitalisation covered</li>
                    <li>All room/ICU/nursing/medicine/surgery etc charges covered</li>
                    <li>Day care procedures covered</li>
                    <li>Coverage available at all leading hospitals across the country</li>
                    <li>Deductible 50,000/100,000 options available. Deductible finances at 0% EMI</li>
                    <li>Tax benifits under section 80D</li>
                </ul>
            </div>
        </div>

        <!-- form -->

        <div>
            <div class='col-md-12 col-sm-12 col-xs-12' id="form-div">
                <h2><span>GET</span> QUOTE</h2>
                <form action="" method="POST">
                    <div id="form">
                        <section id="form-section-one">
                            <p>Enter Your Name</p>
                            <input type="text" name="name">
                            <p>Your Mobile No.</p>
                            <input type="number" name="number">
                            <p>Email-Id</p>
                            <input type="email" name="email">
                        </section>
                        <section id="form-section-two">
                            <p>Gender</p>
                            <input type="radio" name="gender" value='female'><span>Female</span>
                            <input type="radio" name="gender" value='male'><span>Male</span>
                            <input type="radio" name="gender" value='others'><span>Others</span>
                            <p>Source of Income</p>
                            <select name="income-source" id="">
                                <option value="" selected disabled>-- Select One --</option>
                                <option value="">alpha</option>
                                <option value="">beta</option>
                                <option value="">gamma</option>
                            </select>
                            <p>Annual Income/Salary</p>
                            <input type="number" name="salary">
                        </section>
                        <section id="form-section-three">
                            <p>Our team will get in touch with you for further processing</p>
                            <p>Please select the number of family members you want to get insured with you</p>
                            <select name="family-memers" id="">
                                <option value="" selected disabled>-- Select One --</option>
                                <option value="">alpha</option>
                                <option value="">beta</option>
                                <option value="">gamma</option>
                            </select>
                            <p id='greeting-text'>Thank You</p>
                        </section>
                    </div>
                    <button class="btn btn-default" id='form-btn'>Next</button>
                </form>
            </div>
        </div>

        <!-- video -->

        <!-- <div>
            <div class='col-md-offset-1 col-md-10 col-sm-offset-1 col-sm-10 col-xs-12' id="video-div">
                <video width="400" controls>
                    <source src="mov_bbb.mp4" type="video/mp4">
                    <source src="mov_bbb.ogg" type="video/ogg">
                    Your browser does not support HTML5 video.
                </video>
            </div>
        </div> -->

        <!-- media mentions -->

        <div class='col-md-offset-1 col-md-10 col-sm-offset-1 col-sm-10 col-xs-12' id="media-mentions-div">
            <h2><span>MEDIA</span> MENTIONS</h2>
            <div class="row">
                <div class="col-md-offset-2 col-md-2 col-sm-offset-2 col-sm-2 col-xs-3">
                    <img class="img-responsive" src="<?php echo e(asset('/web/loancard/Media/2017.10.06_09-23-18bhaskar.png')); ?>">
                </div>
                <div class="col-md-2 col-sm-2 col-xs-3">
                    <img class="img-responsive" class="img-responsive"src="<?php echo e(asset('/web/loancard/Media/vccircle.png')); ?>">
                </div>
                <div class="col-md-2 col-sm-2 col-xs-3">
                    <img class="img-responsive" src="<?php echo e(asset('/web/loancard/Media/TheHindu-Logo.png')); ?>">
                </div>
                <div class="col-md-2 col-sm-2 col-xs-3">
                    <img class="img-responsive" src="<?php echo e(asset('/web/loancard/Media/Zee-Business-CS6-1110x550.png')); ?>">
                </div>
            </div>
            <div class="row">
                <div class="col-md-offset-2 col-md-2 col-sm-offset-2 col-sm-2 col-xs-3">
                    <img class="img-responsive" src="<?php echo e(asset('/web/loancard/Media/dribbble_001_2x.png')); ?>">
                </div>
                <div class="col-md-2 col-sm-2 col-xs-3">
                    <img class="img-responsive" src="<?php echo e(asset('/web/loancard/Media/the-economic-times-logo-png-1.png')); ?>" >
                </div>
                <div class="col-md-2 col-sm-2 col-xs-3">
                    <img class="img-responsive" src="<?php echo e(asset('/web/loancard/Media/yahoo-logo-png-transparent-background-768x256.png')); ?>">
                </div>
                <div class="col-md-2 col-sm-2 col-xs-3">
                    <img class="img-responsive" src="<?php echo e(asset('/web/loancard/Media/yourstory.png')); ?>">
                </div>
            </div>
        </div>

        <!-- footer -->

        <div class="row" id='footer'>
            <div class="col-md-5 col-sm-5 col-xs-5 pull-left">
                <p>Copyright © {{ date('Y') }} LetsMD. All rights reserved  </p>
            </div>
            <div class="col-md-offset-1 col-md-6 col-sm-offset-1 col-sm-6 col-xs-6 pull-right">
                <p>
                    Get social with us 
                    <a href="https://www.facebook.com/LetsMDMedbay/" target="_blank">
                        <span class="fa-stack fa-md">
                            <i class="fa fa-circle fa-stack-2x"></i>
                            <i class="fa fa-facebook fa-stack-1x fa-inverse"></i>
                        </span>
                    </a>
                    <a href="https://www.youtube.com/channel/UC4urUJpHcA9LpeRQ1O2hdjw" target="_blank">
                        <span class="fa-stack fa-md">
                            <i class="fa fa-circle fa-stack-2x"></i>
                            <i class="fa fa-youtube-play fa-stack-1x fa-inverse"></i>
                        </span>
                    </a>
                    <a href="https://in.linkedin.com/company/letsmd" target="_blank">
                        <span class="fa-stack fa-md">
                            <i class="fa fa-circle fa-stack-2x"></i>
                            <i class="fa fa-linkedin fa-stack-1x fa-inverse"></i>
                        </span>
                    </a>
                </p>
            </div>
        </div>

    </div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<script src="{{ asset('web/js/medicalInsuranceScript.js') }}"></script>
</html>

我的CSS文件：

#main-logo {
    width: 50%;
    margin-top: 5%;
}
#transparent-div {
    width: 70%;
    margin: 0 auto;
    background: black;
    opacity: 0.7;
    color: white;
    padding: 10px 50px;
    min-height: 200px;
}
#content-div-one {
    color: #E97C2B;
    background: #f1efef;
    text-align: center;
    min-height: 300px;
}
#content-div-one button {
    color: white;
    background-image: linear-gradient(to right, #105e7b , #44b649);
    box-shadow: 3px 3px 6px black;
    border: none;
    font-size: 170%;
    font-weight: bold;
    padding: 10px 20px;
}
#content-div-one button:hover {
    font-size: 175%;
    transition: all 0.2s;
    box-shadow: 6px 6px 6px black;
}
#content-div-one button:focus {
    outline:0;
}
.container-fluid {
    margin: 0 !important;
    padding: 0 !important;
}
#banner-container {
    background-image: url('/images/family.jpg');
    background-size: cover;
    min-height: 500px !important;
    padding-top: 20%;
    position: relative;
}
#banner-text-div {
    color: white;
    margin: 0 auto;
    width: 70% !important;
    text-align: center;
    position: absolute;
    left: 15%;
    bottom: 14%;
}
#banner-text-div h1 {
    font-size: 400%;
    font-weight: bolder;
    font-style: italic;
}
#banner-text-div h2 {
    font-size: 340%
}
#content-div-one h2 {
    font-size: 300%;
    font-weight: bold;
    margin-top: 5%;
}
#content-div-one-span {
    font-size: 300%;
}
#content-div-two h2 {
    text-align: center;
    color: #59A553;
    margin-top: 8%;
}
#content-div-two p {
    text-align: center;
    color: #306577;
    font-size: 150%;
    /*margin-bottom: 6%;*/
}
#content-div-two h2 span {
    font-weight: bolder;
}
#content-div-two ul {
    color: #306577;
    font-size: 150%;
    margin: 5% 10%;
    line-height: 200%;
}
#form-div {
    background: #f1efef;
}
#form-div h2, #media-mentions-div h2 {
    text-align: center;
    color: #59A553;
    margin-top: 10%;
    margin-bottom: 5%;
}
#form-div h2 span, #media-mentions-div h2 span {
    font-weight: bolder;
}
#form {
    background: white;
    padding: 5%;
    box-shadow: 1px 1px 10px black;
    width: 50% !important;
    margin: 0 auto;
}
#form section p {
    font-size: 150%;
    color: #306577;
    margin-top: 10%;
}
#form section select, #form section input[type='text'], #form section input[type='number'], #form section input[type='email'] {
    width: 100%;
    border: 2px solid #306577;
    background: #f1efef;
    font-size: 175%;
    margin-bottom: 5%
}
#form section select {
    height: 45px !important;    
}
#form-btn {
    width: 50%;
    margin: 5% 25%;
    text-align: center;
    color: white;
    background-image: linear-gradient(to right, #105e7b , #44b649);
    box-shadow: 3px 3px 6px black;
    border: none;
    font-size: 170% !important;
    font-weight: bold;
    padding: 10px 20px;
    margin-bottom: 10%;
}
#form-btn:hover {
    font-size: 175%;
    transition: all 0.2s;
    box-shadow: 6px 6px 6px black;
}
#form section input[type='radio'] {
    margin: 0px 10px;
}
#form-section-two span {
    margin-right: 10%;
    font-size: 120%;
}
#form-section-three p:first-child {
    color: #E97C2B;
}
#greeting-text {
    font-style: italic;
    text-align: center;
    font-size: 200% !important;
}
#media-mentions-div {
    margin-bottom: 8%;
}
#footer {
    background: grey;
    color: white;
}

我的JS文件：

var sectionNumber = 2;

function toggleForm() {
    if (sectionNumber === 0) {
        $('#form-section-one').css('display','block');
        $('#form-section-two').css('display','none');
        $('#form-section-three').css('display','none');
    }
    else if (sectionNumber === 1) {
        $('#form-section-one').css('display','none');
        $('#form-section-two').css('display','block');
        $('#form-section-three').css('display','none'); 
    }
    else if (sectionNumber === 2) {
        $('#form-section-one').css('display','none');
        $('#form-section-two').css('display','none');
        $('#form-section-three').css('display','block');
    }
    else {

    }
}

toggleForm();

我期望（如上所述）是页脚应位于页面底部，而不与页面上方的元素重叠。

我期望的是：

我得到的是什么

谢谢

Answer 1

为页脚部分上方的内容添加包装行 Check this fiddle

<div class="row">
    <div class='col-md-offset-1 col-md-10 col-sm-offset-1 col-sm-10 col-xs-12' 
    id="media-mentions-div"></div>
 </div>

页脚展示异常行为

1 个答案: