`

max-height和min-height

    博客分类:
  • css
 
阅读更多
max-height 设置元素的最大高度。元素可以比指定值矮,但不能比其高。
min-height 设置元素的最小高度。元素可以比指定值高,但不能比其矮。
[不包括外边距、边框和内边距]

最大最小高度样式使用非常方便,满足固定高度弊端,但现在IE6却不支持,IE7及以上浏览器和其它浏览器均支持。

<!--最小高度限制的对象:内容少不够限制最小高度,显示限制最小高度-->
<div class="divcss-min"> 
    最小高度为60px 
</div> 
<!--最小高度限制的对象:内容超出限制最小高度,自动增高显示当前内容的高度-->
<div class="divcss-min"> 
    最小高度为60px<br /> 
    增加内容<br/> 
    增加内容<br/> 
    divcss5增加内容 
</div> 
<!--最大高度限制的对象:内容少不够限制最大高度,自动显示当前内容的高度-->
<div class="divcss-max"> 
    最大高度为60px 
</div> 
<!--最大高度限制的对象:内容多到最大高度限制也装不下,对象本身还是最大高度,出现内容溢出-->
<div class="divcss-max"> 
    最大高度为60px<br/> 
    www.baidu.com<br/> 
    增加内容<br /> 
    divcss5增加内容<br/> 
    增加内容 
</div>  

.divcss-min,.divcss-max{ width:300px; border:1px solid #F00} 
.divcss-min{ min-height:60px} 
.divcss-max{ max-height:60px; margin-top:10px;overflow:hidden} 
<!--加入overflow:hidden样式即可隐藏最大高度显示溢出内容-->


  • 大小: 50.6 KB
分享到:
评论

相关推荐

    让IE6支持最小高度min-height、最大高度max-height的方法

    在网页设计中,`min-height`(最小高度)和`max-height`(最大高度)是CSS3中非常实用的属性,它们允许元素根据内容自动调整大小,同时限制其高度的上下限。然而,这些属性在老旧的Internet Explorer 6(简称IE6)...

    IE 6不支持min-height或max-width等属性的完美解决方案

    请看geniusalien提供的完美解决方案: (geniusalien温馨提示:本文的min-height操作方式试用于min-width、max-width、max-height。一样按下面的解决方案进行!) 第一种方法:我们可以利用IE6不识别!important来...

    IE6支持max-width/height与min-width/height(完美解决方案)

    IE6作为一款老旧的浏览器,对CSS的支持存在诸多限制,尤其是对于CSS3中的新特性,例如max-width和max-height等,都不被IE6原生支持。尽管如此,开发者们依然找到了一些方法来模拟这些功能,以确保网页在IE6中也能有...

    CSS-高度css-height.docx

    在CSS(层叠样式表)中,`height`...在实际项目中,结合使用`min-height`和`max-height`可以确保元素在不同内容量和屏幕尺寸下保持良好的视觉效果。同时,理解各种单位的用法对于创建响应式和自适应的设计至关重要。

    让IE6支持min-width和max-width的方法

    minmax_props= new Array( new Array(‘min-width’, ‘minWidth’), new Array(‘max-width’, ‘maxWidth’), new Array(‘min-height’,’minHeight’), new Array(‘max-height’,’maxHeight’) ); // Binding...

    maximize-select2-height:让您的Select2下拉菜单利用页面上的空间

    或者直接将minimize-select2-height.js或minimize-select2-height.js minimize-select2-height.min.js文件复制粘贴到您的项目中。用法在任何您初始化Select2下拉列表的地方,如下所示: $ ( "#my-dropdown" ) . s

    CSS的最大高度、最小高度及宽度在IE6下没有效果问题

    具体来说,IE6不支持标准CSS中的max-height和min-height属性。这导致在IE6环境下网页的布局和设计无法达到预期的效果。 为了解决这个问题,需要针对IE6进行特殊的设置。在上面的描述中提到了使用表达式(expression...

    accordion:使用max-height的前端手风琴小部件

    使用香草ES2017编写的使用max-height的前端手风琴小部件 安装 npm i @three11/accordion 或者 yarn add @three11/accordion 或者 只需下载此存储库并链接位于dist文件夹中的文件: &lt; link rel =" stylesheet ...

    DIV+CSS基础教程全攻略.pdf

    本文主要围绕`CSS`中的高度属性——`height`,以及相关的`max-height`、`min-height`和`overflow`进行深入探讨。 首先,`CSS`中的`height`属性用于设置元素的高度,其单位可以是像素(px)、百分比、em等。例如,`....

    node-match-media:节点功能提取匹配特定媒体条件的样式,并将样式分离出来

    目前,功能仅限于 [ min-width , max-width , min-device-width , max-device-width , min-height , max-height , min-device-height , max-device-height , orientation ] 媒体查询,使用,和and支持链接以构建复杂...

    DIV+CSS基础教程全攻略 (2).pdf

    总的来说,`CSS`高度控制是一个关键的布局技巧,通过`height`、`max-height`、`min-height`以及`overflow`属性,我们可以精确地调整元素的高度,以适应不同的内容需求和视觉效果。了解并熟练掌握这些属性,将有助于...

    兼容IE的最小最大高度CSS写法

    在这种情况下,我们可以结合使用`min-width`、`max-width`(或者`min-height`、`max-height`)和IE专有的`_width`(或`_height`)属性。 ```css .min_and_max_width { min-width: 300px; /* 最小宽度 */ max-width...

    css2中文手册 学习css的必选

    height max-height min-height width max-width min-width 布局 Layout clear float clip overflow overflow-x overflow-y display visibility 外补丁 Margins margin margin-top margin-right margin-...

    docsify左侧导航点击展开伸缩功能

    具体实现可能包括使用`addEventListener`来监听点击事件,然后根据当前元素的展开状态(通常存储在CSS类名中)切换`display`属性或改变元素的`max-height`,从而实现展开和收缩的动画效果。 在CSS方面,`sidebar-...

    css控制图片缩放,不担心拉升,变小

    总结来说,通过合理运用CSS的`width`、`height`、`max-width`、`max-height`、`min-width`、`min-height`以及`object-fit`属性,我们可以有效地控制图片的缩放,确保它们在各种场景下都能保持良好的显示效果,避免被...

    jquery实现图片等比例缩放以及max-width在ie中不兼容解决

    然而,IE6(Internet Explorer 6)浏览器对CSS属性`max-width`和`max-height`的支持并不完善,这在实际应用中可能会导致图片超出容器的边界,影响页面布局。为了克服这一问题,我们可以利用jQuery来实现图片的等比例...

Global site tag (gtag.js) - Google Analytics