后使用快捷导航没有帐号？
只需一步，快速开始
查看: 3013|回复: 5
1个不固定高度的div能在屏幕中实现垂直居中吗
UID69013在线时间 小时积分132帖子离线17312 天注册时间
初级会员, 积分 132, 距离下一级还需 68 积分
如题，注意body中只有一个div标签，没其他标签了，且不用js 能实现吗？求解。。昨天被bs了....
UID408448在线时间 小时积分457帖子离线17312 天注册时间
中级会员, 积分 457, 距离下一级还需 43 积分
只有一层很难控制，FF下的原理是转成table-cell，再设置vertical-align: middle垂直居中；
IE6/7下要用到定位，先让外层距上50%显示，再把内层负上本身高度的50%，这样就垂直居中了。
&!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&&
&meta http-equiv=&Content-Type& content=&text/ charset=gb2312& /&
&title&middle&/title&
* { margin: 0; padding: 0; }
body { background: #f0f0f0; font: normal 18px/1.5 Microsoft Y }
html, body { height: 100%; }
.outer { width: 100%; height: 100%; background: # display: *position: }
.middle { display: table- vertical-align: *position: *top: 50%; }
.inner { width: 400 margin: 0 *position: *top: -50%; }
&div class=&outer&&
&div class=&middle&&
&div class=&inner&&不固定高度垂直居中，文字再多一点。。。&br /&这里是换行。&br /&再多换几行测试。。&br /&演示一下有没有问题&/div&
&提示：您可以先修改部分代码再运行
[[i] 本帖最后由 lily0219 于
17:15 编辑 ]
UID69013在线时间 小时积分132帖子离线17312 天注册时间
初级会员, 积分 132, 距离下一级还需 68 积分
那就是被人诓了，一层我也没搞出来，有两个层就好搞定了
UID511323在线时间 小时积分114帖子离线17312 天注册时间
初级会员, 积分 114, 距离下一级还需 86 积分
&!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&&
&meta http-equiv=&Content-Type& content=&text/ charset=gb2312& /&
&title&标题&/title&
&style type=&text/css&&
height:100
margin-top:-50
&div&垂直居中&/div&
&提示：您可以先修改部分代码再运行
看过有高手类似这样写过。
UID507251在线时间 小时积分992帖子离线17312 天注册时间
高级会员, 积分 992, 距离下一级还需 8 积分
前几天的帖子有人问过这个问题了，也有比较好的方法
UID69013在线时间 小时积分132帖子离线17312 天注册时间
初级会员, 积分 132, 距离下一级还需 68 积分
原帖由 [i]cnlongxi 于
21:25 发表
& & & & margin:0
& & & & padding:0
& & & & position:
& & & & top:50%;
& & & & position:
& & & & height:100
& & & & margin-top:-50
& & & & border:1
这个div高度不能固定啊，还有如果内容再多加几行的话，内容就往下偏了
Powered by本帖子已过去太久远了，不再提供回复功能。后使用快捷导航没有帐号？
只需一步，快速开始
查看: 12947|回复: 8
div 带滚动条高度自适应屏幕的问题
UID219679在线时间 小时积分413帖子离线17312 天注册时间
中级会员, 积分 413, 距离下一级还需 87 积分
本帖最后由 hellosj 于
10:26 编辑
aa.jpg (9.79 KB, 下载次数: 0)
10:25 上传
上左右结构布局，要求上面固定高度，左侧根据分辨率的高度自适应，右侧高度也根据分辨率的高度自适应，超出分辨率高度后出现滚动条。请教各位大虾如何实现呢？ 主要是右侧这个效果，谢谢先！
UID673852在线时间 小时积分61帖子离线17312 天注册时间
提示: 作者被禁止或删除。
UID403361在线时间 小时积分72帖子离线17312 天注册时间
初级会员, 积分 72, 距离下一级还需 128 积分
*{margin:0;padding:0;}
.top{height:100background:}
.left_right_heig{background:}
&div class=&top&&111&/div&
&div class=&left_right_heig&&222&/div&
& & & & var maxh = $(window).height();
& & & & var toph = $(&.top&).height();
& & & & $(&.left_right_heig&).height(maxh-toph);
UID494384在线时间 小时积分8060帖子离线17312 天注册时间
楼上，你的 JQ 没加上 左右的宽度楼主没说，就随便写个吧
&!DOCTYPE html&
&meta charset=&utf-8& /&
&title&demo&/title&
html, body, div, h1, p {
padding: 0;
html, body {
height: 100%;
overflow: hidden
text-align:
width: 100%;
line-height: 100
text-align:
height: 100
background-color: #
.aside, .main {
background-color: #
width: 200
overflow-x:
overflow-y: scroll
.main h1 {
padding: 40px 0 30px
line-height: 1.8;
padding: 0 20
margin-bottom: 14
text-indent: 2em
&div class=&slogan&&
&h1&Slogan Here&/h1&
&div class=&aside&&
&h1&Aside Here&/h1&
&div class=&main&&
&h1&谁的梦想不曾艰难过，但都是靠苦逼的坚持&/h1&
&p&你敢与自己的兴趣死磕到底吗？你相信为梦想付出能得到收获吗？我相信，因为任何一件事情都不可能立竿见影，兴趣是动力，还有时间的考验以及自己坚持不懈的努力。比如考四六级，就算这次失败，但是你所背的单词学习到的语法掌握的语感流利好听的口语全部收入囊中。&/p&
&p&最近和读大学的表妹婷婷辅导读高中表妹佳佳课程时让我懂得了一个道理，就是不要怀疑自己的梦想，试着和坚持较较劲儿，只要自己在奋斗的过程中找准适合自己的立足点，以符合自身的方法朝着目标努力，也许能收获意想不到的结果。比如我的写作从高二坚持到现在。表妹婷婷的英语四级考第二次时才通过，目标是过六级。大学同学方方为了当英语老师不怕别人嘲笑自己牙齿不好看。&/p&
&p&先来说表妹婷婷死磕英语的过程。她英语很棒源于她喜欢英语，她说以后从事英语相关职业是她的梦想，尽管现在的她读的是医学专业。表妹婷婷说学习英语就是一场持久战，只要每天完成一点，积少成多后，时间久了会发现坚持成了生活上的一种习惯。如果觉着自己自学有难度也可以找个外教平台，之前豆瓣上推荐的阿卡索，表妹婷婷也去试了试说是还可以，有兴趣的可以去体验一下，有送免费的体验课，不用白不用：.cn/lps/lp4.aspx/?_s=db&#search=34&/p&
&p&其实梦想遥远并不可怕，可怕的是你不懂每天去耕耘，你只要每天为梦想付出一点，做出行动，把眼前的事都坚持到最后，也许就能会获得成功。真的，成功并不难，难的就是每天的坚持。坚持的过程其实就是你蓄积力量等待爆发的过程，只要你敢和坚持较真。&/p&
&p&表妹说学习英语没有什么天赋好运，都是靠自己每天的坚持与雷打不动的热爱。在学习英语过程中，表妹说她给自己下死命令，就是每天必须完成两小时的英语学习。&/p&
&p&1、娱乐中学习&br /&
看英语电视电影动画片（可以边看边读出声音模仿语气）、听英语歌曲、读英语杂志、浏览英文微博，这些都是我表妹的学习过程。她听英语歌曲几乎不听劲爆的快歌，怕太快听不清咬字以及掌握语感，她大多听一些舒缓轻快的歌曲，方便记单词找语感。至于英语电视电影，豆瓣电影区搜关键字即可，比如我搜“英国”那么就是这个页面/tag/%E8%8B%B1%E5%9B%BD&/p&
&p&2、多翻英文词典&br /&
无聊的时候，带着提高逼格的心态翻翻英文词典，学几个比较生僻又能提高逼格的单词。我表妹用的这一点，如同我读大一时喜欢翻现代汉语词典找不常用的成语词语写文章，比如铺锦列绣、芜薉、殊深轸念。&/p&
&p&3、每天必背定下的单词&br /&
表妹背单词采取传统的死记硬背，不会说今天背50个，明天又背50个单词。她今天要求背200个单词，明天温习一遍前一天背的单词，再新增100个单词，既提高词汇量，也防止遗忘。另外，最好把不容易背、容易混淆的单词写在便签条上随时记忆。那么如何利用好生活中的时间呢？我之前写了一篇文章《合理利用生活中的碎片时间，做个“有钱人”》（/note//）&/p&
&p&4、成就感助推学习动力&br /&
做一件事情如果得到100以上的人知道，肯定会产生成就感，以及不断告诉自己必须做的更好更棒。如果自己爱好英语，为什么不发挥成特长呢？比如做一个读英语美文的电台，创一个纯英文美文或者哲理句子段子笑话的微博，或者在豆瓣建立一个交写英文信的笔友，大家一起加群英文聊天，或者像一些接受英语的杂志投稿，如果能力好，也可以尝试去翻译外国文学作品，这些都是既让爱好得到发挥，也展现成就感。&/p&
&p&5、多听多读多写&br /&
下载听英语的APP找那种短小的文章或者句子在听的时候默写出来，多读中英文对照的中外名著，先听一遍教材的磁带，然后进行手机录音读一篇，最后对照教材标准读法与自己读出来的区别&/p&
&p&表妹婷婷对英语不依不饶的坚持让我想起我读大学时同学方方，一个很可爱的女生，时常面带微笑。方方说自己外表虽然不漂亮，又带着牙套，但她依然选择微笑，她说爱笑的女生总会给别人留下温暖的印象。&/p&
&p&刚进大学时，几乎每一堂课的老师都会让同学们起来自我介绍，说说大学计划，谈谈个人的梦想与人生目标。当时方方坐我前面，我仍然记得她在每一次自我介绍时，都会说“我的梦想是当英语老师，虽然我牙齿不好看，也没有火辣的身材，但我相信坚持的力量”但说完都会引来同学们的笑声。&/p&
&p&我问过方方，你为什么那么想当英语老师，方方说，她读初中上英语课时，有一回英语老师要选一名英语课代表，要求同学们毛遂自荐，当时底下的同学们像炸开锅的蚂蚁沸腾着，但没人举手。她也想举手说自己当英语课代表，有好几次都小声嘀咕说老师让我来吧，可她还是没勇气举手。&/p&
&p&就在老师再三询问强调后，方方说自己闭着眼睛大声喊了一句，让我来当英语课代表。当时教室里沸腾的声音瞬间凝固了，连老师也疑惑，接着老师问方方，为什么想当英语课代表？她回答说，因为自己的梦想就是以后当一名英语老师，能说一口流利的英语和外国人对话。&/p&
&p&当时，同学们听了她的梦想后哄堂大笑，几个调皮的男生对她说，你牙齿又不好看，声音也不好听，个子矮小，而且英语说得更不好，还想当英语老师，别做梦了。方方那一瞬间觉得每个人都在嘲笑她，当时她感到极其委屈，想哭出来，但她还是没有这样做，因为她怕那些男生又说她丑人多作怪。最终方方没有选上英语课代表，但至那以后，她开始发奋努力，告诉自己，以后一定要当上英语老师。&/p&
&p&在大学时她当了班上的学习委员，鼓励大家学英语，她用自己的亲身经历告诉大家努力坚持的意义。她说只要你认真做一件事情并且坚持下来，那么总会得到收获。那些拖延、打击、害怕等外界因素都是对你追梦的考验，看你是否配得上你想要的梦想。&/p&
&p&大一刚进校时，方方已经开始备战英语四级考试。我每天早上去教室开门时，总会看见方方站在走廊边朗读英语，我听她大声的朗读英语单词，受到无比的鼓舞。后来，我开始像她一样，早早的去教室学习，她背英语，我练习普通话。再后来，她参加了四级考试，我也参加了普通话考试，最终的结果是，我俩都还差一点儿就成功了。于是，她告诉我说不甘心，我说我也不甘心，要不然咱们下一次再考。于是我们再一次备战考试，方方带动我很用功的学习，最终她考过了英语四级，而我也考上了普通话二甲，得了90分。&/p&
&p&我问过方方，你那么努力学英语干嘛，她说是跟自己较劲，因为初中时被同学当众瞧不起过，所以她想做出成绩给瞧不起自己的人看。方方说自己学英语是“自讨苦吃”，“明知山有虎，偏向虎山行”，她说以前做事情很拖拉，但到头来，看着身边的同学都考上了自己喜欢的大学，选择自己喜欢的专业，而自己没有考上心仪的学校。&/p&
&p&方方通过自己对英语老师这个梦想执拗的坚持，最终如愿以偿。现在的她在一所英语辅导学校当英语老师。她说自己起初去应聘时，对方嫌弃她不是专业出生，更何况拿的只是四级证。但方方说她不甘心，她第一次面试失败后就回家练习口语，教自己弟弟妹妹上课，录了一段视频后，发给领导看，领导还是觉得她底子不扎实。再后来，方方仍没死心，依然坚持，她把自己实习时获得的荣誉证书给对方看，又把学生对自己的评价录成视频给对方看，在方方的坚持下，她被破格录取了。&/p&
&p&我一直用自己的成长经历以及实际行动告诉你，这世上的成功并非全靠运气，还有日积月累一点一滴的坚持。成长中，有时候冲动、执拗、不服输的劲儿反而能帮助自己取得成功。&/p&
&p&比如你某一门考试成绩不理想，同时又受到同学的冷嘲热讽，你下定决心发誓这门课程要考好。于是你挑灯夜读，人前不显山露水，依然像以前那般对学习的事不着急，但其实私下比谁都用功努力，于是，你的付出得到了回报；比如，别人说你打篮球很菜鸟，身形不好跳舞蹈，五音不全唱歌等等，你都偏要用行动告诉别人，你说我不行，我偏要做给你看让你知道我能行。&/p&
&p&真的，很多时候，人往往不是被自己打败，而是被害怕二字打败。害怕付出得不到收获，害怕坚持到一半而放弃，害怕竞争对手强大，害怕失败后的痛苦。但是，你一直想到的是害怕，而没有去尝试，没有付诸行动去做，你怎么会知道自己到底怕不怕？&/p&
&p&人生哪有什么一蹴而就的成功，更多的是靠自己不后退的坚持。你一旦下定决心做一件事情，就要立马规划并执行，拖延害怕只会让你变成喊口号的懒汉。只要你一旦与坚持较真，说不定就会取得成功。&/p&
&script src=&http://cdn.staticfile.org/jquery/1.8.2/jquery.min.js&&&/script&
function layout(){
$(&.aside&).css(&height&,$(window).height() - 100);
$(&.main&).css(&max-height&,$(&.aside&).height()-10);
$(&.main&).css(&width&,$(window).width() - 210);
$(window).resize(function(){layout()});
&提示：您可以先修改部分代码再运行
UID219679在线时间 小时积分413帖子离线17312 天注册时间
中级会员, 积分 413, 距离下一级还需 87 积分
楼上，你的 JQ 没加上 左右的宽度楼主没说，就随便写个吧
多谢大虾哈哦。不过刚刚好像在ie8下报错了呢。不知道怎么改改? 其他浏览器表现都很赞！
UID494384在线时间 小时积分8060帖子离线17312 天注册时间
具体报错的内容是什么，有具体的代码或者截图么？
UID219679在线时间 小时积分413帖子离线17312 天注册时间
中级会员, 积分 413, 距离下一级还需 87 积分
具体报错的内容是什么，有具体的代码或者截图么？
a.jpg (79.9 KB, 下载次数: 0)
15:10 上传
就是左边栏不显示了。报js错误
UID494384在线时间 小时积分8060帖子离线17312 天注册时间
我这 IETester 的 IE8 显示正常，没报错。你看看你那 JS 语法是不是少了括号或者引号什么的。也可以把你的代码都贴出来看看。
UID219679在线时间 小时积分413帖子离线17312 天注册时间
中级会员, 积分 413, 距离下一级还需 87 积分
是ie9 报错。
ff，chroem，ie8 都正常没有报错。我也找丢失的（ 呢，可都没找到
Powered by宽度高度不固定的div水平居中与垂直居中的方法
父容器vc的css属性 display:overflow:
子容器vci的css属性 vertical-align:display:table-
针对ie6的hack，vci容器的 _position:_top:50%; 和content容器的 _position: _top:-50%;
这种做法的原理是怎样的呢？
23 总笔记数
2.3万 总阅读量
Copyright &
All Rights Reserved.
合作伙伴：2012年4月 Web 开发大版内专家分月排行榜第二2012年3月 Web 开发大版内专家分月排行榜第二
2012年6月 Web 开发大版内专家分月排行榜第三2012年5月 Web 开发大版内专家分月排行榜第三
2012年2月 Web 开发大版内专家分月排行榜第二
本帖子已过去太久远了，不再提供回复功能。