DIV CSS网页布局 最小高度(min-height)的妙用
假定有二个BOX,我们需要它的最小高度为150PX。
CSS
div.box1,div.box2{
width: 300px;
min-height: 150px;
background: #EEE;
float: left;
margin-right: 20px;
}
xhtml
<div>IE中没保持最小高度为150px</div>
<div>最小高度可以设定一个BOX的最小高度, 当其内容较少时时,也能保持BOX的高度为一定</div>
现在的效果,IE中没保持最小高度为150px。
解决的方法
为IE设定一个高度
* html div.box1,* html div.box2{height: 150px;}
wellstyled.com 的解决方法是采用 CSS 的属性选择符(Attribute Selectors)
div.box1,div.box2{ ......height: 150px;}
/* IE靠这保持最小高度,超出就自动向下延伸 */
div[class].box1,div[class].box2{height: auto;}
/* 具有类选择符(class)属性的DIV对象 */
IE自然又是不支持的啦,Opera 和 Mozilla 支持,读取这个高度。可应用场合:搜索、文章等页面(没采用100%高度,当搜到的内容较少时,不至于页面太短。
相关推荐
-
DIV CSS网页布局 最小高度(min-height)的妙用
假定有二个BOX,我们需要它的最小高度为150PX. CSS div.box1,div.box2{ width: 300px; min-height: 150px; background: #EEE; float: left; margin-right: 20px; } xhtml <div>IE中没保持最小高度为150px</div> <div>最小高度可以设定一个BOX的最小高度, 当其内容较少时时,也能保持BOX的高度为一定</div> 现在的效果,I
-
div+CSS网页布局的意义与副作用原因小结第1/2页
如今大部分网站仍然采用表格嵌套内容的方式来制作网站,虽然此方法对于我们来说比较熟悉.比较上手:但是,它却阻碍了一种更好的.更有亲和力的.更灵活的,而且功能更强大的网站设计方法--DIV+CSS. CSS网页布局的意义体现在如下方面: 一.使页面载入得更快 由于将大部分页面代码写在了CSS当中,使得页面体积容量变得更小.相对于表格嵌套的方式,DIV+CSS将页面独立成更多的区域,在打开页面的时候,逐层加载.而不像表格嵌套那样将整个页面圈在一个大表格里,使得加载速度很慢. 二.降低流量费用 页面体积
-
CSS网页布局入门教程6:左列固定,右列宽度自适应
在实际应用中,有时候需要左栏固定宽度,右栏根据浏览器窗口大小自动适应,在CSS中实现这样的布局方式是简单可行的,只需在设置左栏的宽度即可,如上例中左右栏都采用了百分比实现了宽度自适应,而我们只需要将左栏宽度设定为固定值,右栏不设置任何宽度值,并且右栏不浮动,代码如下: 复制代码 代码如下: #left { background-color: #E8F5FE; border: 1px solid #A9C9E2; float: left; height: 3
-
JS+DIV+CSS排版布局实现美观的选项卡效果
本文实例讲述了JS+DIV+CSS排版布局实现美观的选项卡效果.分享给大家供大家参考.具体如下: 这是一个基于JavaScript的简单选项卡代码,陪新手练习一下Div+CSS排版的技巧,本选项卡可以继续美化修饰完善,选项卡在目前在众多网站上应用广泛,确实是一个很不错的网页布局方法. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-div-css-pbbj-nav-demo/ 具体代码如下: <!DOCTYPE html PUBLIC &quo
-
CSS网页布局入门教程5:二列宽度自适应
从二列固定宽度入手,开始尝试二列布局的情况下,左右栏宽度能够做到自适应,从一列自适应布局中我们知道,设定自适应主要通过宽度的百分比值设置,因此在二列宽度自适应的布局中也同样是对百分比宽度值的设计,继续上面的CSS代码,我们得新定义二列的宽度值: 复制代码 代码如下: #left { background-color: #E8F5FE; border: 1px solid #A9C9E2; float: left; height: 300px; w
-
CSS网页布局入门教程4:二列固定宽度
有了一列固定宽度作为基础,二列固定宽度就非常简单,我们知道div用于对某一个区域的标识,而二列的布局,自然需要用到两个div,XHTML代码如下: 复制代码 代码如下: <div id="left">左列</div> <div id="right">右列</div> 新的代码结构中使用了两个id,分别为left和right,表示两个div的名称,我们所需要做的是,首先为它们制定宽度,然后让两个div在水平行中并排显示
-
DIV+CSS网页制作布局技巧学习
CSS布局常用的方法:float:none|left|right取值:none: 默认值.对象不飘浮left: 文本流向对象的右边right: 文本流向对象的左边 它是怎样工作的,看个一行两列的例子xhtml:<div id="wrap"><div id="column1">这里是第一列</div><div id="column2">这里是第二列</div><div class=&
-
DIV+CSS网页另类上下布局的实例代码
先说说在尝试的过程发现的几个问题 1.盒模型问题 相信玩重构或者说是DIV+CSS的朋友应该都知道这个东西,废话不多说,不知道而有兴趣可以去网上搜索一下.这里我提到这个是因为这个布局是用百分比来控制的,所以当加对边框加上1px的边后,就不好减回来,我是舍弃了上边的边框样式. 2.溢出问题 这个问题只要对overflow做hidden就可以了,防止内容过长而溢出.刚刚开始的时候可以对html跟body的overflow加一个hidden属性.Blank 告诉我,IE默认是有滚动条的宽度(这个偶知道
-
CSS网页布局入门教程9:用CSS设计网站导航——横向导航
网站导航是网站中最重要的元素,是网站提供给用户的最直接最方便的访问网站内容的工具.网站导航从形式上主要由横向导航.纵向导航.下拉及多级菜单导航第三种形式. 横向导航 作为门户网站的设计而言,主导航一般采用横向导航.由于门户网站下方文字较多,且每个频道均有一同的样式区分,因此在顶部固定一个区域设计统一风格且不占用过多空间的导航是最理想的选择,国内大部分门户均采用这种形式. 纵向导航 目前在门户网站的设计中已经不再流行,纵向导航更倾向于表达产品分类. 下拉导航 主要用于功能复杂的网站.在有些网站上也
-
CSS网页布局入门教程1:一列固定宽度
本系列教程为入门级教程,适合初学者学习,由最简单的知识一点一点进阶.主要以实例为主,很少部分理论,这样更适应初学者快速掌握.因本人也正在学习,难免有一些错误或疏漏地方,望各位给予指正.本教程参考<CSS网站布局实录>一书,在此向作者表示感谢. 要想学好DIV+CSS,首先要有一定的HTML和CSS知识,如果这些你还不了解,建议你先去补习这一课,再来学习本教程.另外还要抛弃传统表格布局的思维模式,至于为什么,在你学习本教程中慢慢就会体会到.如果这些你都准备好了,那么开始吧! 一列固定宽度 一列固
随机推荐
- JQuery用$.ajax或$.getJSON跨域获取JSON数据的实现代码
- Java实现顺时针输出螺旋二维数组的方法示例
- php双层循环(九九乘法表)
- 制作高质量的JQuery Plugin 插件的方法
- JS实现的多张图片轮流播放幻灯片效果
- JS实现汉字与Unicode码相互转换的方法详解
- 浅析ASP.NET生成随机密码函数
- asp.net实现固定GridView标题栏的方法(冻结列功能)
- php过滤所有恶意字符(批量过滤post,get敏感数据)
- PHP中常见的错误与异常处理总结大全
- CentOS下与Apache连接的PHP多版本共存方案实现详解
- python通过pil模块将raw图片转换成png图片的方法
- 解析Silverlight调用WCF/Rest异常的解决方法
- JS限定手机版中图片大小随分辨率自动调整的方法
- 使用jQuery实现简单的tab框实例
- Linux server配置安装Java与Tomcat服务器教程详解
- [图文]三分钟学会Sql Server的复制功能
- jQuery插件easyUI实现通过JS显示Dialog的方法
- 详解Java中实现SHA1与MD5加密算法的基本方法
- Android viewpager 3D画廊的实现方法