×

clientheight c

clientheight（css怎么设置最大高度和最小高度）

admin admin 发表于2022-09-06 22:04:00 浏览153 评论0

抢沙发发表评论

本文目录

css怎么设置最大高度和最小高度


1、IE6支持max-height解决方法
IE6支持最大高度解决CSS代码：
.yangshi{max-height:1000px;_height:expression((document.documentElement.clientHeight||document.body.clientHeight)《1000?“1000px“:““);overflow:hidden;}
说明：max-height:1000px; 这个是IE6以上级其它品牌浏览器支持最大范围高度。而_height:expression((document.documentElement.clientHeight||document.body.clientHeight)《1000?“1000px“:““);overflow:hidden;则是让IE6支持max-height替代CSS代码，但效果和其它版本浏览器相同效果。
让所有浏览器都支持max-height的CSS样式代码，完整：
max-height:1000px;_height:expression((document.documentElement.clientHeight||document.body.clientHeight)《1000?“1000px“:““); overflow:hidden;这里的1000和1000px是你需要的数值，注意3个数值的相同。
让IE6支持最大高度max-height的时候别忘记加上overflow:hidden;
2、IE6支持min-height解决方法
IE6支持最小高度解决CSS代码：
.yangshi{min-height:1000px;_height:expression((document.documentElement.clientHeight||document.body.clientHeight)》1000?“1000px“:““);}
说明：min-height:1000px; 这个是IE6以上级其它品牌浏览器支持最小范围高度。而_height:expression((document.documentElement.clientHeight||document.body.clientHeight)》1000?“1000px“:““);则是让IE6支持min-height替代CSS代码，但效果和其它版本浏览器相同效果。
让所有浏览器都支持min-height的CSS样式代码，完整：
min-height:1000px;_height:expression((document.documentElement.clientHeight||document.body.clientHeight)》1000?“1000px“:““); 这里的1000和1000px是你需要的数值，注意3个数值的相同。
3、IE6支持max-height又支持min-height方法
让所有浏览器包括IE6即支持最大高度又支持最小高度。
.yangshi{Max-Height:620px;Min-Height:40px;_height:expression(this.scrollHeight 》 620 ? “620px“ : (this.scrollHeight 《 40 ? “40px“ : “auto“));}
IE6支持Max-Height和支持Min-Height CSS代码
_height:expression(this.scrollHeight 》 620 ? “620px“ : (this.scrollHeight 《 40 ? “40px“ : “auto“));
说明：以上代码作用是让对象的最小高度为40px，最大高度为620px的CSS样式属性

js里clientHeight，scrolltop这些指的是从哪里到哪里的距离啊


clientHeight：客户可见的浏览器显示页面的高度。
scrollTop：滚动条的滑块距离浏览器页面最顶部的距离，即滚动条滑动了多少距离。

clientWidth等指的是什么


scrollWidth是对象的实际内容的宽，不包边线宽度，会随对象中内容的多少改变（内容多了可能会改变对象的实际宽度） clientWidth是对象可见的宽度，不包滚动条等边线，会随窗口的显示大小改变。 offsetWidth是对象的可见宽度，包滚动条等边线，会随窗口的显示大小改变。 scrollHeight: 获取对象的滚动高度。 offsetHeight:获取对象相对于版面或由父坐标 scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 offsetLeft:获取对象相对于版面或由 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 offsetTop 属性指定的父坐标的计算顶端位置 offsetParent 属性指定的父坐标的高度 offsetParent 属性指定的父坐标的计算左侧位置 event.clientX 相对文档的水平座标 event.clientY 相对文档的垂直座标 event.offsetX 相对容器的水平坐标 event.offsetY 相对容器的垂直坐标 document.documentElement.scrollTop 垂直方向滚动的值 event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量 　　 以上主要指IE之中，FireFox差异如下： IE6.0、FF1.06+： clientWidth = width + padding clientHeight = height + padding offsetWidth = width + padding + border offsetHeight = height + padding + border IE5.0/5.5： clientWidth = width - border clientHeight = height - border
-clientheight

offsetHeight和clientHeight的区别


js中的clientHeight和offsetHeight的区别如下：

1、clientHeight

网页(内容)可见区域高：document.body.clientHeight 即页面浏览器中可以看到内容的这个区域的高度，一般是最后一个工具条以下到状态栏以上的这个区域，与页面内容无关。

注意：IE、Opera 认为 scrollHeight 是网页内容实际高度，可以小于 clientHeight。

2、offsetHeight

网页可见区域高：document.body.offsetHeight (包括边线的宽)

二者联系：

NS、 FF 认为 offsetHeight 和 scrollHeight 都是网页内容高度，只不过当网页内容高度小于等于 clientHeight 时，scrollHeight 的值是 clientHeight，而 offsetHeight 可以小于 clientHeight。-c


js中的scrollHeight是什么意思


scrollHeight返回元素的完整的高度，以像素为单位.
当一个元素拥有滚动条时（比如由于 CSS 的 overflow 属性），这些属性和 offsetHeight 不同，offsetHeight只是报告元素的可见部分的大小。这是非标准的但却得到很好支持的属性。
这个属性是非标准的，所以在不同浏览器中可能会存在差异，例如：
在Firefox浏览器中：
scrollHeight就是滚动条可滚动的部分还要加上border的高度还要加上横向滚动条不可用的高度,与clientHeight比起来,多个border的高度跟横向滚动条不可用的高度.
在IE浏览器中：
指这个对象它所包含的对象的高度加上border的高度和margin
-clientheight

js中的clientHeight和offsetHeight有什么区别么


js中的clientHeight和offsetHeight的区别如下：

1、clientHeight

网页(内容)可见区域高：document.body.clientHeight 即页面浏览器中可以看到内容的这个区域的高度，一般是最后一个工具条以下到状态栏以上的这个区域，与页面内容无关。

注意：IE、Opera 认为 scrollHeight 是网页内容实际高度，可以小于 clientHeight。

2、offsetHeight

网页可见区域高：document.body.offsetHeight (包括边线的宽)

二者联系：

NS、 FF 认为 offsetHeight 和 scrollHeight 都是网页内容高度，只不过当网页内容高度小于等于 clientHeight 时，scrollHeight 的值是 clientHeight，而 offsetHeight 可以小于 clientHeight。-c


document.body.clientWidth是什么意思


代码的意思是：如果根据ID得到的（“ScreenOver“）不为空的话，不显示；为空的话，那就生成一个objScreen对象；如果这个对象生成失败的话，那就创建一个ID为“div”的新对象。
documen.body.clientWidth的意思是当前浏览器窗口的宽，但是这个属性不是特别容易用，很容易出现值为0或者一些奇怪数值的情况。
-clientheight

less以及sass两者什么区别


事实证明，LESS——以及Sass——功能比这个要多太多。LESS和Sass在语法上有些共性，比如下面这些：
● 混入(Mixins)——class中的class；
● 参数混入——可以传递参数的class，就像函数一样；
● 嵌套规则——Class中嵌套class，从而减少重复的代码；
● 运算——CSS中用上数学；
● 颜色功能——可以编辑颜色；
● 名字空间(namespace)——分组样式，从而可以被调用；
● 作用域——局部修改样式；
● JavaScript 赋值——在CSS中使用JavaScript表达式赋值。
LESS和Sass的主要不同就是他们的实现方式，LESSS是基于JavaScript，所以，是在客户端处理的。
另一方面，Sass是基于Ruby的，然后是在服务器端处理的。很多开发者不会选择LESS因为JavaScript引擎需要额外的时间来处理代码然后输出修改过的CSS到浏览器。关于这个有很多种方式，我选择的是只在开发环节使用LESS。一旦我完成了开发，我就复制然后粘贴LESS输出的到一个压缩器，然后到一个单独的CSS文件来替代LESS文件。另一个选择是使用LESS.app来编译和压缩你的LESS文件。两个选择都将最小化你的样式输出，从而避免由于用户的浏览器不支持JavaScript而可能引起的任何问题。尽管这不大可能，但终归是有可能的。
关于变量在LESS和Sass中的唯一区别就是，LESS用@，Sass用$。同时还有一些作用域上的差别，我后面会提到。
混入(mixin)
偶尔，我们会创建一些会在样式表中重复使用的样式规则。没有人会阻止你在一个HTML的元素中使用多个class，但是你可以用LESS，在样式表中完成。
.border {
border-top: 1px dotted #333;
}
article.post {
background: #eee;
.border;
}
ul.menu {
background: #ccc;
.border;
}
这可以给到你与你在两个元素中分别添加.bordered class同样的效果——而且仅仅在样式表中就完成了。而且它工作的很好：
文字和无序列表都被用上了边框样式
在Sass中，你要在样式规则前面添加@mixin声明，规定它是个嵌套。然后，通过@include来调用它。
@mixin border {
border-top: 1px dotted #333;
}
article.post {
background: #eee;
@include border;
}
ul.menu {
background: #ccc;
@include border;
}
参数混入
就像在CSS中有函数功能一样，这些对于那些在现在的CSS工作中多余的工作非常有用。最好和最有用的例子就是我们正在经历的从CSS2到CSS3过渡过程中的很多浏览器私有前缀。Nettuts+有一篇Jeffrey Way写的很赞的视频和文章，内容是包含着由有用的参数组成的文件，他们涵盖了大部分使用各个浏览器私有前缀的CSS3属性。
.border-radius( @radius: 3px ) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}
在这个例子中，.border-radius有个默认的3px的圆角，但是你可以使用你需要的任何值。.border-radius(10px)将会生成半径为10px的圆角。
Sass中的语法很像LESS，只是使用$声明变量，然后使用前面提到的@mixin和@include来调用。
选择器继承
这个东西LESS并没有提供。通过这个功能，你可以将一个选择器附加到已经预先定义的选择器上，而无需再使用逗号将两者分开的写法了。
.menu {
border: 1px solid #ddd;
}
.footer {
@extend .menu;
}

/* 上面的写法规则和下面的效果是一样的： */
.menu, .footer {
border: 1px solid #ddd;
}
嵌套规则
在css中嵌套class和ID是避免你的样式干扰或者被别的样式干扰的唯一方法了。但是这可能会很凌乱。使用一个类似于#site-body .post .post-header h3 的选择器毫无吸引力而且会占用大量不必要的空格。使用LESS，你可以嵌套id、class以及标签。
#site-body { …
.post { …
.post-header { …
h3 { … }
a { …
&:visited { … }
&:hover { … }
}
}
}
}
上面的代码最终和上面的例子（那一长串的选择器）的效果一样，但是要更容易阅读和理解的多，而且它占用很少的空间。你也可以通过&来引用元素样式到他们的伪元素上，该功能类似于JavaScript中的this。
运算
这可能是你所期望的：使用数字或者变量在你的样式表中实现数学运算！
@base_margin: 10px;
@double_margin: @base_margin * 2;
@full_page: 960px;
@half_page: @full_page / 2;
@quarter_page: (@full_page / 2) / 2;
声明下，我也意识到我可以除以4来获得@quarter_page变量，但是这里我只是想要演示下圆括号组成“运算顺序”在这里也是可以用的。在使用简写的规则中，小括号也是必须的，比如 border: (@width / 2) solid #000。
Sass在数字上比LESS更专业。它已经可以换算单位了。Sass可以处理无法识别的度量单位并将其输出。这个特性很明显是一个对未来的尝试——证明W3C作出的一些改变。
/* Sass */
2in + 3cm + 2pc = 3.514in

/* LESS */
2in + 3cm + 2pc = Error
Color函数
在文章开头，我提到了LESS如何帮我在编码过程中处理围绕着一个调色板。对此贡献最大的一部分就是颜色函数。加入你用一个标准的蓝色贯穿到你的样式中，然后你想要在表单中用这个蓝色来做一个渐变的按钮。你可以打开Photoshop或者其它的编辑器来获取一个比蓝色较浅的或者较暗的HEX色值来作为渐变色。或者，你可以只是使用LESS中的颜色函数。
@blue: #369;
.submit {
padding: 5px 10px;
border: 1px solid @blue;
background: -moz-linear-gradient(top, lighten(@blue, 10%), @blue 100%); /*Moz*/
background: -webkit-gradient(linear, center top, center bottom, from(lighten(@blue, 10%)), color-stop(100%, @blue)); /*Webkit*/
background: -o-linear-gradient(top, lighten(@blue, 10%) 0%, @blue 100%);/*Opera*/
background: -ms-linear-gradient(top, lighten(@blue, 10%) 0%, @blue 100%); /*IE 10+*/
background: linear-gradient(top, lighten(@blue, 10%) 0%, @blue 100%); /*W3C*/
color: #fff;
text-shadow: 0 -1px 1px rgba(0,0,0,0.4);
}
lighten函数很明显就是用百分比值来减轻颜色，在这个例子中，它将减轻这个基础的蓝色的10%。这种方法可以让我们变化的元素或者其它任何元素的颜色值——只是简单的改变基础颜色而已。这对于主题(模板)来说非常有用。而且，如果你使用参数功能，像上面提到的，你还可以更简单的应用到一些浏览器私有前缀的声明中，比如：.linear-gradient(lighten(@blue), @blue, 100%);。
还有很多其它的色彩函数，比如变暗或者调整颜色的饱和度，甚至你可以旋转色盘来使用其它颜色。我建议亲自尝试下你能想出的（用法）。
Sass貌似有更多的选项——但我并不需要这么多。我个人最常用的还是lighten和darken。如果你想了解更多，可以看一下这篇很详细的介绍。
条件语句与控制
这是一个的确很赞的东东，也是另一个LESS不支持的功能。使用 Sass，你可以使用if { } else { } 条件语句，以及for { }循环。它甚至支持 and、 or和 not，以及 《、 》、 《=、 》= 和 == 等操作符。
/* Sample Sass “if“ statement */
@if lightness($color) 》 30% {
background-color: #000;
} @else {

}

/* Sample Sass “for“ loop */
@for $i from 1px to 10px {
.border-#{i} {
border: $i solid blue;
}
}
名字空间(Namespaces)
名字空间可以用于组织我们的CSS到另一个档次，我们可以将一些公用的样式分组，然后在用的时候直接使用。例如，如果我们创建了一个名为default的样式分组，我们就可以在用到的时候直接从该组中调用。
#defaults {
.nav_list () {
list-style: none;
margin: 0; padding: 0;
}
.button () { … }
.quote () { … }
}
然后，在我们的代码中，如果我们正好在一个nav元素中使用了ul元素，我们就会想到我们需要default样式。那么我们就可以简单的调用它，它也会被直接应用。
nav ul {
#defaults 》 .nav_list;
}
作用域
作用域是编程中的标配，LESS中也是。如果你在你样式表的root级声明一个变量，它在整个文档中都是可以用的。然而，如果你在一个选择器，比如id或者class中，重新定义了这个变量，那么，它就只能在这个选择器中可用了——当然是重新定义后的新值。
@color: #00c; /* 蓝色 */
#header {
@color: #c00; /* red */
border: 1px solid @color; /* 红色边框 */
}
#footer {
border: 1px solid @color; /* 蓝色边框 */
}
因为我们在#header中重新定义了color变量，变量的值将会是不同的而且只会在该选择器中有效。它之前或者之后的所有地方，如果没有被重新定义，都会保持那个原始的值。
作用域在Sass中稍有不同。在上面的代码中，当@color变量变为红色后，代码中，此处之后的该变量的值，将会被重写（成为红色）。
注释
这一部分比较基础。LESS中允许两种注释写法。标准的CSS注释，/* comment */，是有效的，而且能够通过处理并正确输出。当行注释，// comment，同样可以用但是不能够通过处理也不能被输出，然后，结果是，“无声的”。
导入
导入也相当符合标准。标准的 @import: ‘classes.less’; 处理的很好。然而，如果你想要导入其它的LESS文件，那么文件的扩展名是可选的，所以 @import ‘classes’; 也是可行的。如果你想要导入一些无需LESS处理的内容，你可以使用 .css 扩展 (比如， @import: ‘reset.css’;)。
字符串插入
字符串也是可以用于变量中的，然后通过@{name}来调用。
@base_url : ’
-c

提问一下js里srolltop元素的offset top clientHeight 是从哪里算的


您好，这里是javascript中制作滚动代码的常用属性
页可见区域宽： document.body.clientWidth;网页可见区域高： document.body.clientHeight;网页可见区域宽： document.body.offsetWidth (包括边线的宽);网页可见区域高： document.body.offsetHeight (包括边线的宽);网页正文全文宽： document.body.scrollWidth;网页正文全文高： document.body.scrollHeight;网页被卷去的高： document.body.scrollTop;网页被卷去的左： document.body.scrollLeft;网页正文部分上： window.screenTop;网页正文部分左： window.screenLeft;屏幕分辨率的高： window.screen.height;屏幕分辨率的宽： window.screen.width;屏幕可用工作区高度： window.screen.availHeight;
offsetLeft
假设 obj 为某个 HTML 控件。
obj.offsetTop 指 obj 距离上方或上层控件的位置，整型，单位像素。
obj.offsetLeft 指 obj 距离左方或上层控件的位置，整型，单位像素。
obj.offsetWidth 指 obj 控件自身的宽度，整型，单位像素。
obj.offsetHeight 指 obj 控件自身的高度，整型，单位像素。
我们对前面提到的“上方或上层”与“左方或上层”控件作个说明。
例如：
《div id=“tool“》
《input type=“button“ value=“提交“》
《input type=“button“ value=“重置“》
《/div》
“提交”按钮的 offsetTop 指“提交”按钮距“tool”层上边框的距离，因为距其上边最近的是 “tool” 层的上边框。
“重置”按钮的 offsetTop 指“重置”按钮距“tool”层上边框的距离，因为距其上边最近的是 “tool” 层的上边框。
“提交”按钮的 offsetLeft 指“提交”按钮距“tool”层左边框的距离，因为距其左边最近的是 “tool” 层的左边框。
“重置”按钮的 offsetLeft 指“重置”按钮距“提交”按钮右边框的距离，因为距其左边最近的是“提交”按钮的右边框。
以上属性在 FireFox 中也有效。
另 外：我们这里所说的是指 HTML 控件的属性值，并不是 document.body，document.body 的值在不同浏览器中有不同解释（实际上大多数环境是由于对 document.body 解释不同造成的，并不是由于对 offset 解释不同造成的），点击这里查看不同点。
标题：offsetTop 与 style.top 的区别
预备知识：offsetTop、offsetLeft、offsetWidth、offsetHeight
我们知道 offsetTop 可以获得 HTML 元素距离上方或外层元素的位置，style.top 也是可以的。
-clientheight

div 没有设置height 内容撑大···怎么获取高度啊， clientHeight offsetHeight style.height 都不行


如果你想固定高度，设置width（宽度）height（高度）display:block（成块） float:left（左浮动）和 overflow:hidden（禁止溢出）属性。应该就可以了