需求信息:页面底部有一个高度未知的banner广告页面,要求一直固定显示在底部的位置。剩下的高度用来显示非广告内容,支持滚动,两个元素区域不能重叠。且两个区域的高度未知。不能依赖Js
参考代码如下:
<!DOCTYPE html> <html lang="en"> <head> <style> body { display: flex; flex-direction: column; min-height: 100vh; } .main-content { flex: 1; } .bottom-component { position: sticky; bottom: 0; background-color: #f0f0f0; padding: 10px; } </style> </head> <body> <div class="main-content"> <!-- 这里是原来页面的主要内容 --> <h1>这是页面的主要内容</h1> <p>一些文本内容...</p> <img src="image.jpg" alt="示例图片"> </div> <div class="bottom-component"> <!-- 这是底部组件的内容 --> <h2>底部组件</h2> <p>一些底部的信息...</p> </div> </body> </html>
完美解决问题
离线缓存的开启实例使用apache设置 1.apache配置文件搜索Addtype,我的addtype已经存在项目,如下 AddType application/x-compress .Z AddType application/x-gz...
捕捉模式从DOM最顶层一直到最后一层,冒泡正好相反,具体运行以下实例测试.<!DOCTYPE html> <html> <head> <title>捕捉和冒泡</title> <meta charset="...
<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> </head> <body>...
开发需求如下,商品下单后需要指定送到日期:送达日期为周一 周三 周六 ,如果今天周一,用户选择周一即为下一周周一。代码如下:<html> <head> <meta charset="utf-8"> <title>...
查看文章前你需要了解以下2点://1.this指向的是windows对象,通过console.log(this)可以查看到对象包含所有的方法和属性//2.全局变量属于this对象的属性通过console.log(this)可以查看到对象包含我们设置的全局变量我们经常在创建相同结构的Js对象会重复的设...
//原型的缺点 function Box(){} Box.prototype={ 'name':'gao', age:23, family:['哥哥','姐姐','妹妹'], &...