`
nianshi
  • 浏览: 416159 次
  • 性别: Icon_minigender_1
  • 来自: 济南
社区版块
存档分类
最新评论

css设置最小高度 然后自适应

阅读更多


有人问到用css设置某个div最小height,然后再自适应height,这里有个不错的解决办法。

看代码先:

min-height:400px; //(解决ie8.9.ff.chrome)
*+height:100%;  //(解决ie7)
_height:400px; //(解决ie6) ie6超出自动溢出

代码都有注释,只为了大家能看的更清晰更明白,因为有写同学不太了解hack的处理方式。

下面是无注释版,复制就能用的:

min-height:400px;*+height:100%;_height:400px;

这种方式还是不错的,当然还有其它处理方法可以解决这样的小问题,有兴趣的同学可以深入研究下。不过浩子不想这么复杂,因为hack真的只是个小问题,前端开发更注重的应该是效率和交互,努力ing!!!!

感谢端友“renpengfeier”提供的方法,经测试可行:

min-height:400px; height:auto!important; height:400px;

转载请注明
分享到:
评论

相关推荐

    最小高度能自适应高度IE.FF全兼容的div设置.rar

    标题"最小高度能自适应高度IE.FF全兼容的div设置.rar"和描述"最小高度能自适应高度IE.FF全兼容的div设置"所指向的知识点,主要涉及到CSS(层叠样式表)中的最小高度(min-height)属性以及如何实现跨浏览器的兼容性...

    css+div自适应窗口宽度

    在示例代码中,`.divGlobal`, `.DivTop`, `.DivBottom`这三个类都设置了`min-width`为760px,这表示这些div元素的最小宽度为760像素。当浏览器窗口宽度小于760像素时,这些div元素的宽度将不再缩小,以保证内容的...

    拥有最小高度能自适应高度同时全兼容IE、FF的div设置

    总的来说,为了使div元素在不同浏览器中都具有最小高度并且能够自适应内容的高度,可以通过合理设置`min-height`属性,并辅以针对旧版浏览器的特殊处理和CSS优先级控制,以达到一致的显示效果。这种方法适用于需要...

    textarea高度自适应js代码

    min_height: 50, // 最小高度 max_height: 300 // 最大高度 }); ``` ... ``` 这个插件可以帮助开发者提高用户体验,特别是在处理用户输入大量文本的场景下。理解其工作原理和用法,能有效地在项目中应用这一功能...

    设置DIV最小高度以及高度自适应随着内容的变化而变化

    在网页设计中,我们经常需要对`<div>`元素进行高度控制,以便实现更好的视觉效果。...通过设置最小高度和自适应高度,我们可以确保在任何情况下,`<div>`都有良好的视觉表现,同时保持内容的可读性和布局的稳定性。

    html图片自适应手机屏幕大小的css写法

    总结以上知识点,我们了解到在HTML中使用CSS实现图片自适应手机屏幕大小的关键在于使用百分比宽度和自动高度的组合,确保盒模型的一致性,以及通过CSS Reset和重置默认布局减少浏览器间的差异。这些方法共同确保了在...

    iframe高度自适应

    利用CSS Flex布局也可以实现`<iframe>`的高度自适应。 ```html <iframe name="right" id="center_cent" src="center/center0.html" frameborder="0"></iframe> ``` ```css .container { display: flex; flex-...

    iOS WKWebView和UIWebView自适应高度

    在实际开发中,为了确保高度更新的流畅性,你可能还需要考虑一些额外因素,比如防止过度频繁地更新高度,可以设置一个最小更新间隔或只在内容高度变化较大时才更新。同时,如果HTML内容包含图片,可能需要等待所有...

    最小高度能自适应高度IE.FF全兼容的div设置特效代码

    标题 "最小高度能自适应高度IE.FF全兼容的div设置特效代码" 涉及的是前端开发中的一个常见问题,即如何在不同浏览器(尤其是IE和Firefox)中实现一个div元素的最小高度自适应其内容高度,并保持良好的兼容性。...

    div控制最小高度又自适高度

    这就需要我们寻找一种方法来兼容不同的浏览器,使得`div`能同时具备最小高度和自适应高度的特性。 解决这个问题的一种常见技巧是利用CSS中的`height`、`!important`和`min-height`属性。下面是对这个技巧的详细解释...

    CSS左侧固定宽 右侧自适应的实现代码(兼容所有浏览器)

    在父容器上启用flex布局,然后设置左侧栏的`flex-shrink`属性为0,以防止它缩小。HTML和CSS代码如下: ```html <div id="left">Left sidebar <div id="content">Main Content ``` ```css .container { ...

    jQuery.autoTextarea文本框自适应输入高度代码.rar

    minHeight: 50, // 最小高度 maxHeight: 300, // 最大高度 stepHeight: 20 // 高度增长步长 }); ``` `jQuery.autoTextarea`出自css88.com,这是一个专注于前端开发资源分享的网站,提供了一系列高质量的jQuery...

    CSS 实现高度自适应铺满整屏的实现

    在自己写demo的过程中,想使用display:flex实现垂直居中,代码如下: <style> #login{ width:100%; height: 100%; display: flex; justify-content: center; align-items: center;.../sty

    CSS实现网页背景图片自适应全屏的方法

    这样的CSS设置,可以让背景图片自适应屏幕大小,无论用户使用的是大屏显示器还是小屏幕设备,背景图片都能完美铺满屏幕且保持比例,不会随页面滚动而滚动。同时,最小宽度设置确保了在小屏幕设备上图片的清晰度,...

    宽度自适应的按钮。button,方便实用

    利用媒体查询,可以针对不同屏幕尺寸设置不同的CSS规则。例如,可以设定在小屏幕设备上,按钮的最小和最大宽度,以确保在各种环境下都能有良好的显示效果。 4. HTML结构与属性: HTML中的`<button>`或`...

    CSS:Div高度、宽度自应等技巧演示文件集合。

    1. **高度自适应(Height Auto Adjustment)**: - `auto`值:在CSS中,将Div的高度设置为`auto`可以使它根据内部内容自动调整高度。例如: ```css div { height: auto; } ``` - 使用`display: flex;`或`...

    CSS+DIV教程

    本篇文章将重点介绍如何使用CSS来控制元素的高度,包括CSS高度的基础概念、自适应高度设置方法、固定高度设置以及最小高度的实现技巧。 ### 一、CSS 高度基础知识 #### 1. CSS 高度定义 - **高度属性**:`height`...

    html高度自适应三种经典布局

    常见的流式布局实现是通过设置`width: %`来调整元素宽度,以及使用`max-width`和`min-width`限制元素的最大和最小宽度。 2. **响应式布局(Responsive Layout)** 响应式布局由 Ethan Marcotte 在2010年提出,其...

    Div+CSS基础代码网页布局+实例教程.pdf

    【CSS最小高度】 为了实现最小高度的效果,可以使用`min-height`属性。例如: ```css .yangshi { min-height: 50px; } ``` 这确保了元素至少有50像素的高度,即使内容较少时也会占据这个空间。 【CSS宽度自适应】 ...

Global site tag (gtag.js) - Google Analytics