CSS实现子级窗口高度随低级窗口高度变化
纯粹使用使用height:100%;或者height:auto;来定义内部容器自适应高度,都无法实现让内部容器高度随着外部父容器高度变化而变化,所以我们必需要使用position绝对定位属性来配合协助实现。
//.box{ width:960px; margin:20px auto; height:auto; background-color:#FFFFFF; position:relative;}
//.left{ width:160px; height:100%; background-color:#fafafa; position:absolute; top:0px; left:0px;}
//.right{ width:800px; height:auto; float:right;} <!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>MJBlog(mj.588cy.com)</title>
<style type="text/css">
* {margin:;padding:;font-size:12px;list-style:none;border:;}
body{font-family: Arial, Helvetica, sans-serif; background-color:#edf0eb;}
a{ text-decoration:none;}
a:hover{ text-decoration:underline;}
.clear{ display:block; height:0px; line-height:0px; font-size:0px; clear:both;}
.box{ width:960px; margin:20px auto; height:auto; background-color:#FFFFFF; position:relative;}
.left{ width:160px; height:%; background-color:#fafafa; position:absolute; top:0px; left:0px;}
.left_wu{ width:160px; height:%; background-color:#fafafa; float:left;}
.left h1,.left_wu h1{ width:160px; height:30px; background-color:#67a727; text-align:center; line-height:30px; color:#FFFFFF; font-size:14px; margin-top:30px;}
.nav{ width:160px; height:auto; margin:12px 0px;}
.nav a{ width:160px; height:30px; line-height:30px; text-align:center; display:block; color:#588c0e;}
.nav a:hover{ background-color:#ebebeb;}
.nav .a_dq{ color:#; background-color:#ebebeb; font-weight:bold;} .right{ width:800px; height:auto; float:right;}
.right h1{ width:800px; height:500px; text-align:center; line-height:100px; font-size:14px; font-weight:;}
</style>
</head> <body>
<div class="box">
<div class="right">
<h1>这个是有使用position绝对定位属性,所以左边的导航栏高度会随着父容器高度而变化</h1>
</div> <div class="clear"></div>
<div class="left">
<h1>个人资料</h1>
<div class="nav">
<a href="#" class="a_dq">基本信息</a>
<a href="#">修改头像</a>
<a href="#">帐号绑定</a>
<a href="#">个性签名</a>
</div>
</div>
</div> <div class="box">
<div class="left_wu">
<h1>个人资料</h1>
<div class="nav">
<a href="#" class="a_dq">基本信息</a>
<a href="#">修改头像</a>
<a href="#">帐号绑定</a>
<a href="#">个性签名</a>
</div>
</div>
<div class="right">
<h1>这个是没有使用position绝对定位属性,所以左边的导航栏高度没有随着父容器高度而变化,视觉效果就会差点</h1>
</div> <div class="clear"></div>
</div>
</body>
</html>
关于div自适应高度/左右高度自适应一致的js代码
$(function(){
var heightLeft= $("#Left").height();
var heightRight= $("#Right").height();
if (heightLeft > heightRight)
{
$("#Right").height(heightLeft);
}
else
{
$("#Left").height(heightRight);
}
})
CSS实现子级窗口高度随低级窗口高度变化的更多相关文章
- CSS| 解决子级用css float浮动 而父级div没高度不能自适应高度
解决子级用css float浮动 而父级div没高度不能自适应高度 解决子级对象使用css float浮动 而父级div不能自适应高度,不能被父级内容撑开解决方法,父级div没有高度解决方法. 最外层 ...
- CSS实现子级窗口高度随低级窗口高度变化及js控制左右容器高度一致
纯粹使用使用height:100%;或者height:auto;来定义内部容器自适应高度,都无法实现让内部容器高度随着外部父容器高度变化而变化,所以我们必需要使用position绝对定位属性来配合协助 ...
- html/css更改子级继承的父级属性
一个精美的网页需要的样式很多,在父级上设置的字体颜色或者大小,在其子元素中不一定全部相同,这时候要更改其中某一项的样式怎么办呢. 很多新手朋友就不明白,会迷惑为什么我使用class单独命名了,重新设置 ...
- 解决子级用css float浮动 而父级div没高度不能自适应高度
解决子级对象使用css float浮动 而父级div不能自适应高度,不能被父级内容撑开解决方法,父级div没有高度解决方法. 最外层的父级DIV不能自适应高度-不能随对象撑开没有高度 当在对象内的盒子 ...
- 子级用css float浮动 而父级div没高度不能自适应高度
子级对象使用css float浮动 而父级div不能自适应高度. 对父级div标签闭合</div>前加一个clear清除浮动对象. <!DOCTYPE html> <ht ...
- 子级用css float浮动 而父级不能自适应高度解决方法
解决子级对象使用css float浮动 而父级div不能自适应高度,不能被父级内容撑开解决方法,父级div没有高度解决方法. 当在对象内的盒子使用了float后,导致对象本身不能被撑开自适应高度,这个 ...
- css flew 布局 解决父元素高度不固定,子级居中。
给父级添加 display: flex; justify-content: flex-start; align-items: center; 子级里的内容永远居中
- <转载>如何解决子级用float浮动父级div高度不能自适应的问题
转载:http://www.kwstu.com/ArticleView/divcss_2013101582430202 解决子级对象使用css float浮动 而父级div不能自适应高度,不能被父级内 ...
- 让一个父级div根据子级div高度而自适应高度
需求是点击上传的时候进行子级div高度不定,相对来说父级div高度也不能固定,把元素都设置成普通标准流,然后样式可以使用margin内边距或者padding外边距来进行调节 放上代码供参考: .opu ...
随机推荐
- 【转】【Android】对话框 AlertDialog -- 不错不错
原文网址:http://blog.csdn.net/feng88724/article/details/6171450 本讲介绍一下Android基本组件:对话框AlertDialog. API: j ...
- 我们究竟什么时候可以使用Ehcache缓存
一.Ehcache是什么 EhCache是Hibernate的二级缓存技术之一,可以把查询出来的数据存储在内存或者磁盘,节省下次同样查询语句再次查询数据库,大幅减轻数据库压力. 二.Ehcache的使 ...
- CodeForces 54C-First Digit Law(数位,概率dp)
题意: 给你n个区间,在每个区间里各取一个数(随机取),求这n个数中超过K%的数是首位为1数的概率 分析: dp[i][j]取前i个数,有j个是首位为1的数的概率 易知,dp[i][j]=dp[i-1 ...
- 仿酷狗音乐播放器开发日志二十六 duilib在标题栏弹出菜单的方法
转载请说明原出处,谢谢~~ 上篇日志说明了怎么让自定义控件响应右键消息.之后我给主窗体的标题栏增加右键响应,观察原酷狗后可以发现,在整个标题栏都是可以响应右键并弹出菜单的.应该的效果如下: 本以为像上 ...
- SQL你必须知道的-查询聚合分组排序
use MySchoolTwo -- 简单查询 select * from Student -- 话说这种查询的效率要比 * 要高级点 select sId , sName , ...
- 【C++对象模型】构造函数语意学之二 拷贝构造函数
关于默认拷贝构造函数,有一点和默认构造函数类似,就是编译器只有在[需要的时候]才去合成默认的拷贝构造函数. 在什么时候才是[需要的时候]呢? 也就是类不展现[bitwise copy semantic ...
- 简易nagios安装
这段时间一直在进行nagios安装的实验,进行了很多的实验,现在也就是将这些进行一些基础的记录. 本篇主要讲述的是进行nagios的简易安装,在安装完成之后,能够在web页面上看到本地的监控图像, n ...
- 网站繁简切换的JS遇到的一个BUG
公司打算进入台湾市场,最近开发了繁体版本的网站,数据库里的信息全是简体,除了网页上固定的文字手动翻译了,文章内容标题都不是繁体. 于是在网上找了一段比较流行的繁简切换的JS实现了,不过后来却发现,有些 ...
- bzoj 1391 [Ceoi2008]order(最小割)
[题意] 有n个有偿工作选做,m个机器,完成一个工作需要若干个工序,完成每个工序需要一个机器,对于一个机器,在不同的工序有不同的租费,但买下来的费用只有一个.问最大获益. [思路] 对于工作和机器建点 ...
- Intellij IDEA,WebStorm-keymap(转)
1. ctrl + shift + n: 打开工程中的文件2. ctrl + j: 输出模板3. ctrl + b: 跳到变量申明处4. ctrl + alt + T: 围绕包裹代码(包括zencod ...