html div显示页面中间,使一个div始终显示在页面中间

使一个div始终显示在页面中间

假设我们有一个div层:

首先,我们用css来控制它在水平上始终居中,那么我们的css代码应该是这样:

*{margin:0;padding:0;}

#myDiv{width:400px;height:200px;margin:0 auto;}

这里的400px是你需要居中设置的div的宽度,200px是它的高,margin:0 auto;是控制水平居中的代码

jquery代码应该是这样:

$(function{

//获得当前浏览器的内部高(即:不包含外边框和地址栏,工具栏的高)

var height = window.innerHeight;

//设置内容显示在中间

//这里的200是你要居中显示的div层的高,注意这里没有px

if(height> 200){

//设置要居中显示的div层的外边距

//myDiv是它的id

$("#myDiv").css("margin-top",(height-200)/2);

}

//设置当浏览器的大小改变时触发的事件

$(window).resize(function(){

//获得当前浏览器的高

varheight = window.innerHeight;

//设置内容显示在中间

if(height> 200){

$("#myDiv").css("margin-top",(height-200)/2);

}

});

});

让一个div始终固定在页面的某一固定位置的方法

方法一:直接用position:fixed 方法二:写一个滚动条滚动事件,让这个div设置 position:absolute 该top的距离等于滚动的距离scrollTop() 写法如下:$(win ...

如何使一个div能够铺满整个页面? && 模态框的制作 && outerHTML

说明: 使用 ele.outerHTML = '' 这样的方法可以很容易的清除一个元素. 当然也可以使用parent.removeChild() ,但是相较而言,还是使用 outerHTML = '' ...

jquery怎么实现点击一个按钮控制一个div的显示和隐藏

示例html 1 2

VC使一个对话框不显示

//add  this void CbkDlg::OnNcPaint() {     ShowWindow(SW_HIDE);     CDialog::OnNcPaint(); }     初始化时 ...

使一个div元素上下左右居中

第一种方法 浮动流自我调节 .box{ widht:200px; height:200px; position:relative; } .box .son{ width:100px; height:1 ...

jQuery 移入显示div,移出当前div,移入到另一个div还是显示。

jQuery 移入移出 操作div 1

div中显示页面

在css中显示页面,在页面布局中很多时候都要在一个div 里显示某些页面.在这里写下我用到的一种方式.

JQuery 弹出层,始终显示在屏幕正中间

1.让层始终显示在屏幕正中间: 样式代码: .model{ position: absolute; z-index: 1003; width:320px; height:320px; text-ali ...

jquery判断div是否显示或者隐藏

jquery判断div是否显示或者隐藏 很多时候会要判断一个div是不是显示着,没显示要怎么处理,显示的如何处理: 方法很简单,选择到你要判断的div,再用is(':hidden')判断是否隐藏:或者 ...

随机推荐

iOS修改button的点击范围

一般来说,按钮的点击范围是跟按钮的大小一样的.若按钮很小时,想增大点击区域,网上通用的方法有①设置btn图片setImage,然后将btn的size设置的比图片大②在btn上添加一个比较大的透明btn ...

PHP面向对象——静态属性和静态方法

静态属性 所谓静态属性,也就是这个属性对于这个类来说是唯一的,不管有多少个对象,只要它引用了一个静态对象,那么这些对象引用出来的值肯定是同一个. 静态变量不能使用->这种箭头符号,而是使用::这 ...

C/C++时间函数的使用

来源:http://blog.csdn.net/apull/article/details/5379819 一.获取日历时间time_t是定义在time.h中的一个类型,表示一个日历时间,也就是从19 ...

iOS开发—— UIImagePickerController获取相册和拍照

一.简单的拍照显示,或是从相册中直接选取照片 #import "ViewController.h" @interface ViewController ()

MySQL连接问题【如何解决MySQL连接超时关闭】

--MySQL连接问题[如何解决MySQL连接超时关闭] ------------------------------------------------转载 最近做网站有一个站要用到WEB网页采集器 ...

JAVA基础2——类初始化相关执行顺序

类初始化相关执行顺序 几个概念说明 代码块的含义与作用 static静态代码块: 一般用于初始化类中的静态变量.比如:给静态的数组或者list变量赋初值.使用static静态代码块进行初始化与直接在定 ...

Java sax、dom、pull解析xml

-------------------------------------SAX解析xml---------------------------------- >Sax定义 SAX是一个解析速度 ...

IFE第二天

HTML是超文本标记语言,HTML5是下一代的HTML标准. HTML元素是组成HTML文档的部分,HTML属性为HTML元素提供附加信息. 文档类型声明帮助浏览器正确 ...

matplotlib 生成 eps 插入到 tex

matplotlib 生成 eps 插入到 tex matplotlib 生成 eps,就可以插入到 tex 中,而且是矢量图,放大不失真. 而且因为图中的元素都是嵌入到 pdf 中,所以图中的文字也 ...

Python函数部分(1)

之前,我们编代码时程序遵循的原则是:根据逻辑从上至下实现功能,其往往用一大段代码来实现指定功能,开发过程中最常见的操作就是粘贴复制,也就是将之前实现的代码块复制到现需功能处.这种方式虽然可以应付一般性 ...

  • 0
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值