`
hshtobe
  • 浏览: 2723 次
  • 性别: Icon_minigender_1
  • 来自: 武汉
最近访客 更多访客>>
社区版块
存档分类
最新评论

css百分比的问题

    博客分类:
  • css
css 
阅读更多
使用百分比来获取高度,必须要求定义了父容器高度
如果div的父容器没有定义高度,那么设置百分比无效。其他具有box模型的标签也是同理

html是所有标签的父容器
默认情况下
在IE下html高度是100% 而FF下面HTML标签并不是100%高度
是body容器 在IE下 body不是100%高度 而FF下body标签是100%高度
所以定义css样式
html,body
{
     width:100%;
     height:100%;
}
div.col1
{
     width:20%;
     height:100%;
float:left;
     background-color:#cccccc;
}
div.col2
{
     width:80%;
     height:100%;
float:left;
     background-color:#ffffcc;
}
分享到:
评论

相关推荐

    CSS代码实现百分比柱状图.rar

    本资源"CSS代码实现百分比柱状图.rar"提供了一种利用纯CSS来创建百分比柱状图的方法,这对于那些希望避免JavaScript或专门图表库的开发者来说是一个很好的解决方案。 首先,我们需要理解CSS的基本结构。CSS...

    div+css百分比表格+DIV+CSS+JS静态分页程序+DIV+CSS像素表格

    div+css百分比表格+DIV+CSS+JS静态分页程序+DIV+CSS像素表格 百分比表格(用DIV+CSS)以百分比显示,可以根据窗口的大小自动调节所显示的大小! DIV+CSS+JS静态分页程序可兼容主流浏览器(IE、FF、Opera) DIV+CSS表格...

    百分比显示效果css代码

    在这个名为“百分比显示效果css代码”的压缩包中,我们可以期待找到一些实用的CSS代码片段,用于创建动态或静态的百分比展示。 首先,要实现百分比显示,我们需要理解CSS的基本语法和选择器。例如,我们可以选择一...

    简单实用的纯CSS百分比圆形进度条插件

    **CSS3库:percircle——打造美观的百分比圆形进度条** 在网页设计中,进度条是一种常见的元素,用于展示任务或数据加载的进度。在众多的进度条实现方式中,`percircle`是一个专为纯CSS打造的百分比圆形进度条插件...

    CSS3 3D环形进度条 带进度百分比

    这是一款基于纯CSS3的环形进度条,而且,从外观上看,这款进度条很有3D立体的...另外,进度条的环形中央带有进度百分比,可以实时根据进度来更新百分比的数值,和之前分享的HTML5/CSS3扇形进度条动画相比有一定优势。

    CSS详解及查询(有了它,css不成问题,可用于css查询,及学习)

    1. **流体布局**: CSS通过百分比单位实现元素尺寸随浏览器窗口大小变化,创建响应式设计。 2. **Flexbox布局**: 弹性盒模型(Flexbox)用于处理容器内的元素对齐、排列和分配空间,适应不同屏幕尺寸。 3. **Grid...

    CSS3评分百分比统计图

    **CSS3评分百分比统计图**是一种利用CSS3特性实现的动态展示数据的图形,它通常用于呈现各项评分或统计数据的百分比。这种图形在网页设计中非常常见,因为它们可以直观、美观地展示信息,尤其适用于反馈用户评价、...

    JS+CSS3 3D立体环形百分比进度条图表动画特效

    在这款名为"JS+CSS3 3D立体环形百分比进度条图表动画特效"的项目中,开发者利用JavaScript和CSS3的强大力量,创建了一个极具视觉吸引力的3D环形进度条。这个特效不仅提供了实时的百分比显示功能,而且通过3D立体效果...

    CSS3彩色进度条 按百分比显示不同颜色.zip

    在本压缩包文件中,`CSS3彩色进度条 按百分比显示不同颜色.zip` 提供了一个实现这一功能的示例。这个示例通过CSS3技术,实现了进度条在不同百分比阶段显示不同颜色的效果,从而增加了视觉吸引力和交互性。 首先,...

    HTML5 环形进度条显示百分比 运用CSS3技术实现.rar

    在本案例中,“HTML5 环形进度条显示百分比 运用CSS3技术实现”是一个展示如何利用这两者来创建具有视觉吸引力的动态元素的示例。环形进度条是一种常见的用户界面组件,它能直观地展示任务或数据加载的进度,通常...

    CSS3 3D环形百分比进度条图表

    这是一款基于JavaScript和CSS3的3D环形百分比进度条图表,它可以展示当前数据的百分比情况,与之前分享过的一款HTML5 SVG环形图表应用相比,这款环形图表应用的特点是它的外观呈现3D立体的视觉效果,而且实用性也是...

    将AE制作的动画导出为CSS代码

    "将AE制作的动画导出为CSS代码"这一主题探讨的是如何将AE中的动画转换成可应用于网页的CSS代码,以便在网页上实现类似的动态效果。 AE提供了一种方式,通过插件或自定义脚本来将动画的关键帧数据转化为CSS3关键帧...

    html5 css3圆形波浪百分比加载动画特效

    在“html5 css3圆形波浪百分比加载动画特效”中,我们将探讨如何利用这两种技术来创建一个动态的、引人入目的加载动画。 首先,HTML5的`<canvas>`元素是一个非常重要的组成部分,它是用于在网页上进行动态图形绘制...

    CSS新世界1

    作者简单介绍了几个常见的数据类型,如长度单位、颜色、百分比等,帮助读者理解CSS属性值的定义语法。同时,书中还讨论了CSS全局关键字,如`inherit`、`initial`、`unset`和`revert`,这些关键字在处理继承和重置...

    常见的CSS技巧及常见问题

    3. **明确单位**:在CSS中,除非值为0,否则应始终为尺寸属性(如宽度、高度)提供明确的单位,如像素(px)、百分比(%)等。不加单位可能导致浏览器解析错误。 4. **大小写敏感性**:在XHTML和CSS中,元素名称、...

    css样式和内存泄漏

    此外,“div+css中常见的浏览器兼容性处理.doc”和“再谈浏览器的兼容性.doc”可能提供了针对这些问题的具体解决方法,如使用前缀、条件注释、reset CSS或normalize.css等工具来确保跨浏览器的一致性。 接着,我们...

    Jquery+css实现动态显示百分比的进展条

    在网页开发中,动态显示百分比的进展条是一种常见的用户界面元素,用于向用户展示某个过程的进度。在这个实例中,我们使用了Jquery和CSS这两种强大的技术来创建这样一个功能。Jquery是一款广泛使用的JavaScript库,...

    css3进度条

    这里的`<div class="progress-bar">`是进度条容器,而`<div class="progress">`表示实际的进度部分,通过设置`style="width: 75%"`来控制进度的百分比。 接下来,我们使用CSS来定制进度条的样式。基础样式可能如下...

    jquery+css3动态数据百分比进度条对比代码

    本教程将聚焦于一个特定的前端技术应用:使用jQuery和CSS3创建动态数据的百分比进度条,并进行对比展示。这个功能常用于展示数据变化、进度监控或比较不同数据指标。我们将探讨如何通过`index.html`、`css`和`js`这...

    css宽高自适应百分比.md

    css

Global site tag (gtag.js) - Google Analytics