如何在没有包装的情况下将div粘贴到页面底部

所以我正在构建我的网站，这是我身体标签中的全部内容：

   #social-media {
	    width: 175px;
	    margin-left: auto;
	    margin-right: auto;
	    padding-top: 10%;
    }
    #social-media img {
	    padding: 5px;
    }
    #social-media ul li {
	    display: inline;
    }

    <div id="logo"></div>
    <div class="search">
      <form action="search.php" method="get">
      <input name="keywords" type="text" placeholder="Search for a movie!" autocomplete="off" size="40">
        <input type="submit" value="DRINK!">
      </form>
    </div>
    <div id="social-media"> 
    <img src="facebook2.png">
    <img src="twitter2.png">
    </div>

无论用户在什么设备上观看，我都试图将社交媒体div固定在页面底部，有可能在没有包装的情况下做到这一点吗？

如果希望它始终显示在屏幕底部，则使用

#social-media {
    positioning: fixed;
    bottom: 0;
}

W3Schools的文档可以在这里找到

如果你想确保它总是在实际页面的底部（在其他内容下方），那么试试：

#social-media {
    clear: both;
}

您似乎需要将div"绝对"定位在底部，如下所示：

#social-media {
    width: 175px;
    margin-left: auto;
    margin-right: auto;
    position:absolute;
    left:0;
    right:0;
    bottom:0;
}
#social-media img {
    padding: 5px;
}
#social-media ul li {
    display: inline;
}

<body>
<div id="logo"></div>
<div class="search">
  <form action="search.php" method="get">
  <input name="keywords" type="text" placeholder="Search for a movie!" autocomplete="off" size="40">
    <input type="submit" value="DRINK!">
  </form>
</div>
<div id="social-media"> 
<img src="facebook2.png">
<img src="twitter2.png">
</div>
</body>

相关内容

最新更新

热门标签：