底部的HTML页脚

Question

I am trying to program a website with HTML. This works very well, but I want the footer to be at the bottom of the website!

footer {        
    background-color: #F2F2F2;
    border: 1px solid #DEDCD9;
    border-radius: 5px;
    clear: both;
}

no error

Answer 1

Here is a 2-column layout with the footer always at the bottom , also using Bootstrap 4 grid for responsiveness:

 #wrapper { min-height: 100vh; } 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> <div id="wrapper" class="d-flex flex-column"> <nav class="navbar navbar-expand-md bg-dark navbar-dark"> <!-- Brand --> <a class="navbar-brand" href="#">Brand</a> <!-- Toggler/collapsibe Button --> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar"> <span class="navbar-toggler-icon"></span> </button> <!-- Navbar links --> <div class="collapse navbar-collapse" id="collapsibleNavbar"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> </ul> </div> </nav> <div class="container mt-3"> <div class="row"> <div class="col-sm-12 col-md-8 col-lg-9"> <p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut quas quae placeat non, eligendi odio, sit animi corporis unde fugiat ex est reprehenderit voluptas facilis quo amet nisi consequuntur perferendis.</p> <p class="text-justify">Eius reiciendis, modi nam magni, vel et, labore sit perspiciatis obcaecati illo aspernatur laboriosam, sed veritatis nisi deleniti quae alias nesciunt. Et possimus, reprehenderit voluptatibus officiis consequatur illo architecto magnam!</p> <p class="text-justify">Qui tempora deserunt, corrupti soluta obcaecati ab fugiat consectetur? Asperiores ullam aliquid recusandae doloribus voluptate ipsa. Reprehenderit aspernatur est dolore ipsum voluptatum doloribus atque suscipit. Quod voluptatum, facere temporibus iure.</p> <p class="text-justify">Ipsum quasi, iste fugit doloribus accusantium natus provident, dolorum molestiae alias. Quo earum explicabo corporis assumenda autem ratione ea corrupti tenetur, fugit esse doloremque, laborum, ab iste eum. Mollitia, consectetur!</p> <p class="text-justify">Eligendi dolores nisi quibusdam, officia earum neque harum iure reprehenderit voluptates, veritatis quaerat deserunt ratione porro itaque rem voluptatum minima similique temporibus unde! Quaerat laborum ullam optio sequi quae quidem!</p> </div> <div class="col-sm-12 col-md-4 col-lg-3 mb-3"> <ul class="list-group"> <li class="list-group-item">First item</li> <li class="list-group-item">Second item</li> <li class="list-group-item">Third item</li> </ul> </div> </div> </div> <div class="footer mt-auto text-center p-2 bg-light"> &copy; Lorem ipsum dolor sit amet </div> </div> 

Hope it helps.