如何让一个div固定在另外一个有滚动条的div底部

如何让一个div固定在另外一个有滚动条的div底部,第1张

你要的是不是这种效果

类名为sub的div在类名为parent的div的底部。

方法:

1设置父div属性position: relative;

2设置子div属性position: absolute; buttom: 0;

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
<style>
  parent{position: relative; background: #ccc;width:600px; height: 1200px;}
  sub{position: absolute; bottom: 0; background: red;width: 200px;height: 200px;}
</style>
</head>
<body>
<div class="parent">
  <div class="sub">
  </div>
</div> 
</body>
</html>

<html>
<head>
<title>Test</title>
</head>
<body>
<div style="height:100%;width:100%;background-color:#ccc; margin-bottom: -30px">
<div style="height: 100%; padding-bottom: 30px;float: left">
Your Content
</div>
</div>
<div style="width:100%;background-color:#E00;height:30px;margin-top:-30px;">
Your Footer
</div>
</body>
</html>

<body>
<div id="div1" style="width:100px; height:100px; background:#ccc";></div>
</body>
<script>
var oDiv = documentgetElementById('div1');
oDivstyleposition = 'fixed';
oDivstyletop = '20px';
oDivstyleleft = '20px';
</script>
主要思想就是,在js中修改div的位置。所有的赋值,都可以计算后再传值,这样就不想CSS中只能写一个值了。

可以用css定位把一个div放到另一个div右下角。

1、新建html文档,在body标签中添加一个div标签,然后在这个div标签内再添加一个div标签,为外面的div标签添加“container”类,里面的div标签添加“inner”类:

2、在head标签内添加style标签,为“container”类和“inner”类分别设置样式,这时默认情况下内div在外div的左上角:

3、为外div添加样式“position: relative;”,为内div添加样式“position: absolute;right: 0;bottom: 0;”,这时内div将会在外div的右下角:


欢迎分享,转载请注明来源:内存溢出

原文地址:https://54852.com/yw/10416886.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2023-05-08
下一篇2023-05-08

发表评论

登录后才能评论

评论列表(0条)

    保存