html侧边栏居中的图像页脚

Question

我正在为我的网站制作一个新的侧边栏，如果您在完整窗口中查看下面的代码片段，您可以看到“sideBarFooter”元素（其中包含图像和其下方的一些文本）。

我试图让这个页脚始终位于侧边栏的底部，我尝试添加 margin-top 和 margin-bottom 样式但没有运气。如何将我的 sideBarFooter 对齐到我的侧边栏元素的底部？

$(document).ready(function() {

  $('#sidebarCollapse').on('click', function() {

    $('#sidebar').toggleClass('active');

  });

});

Answer 1

使用您的示例作为基础，您只需要添加一些样式就可以了。我做了什么：body并且html有height: 100%;.wrapper有height: 100%#sidebar有display: flex;，flex-direction: column;这使它垂直。#sideBarFooter有margin-top: auto$(document).ready(function() {&nbsp; $('#sidebarCollapse').on('click', function() {&nbsp; &nbsp; $('#sidebar').toggleClass('active');&nbsp; });});@import "https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700";body {&nbsp; font-family: 'Poppins', sans-serif;&nbsp; background: #ffffff;}p {&nbsp; font-family: 'Poppins', sans-serif;&nbsp; font-size: 1.1em;&nbsp; font-weight: 300;&nbsp; line-height: 1.7em;&nbsp; color: #999;}.btn-info {&nbsp; color: #fff;&nbsp; background-color: #b81717;&nbsp; border-color: #52b817;}a,a:hover,a:focus {&nbsp; color: inherit;&nbsp; text-decoration: none;&nbsp; transition: all 0.3s;}.navbar {&nbsp; padding: 15px 10px;&nbsp; background: #fff;&nbsp; border: none;&nbsp; border-radius: 0;&nbsp; margin-bottom: 40px;&nbsp; box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);}.navbar-btn {&nbsp; box-shadow: none;&nbsp; outline: none !important;&nbsp; border: none;}.line {&nbsp; width: 100%;&nbsp; height: 1px;&nbsp; border-bottom: 1px dashed #ddd;&nbsp; margin: 40px 0;}body,&nbsp;html {&nbsp; height: 100%;}/* ---------------------------------------------------&nbsp; &nbsp; &nbsp; &nbsp; SIDEBAR STYLE&nbsp; &nbsp; ----------------------------------------------------- */.wrapper {&nbsp; display: flex;&nbsp; width: 100%;&nbsp; align-items: stretch;&nbsp; height: 100%;}#sidebar {&nbsp; min-width: 250px;&nbsp; max-width: 250px;&nbsp; background: #f7f9fb;&nbsp; /* NAVBAR BACKGROUND */&nbsp; color: rgb(0, 0, 0);&nbsp; transition: all 0.3s;&nbsp;&nbsp;&nbsp; display: flex;&nbsp; flex-direction: column;&nbsp;&nbsp;}#sidebar.active {&nbsp; margin-left: -250px;}#sidebar .sidebar-header {&nbsp; padding: 20px;&nbsp; /* background: #6d7fcc; */}#sidebar ul.components {&nbsp; /* padding: 20px 0; */&nbsp; /* border-bottom: 1px solid #47748b; */}#sidebar ul p {&nbsp; color: #fff;&nbsp; padding: 10px;}#sidebar ul li a {&nbsp; padding: 10px;&nbsp; font-size: 1.1em;&nbsp; display: block;}.currentPage,.currentPage * {&nbsp; background: #bed6b8 !important;}#sidebar ul li a:hover {&nbsp; color: #000;&nbsp; background: #8FC1E3;&nbsp; /* hover tab color */}#sidebar ul li.active>a,a[aria-expanded="true"] {&nbsp; /* color: #fff; */&nbsp; background: #f7f9fb;&nbsp; /* active tab */}a[data-toggle="collapse"] {&nbsp; position: relative;}.dropdown-toggle::after {&nbsp; display: block;&nbsp; position: absolute;&nbsp; top: 50%;&nbsp; right: 20px;&nbsp; transform: translateY(-50%);}ul ul a {&nbsp; font-size: 0.9em !important;&nbsp; padding-left: 30px !important;&nbsp; background: #f7f9fb;&nbsp; /* tab list color */}ul.CTAs {&nbsp; padding: 20px;}ul.CTAs a {&nbsp; text-align: center;&nbsp; font-size: 0.9em !important;&nbsp; display: block;&nbsp; border-radius: 5px;&nbsp; margin-bottom: 5px;}/* ---------------------------------------------------&nbsp; &nbsp; &nbsp; &nbsp; CONTENT STYLE&nbsp; &nbsp; ----------------------------------------------------- */#content {&nbsp; width: 100%;&nbsp; padding: 20px;&nbsp; min-height: 100vh;&nbsp; transition: all 0.3s;}/* ---------------------------------------------------&nbsp; &nbsp; &nbsp; &nbsp; MEDIAQUERIES&nbsp; &nbsp; ----------------------------------------------------- */@media (max-width: 768px) {&nbsp; #sidebar {&nbsp; &nbsp; margin-left: -250px;&nbsp; }&nbsp; #sidebar.active {&nbsp; &nbsp; margin-left: 0;&nbsp; }&nbsp; #sidebarCollapse span {&nbsp; &nbsp; color: pink display: inline;&nbsp; }}/* Sidebar expand/collapse button */#sidebutton {&nbsp; margin-left: 100%;&nbsp; box-shadow: 0px 1px 4px 1px rgba(0, 0, 0, .3);&nbsp; border: none;&nbsp; height: 40px;&nbsp; width: 40px;&nbsp; border-radius: 50%;&nbsp; cursor: pointer;}#sideBarFooter{&nbsp; margin-top: auto;}<!-- jQuery CDN - Slim version (=without AJAX) --><script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script><!-- Popper.JS --><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script><!-- Bootstrap JS --><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script><!-- bootstrap css--><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"><!-- jQuery --><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script><!-- Page Content --><div class="wrapper" class="toggled">&nbsp; <!-- Sidebar&nbsp; -->&nbsp; <nav id="sidebar">&nbsp; &nbsp; <div class="sidebar-header">&nbsp; &nbsp; &nbsp; <h3>Website Title</h3> <button id='sidebutton'>M</button>&nbsp; &nbsp; </div>&nbsp; &nbsp; <ul class="list-unstyled components">&nbsp; &nbsp; &nbsp; <li class="currentPage">&nbsp; &nbsp; &nbsp; &nbsp; <a href="#">Home</a>&nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; <li>&nbsp; &nbsp; &nbsp; &nbsp; <a href="#">About</a>&nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; <li>&nbsp; &nbsp; &nbsp; &nbsp; <a href="#contactSubmenu" data-toggle="collapse" aria-expanded="true" class="dropdown-toggle">Contact</a>&nbsp; &nbsp; &nbsp; &nbsp; <ul class="collapse list-unstyled" id="contactSubmenu">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a href="#">Email</a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a href="#">Github</a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a href="#">LinkedIn</a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a href="#">Resume</a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; &nbsp; </ul>&nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; </ul>&nbsp; &nbsp; <!-- Footer -->&nbsp; &nbsp; <div id='sideBarFooter' class="sidebar-footer">&nbsp; &nbsp; &nbsp; <img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com">&nbsp; &nbsp; &nbsp; <p>Color 1: #657856</p>&nbsp; &nbsp; &nbsp; <p>Color 2: #657856</p>&nbsp; &nbsp; &nbsp; <p>Color 3: #657856</p>&nbsp; &nbsp; </div>&nbsp; </nav></div>

Answer 2

几件事：height: 100vh首先，元素的父级（在这种情况下#sidebar）应该有 100% 的视口高度。你vh问什么？更多关于这里。position: absolute,bottom: 0现在您可以使用position: absoluteand&nbsp;bottom: 0。这会将所述页脚带到页面底部。为什么要迈出第一步？实际上，这无需第一步就可以工作，但是#sidebar不会从上到下，因此会影响灰色背景。#sidebar&nbsp;{&nbsp;&nbsp; /*&nbsp;etc...&nbsp;*/ &nbsp;&nbsp;height:&nbsp;100vh &nbsp;&nbsp;}#sideBarFooter{&nbsp; &nbsp;position:&nbsp;absolute;&nbsp; &nbsp;&nbsp;bottom:&nbsp;0}工作示例快乐的黑客，BobbbayPS 不要将ids 与 CSS 一起使用。这是一个不好的做法。

Answer 3

您可以使用 id 侧边栏向导航元素添加display: flex和flex-direction: column设置高度。height: 100vh然后你只需要给出页脚margin-top: auto，它就会在社交上与其他元素保持距离。快速提示：不要按他们的 ID 设置样式，这是不好的做法。这是MDN 用于他们的 CSS的一些其他规则，我发现它很有帮助。

Answer 4

您应该尝试将侧边栏页脚定位到绝对位置。尝试将此添加到您的 css ：#sideBarFooter{&nbsp; position:absolute;&nbsp; bottom : 0;}