<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>DIV自适应底部</title>
<script src="jquery.min.js" type="text/javascript"></script>
<script>
$(function(){
res();
});
window.onresize = res;
function res(){
var one = $(window).height();
var gao = $(".in").height();
if (one>=gao){
$(".end").css({'position':"absolute"})
}else{
$(".end").css({'position':"relative"})
}
}
</script>
<style type="text/css">
* {margin: 0px;padding: 0px;list-style-type: none;}
html.body {height: 100%;width: 100%;}
.top {background-color: #F00;height: 100px;width: 100%;}
.in {float: left;height: auto;width: 100%;background-color: #00F;color:#FFF;}
.end {background-color: #F00;width: 100%;left: 0px;bottom: 0px;float: left;height: 100px;}
</style>
</head>
<div class="top">top <span class="yi"></span> | <span class="er"></span></div>
<div class="in">
<p>说明：</p>
1、获取用户浏览器当前BODY高度<br />
2、判断标签 ”in“ 的高度是否大于 body 的高度<br />
2.1、当用户的浏览器窗口 BODY 高度大于等于标签”in“的时候！标签”end“的属性等于：position:"absolute"【绝对定位】<br />
2.2、当用用户浏览器 BODY 高度小于标签 ”in“的高度时！标签”end“的属性等于：position:"none”【取消绝对定位】<br />
<br /><p><strong>特别说明：在用户不刷新页面的情况下实现以上效果</strong></p>
<br />
内容<br />
内容<br />
内容<br />
内容<br />
内容<br />
内容<br />
内容<br />
内容<br />
</div>
<div class="end">end</div>
</body>
</html>
分享到：
相关推荐
div+css设置html底部自适应窗口，内容少时bottom在窗口底部，内容多时被撑到最下方。
总的来说，通过合理设置 `li`、`ul` 和 `div` 的高度属性，以及使用 `clear:both` 解决浮动问题，我们可以实现 `div` 高度自适应 `li` 的功能。当在 `ul` 中添加更多 `li` 时，这个结构会自动扩展其高度以适应新的...
"2列左窄右宽高度自适应且未知高度底部平齐CSS模板"是一种常见的网页布局方式，这种布局通常用于创建内容丰富的网站，其中左侧栏提供导航或侧边信息，右侧栏展示主要内容。下面将详细介绍这种布局的实现原理和相关...
2. `<div>`：作为一个通用容器，可以用来组织底部导航条的布局。 3. `<a>`：定义超链接，用于跳转到不同的页面或执行特定功能。 4. `<img>`：用于显示图片，这里的图标可以是SVG格式，提供更好的响应式和矢量图形...
标题和描述中提到了关于使用JavaScript实现一个浮动的div元素能够在浏览器窗口变化时仍然保持自适应居中显示的解决方案。通过使用jQuery库来获取外围div元素的宽度，并根据其宽度来动态计算内部浮动div的位置。这个...
独行DIV自适应宽度布局是CSS布局中一种重要的技术，主要应用于创建响应式网页设计，以确保内容在不同屏幕尺寸下都能良好展示。在这样的布局中，DIV元素的宽度不是固定不变的，而是根据其所在容器的大小动态调整。这...
本文将详细探讨如何使用这些标签以及CSS来实现一个上下固定、中间自适应的布局。 首先，`<header>`标签用于定义页面的头部，通常包含网站的logo、导航链接等元素。例如： ```html 网站标题 <li><a href="#...
<div class="footer">底部</div> ``` 在这个例子中，`html` 和 `body` 的高度设置为100%，确保它们完全填充视口。`.header` 和 `.footer` 有固定的背景色和内边距，`.content` 区域使用 `min-height: 100%;` ...
这个容器可以是一个`<div>`元素，设置相应的CSS样式，如`position: fixed`，`bottom: 0`，确保它始终显示在页面底部。 2. **CSS响应式设计**：利用CSS媒体查询，根据不同的屏幕尺寸定义不同的样式，确保广告在各种...
每个图片通常用`<div>`或`<img>`元素表示，隐藏除第一张外的其他图片。 3. **CSS样式**：定义轮播的布局，包括图片的初始位置、箭头和按钮的样式。使用媒体查询实现自适应效果。 4. **JavaScript逻辑**：初始化...
在本文中，我们将探讨如何使用jQuery技术来创建一个仿微信的自定义菜单，该菜单能自适应手机底部，并具有良好的样式效果。这个功能对于提升移动Web应用的用户体验至关重要，特别是对于那些希望提供无缝交互体验的...
`**：距离底部20像素。 - **`left: 47%;`**：水平位置偏移量。 - **`span`**：定义单个导航点样式。 - **`float: left;`**：左浮动，排列导航点。 - **`margin-left: 3px;`**：左右间隔。 - **`.show`**：当前...
<div id="footer">网站底部</div> ``` 在这个例子中，"header"、"content"和"footer"分别代表了网页的头部、主体内容和底部，这样的结构便于我们进行模块化的布局设计。 二、CSS基础 CSS是控制网页外观和布局的...
在构建底部菜单时，我们通常会使用`<div>`元素作为容器，然后用`<ul>`和`<li>`元素来创建列表项，每个列表项对应一个菜单按钮。例如： ```html <div class="wechat-menu"> 首页 发现 聊天 我 </div> ``` ...
流式布局使内容按顺序自适应屏幕宽度，适合窄屏设备；网格布局将页面划分为多个等宽或不等宽的单元格，便于组织复杂内容；响应式布局则根据设备特性动态调整布局，提供一致的用户体验。 Div+CSS实例则可以帮助初学...
3. 布局应用场景：Div常用于创建网页的主要区域，如头部、主体、侧栏和底部等部分，也可以用于实现复杂的网格系统。 二、CSS在网站布局中的关键角色 1. 样式控制：CSS提供了丰富的样式规则，包括颜色、字体、背景...
通过设置不同的Div，我们可以将网页划分为多个独立的区域，如头部、主体、侧边栏和底部等。每个Div可以有自己的样式和行为，方便管理和调整网页布局。 CSS（Cascading Style Sheets）则是用于描述HTML或XML（包括如...
在本课程设计中，你将学习到如何使用`div`来构建基本的网页布局，如头部、主体和底部等部分。同时，通过实践，你会掌握如何使用浮动（`float`）、定位（`position`）以及Flexbox或Grid布局来实现更加灵活的布局模式...
4. 自适应布局：悬浮层应具有响应式设计，适应不同设备和屏幕尺寸。 5. 用户行为跟踪：记录用户对悬浮层的互动，以便优化展示策略。 总结，Div悬浮层的实现涉及到HTML布局、CSS样式控制以及JavaScript事件处理。...
在网页设计中，DIV常被用于构建页面的结构，如头部、主体、侧边栏和底部等部分。 CSS（Cascading Style Sheets）则是用于描述HTML或XML（包括SVG、MathML等各种XML方言）文档样式的样式表语言。它允许我们将样式...