需求信息:页面底部有一个高度未知的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>
完美解决问题
由于工作需要长期使用Ajax,一个页面重复的AJAX请求太多,于是封装起来,只需要编写回调函数/* ------------- 使用方法: 1.ajaxrequest()函数执行准备的参数(1.请求地址2.发送数据字符串拼接3.type值可选get/post4.回调函数名称) exam...
WebSql的原理是浏览器集成了sqllite数据库,Js操作,浏览器协助完成,没有多复杂。<!-- 三个核心方法  ...
捕捉模式从DOM最顶层一直到最后一层,冒泡正好相反,具体运行以下实例测试.<!DOCTYPE html> <html> <head> <title>捕捉和冒泡</title> <meta charset="...
<form action="save.php" method="post" target="nm_iframe"> &nbs...
<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> </head> <body>...
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body>...