在网页设计中,我们经常会用到div元素来排版,同时也需要将div元素置于页面底部。那么如何使用CSS来实现这个效果呢?接下来用代码实例来介绍。 首先是HTML代码: 这是底部内容 这里我们定义...
在网页设计中,我们经常会用到div元素来排版,同时也需要将div元素置于页面底部。那么如何使用CSS来实现这个效果呢?接下来用代码实例来介绍。
首先是HTML代码:
<body>
<div class="container">
<p>这是底部内容</p>
</div>
</body>
.container {
position: fixed; /* 将元素设置为绝对定位 */
bottom: 0; /* 元素所在位置靠底部 */
left: 0; /* 元素所在位置靠左 */
width: 100%; /* 元素宽度为100% */
background-color: #ccc; /* 元素背景颜色 */
padding: 10px; /* 元素内边距 */
box-sizing: border-box; /* 将内边距和边框计算到元素宽度中 */
}