HTML/CSS中，DIV高度自适应的解决方法

在WEB开发过程中，有些需求要求DIV的高度随着浏览器窗口的改变而改变。

这里我就列举两种情况：

① 顶部为一排菜单栏，下部为内容部。其中，要求，菜单栏高度固定，内容部随着浏览器窗口大小的改变而改变，示意图如下：

这种需求的处理的话，可按照如下的CSS来处理：

<div style="height: 100px; background: gray;">menu bar
</div>
<div style="position:absolute; width:100%; top:100px; bottom:0px; background: cyan;">content
</div >

② 网页上部用于显示搜索结果，下部是一些操作按钮，其中，要求，按钮行高度固定，搜索结果部随着浏览器窗口大小的改变而改变，示意图如下：

这种需求的处理的话，可按照如下的CSS来处理：

<div id="div1" style="position:absolute;bottom:40px; width:100%; background: gray;">search result
</div>
<div style="position:absolute; width:100%; bottom:20px; bottom:0px; background: cyan;">option button
</div >

主要的，还是要理解一下 "position:absolute" 的用法。

大小: 19.8 KB

大小: 22.3 KB

查看图片附件

HTML/CSS中，DIV高度自适应的解决方法相关推荐

css中div高度自适应
高度的自适应(父div高度随子div的高度改变而改变) 1.如果父div不定义height.子div均为标准流的时候,父div的height随内容的变化而变化,实现父div高度随子div的高度改变而改 ...
css 控制div高度自适应浏览器的高度
css 控制div高度自适应浏览器的高度 1 <html> 2 <head> 3 <style> 4 #myTable{height:100%;border:sol ...
CSS设置div高度自适应
通过CSS实现Div高度自适应: 问: 在一个DIV中有多个未知高度的子元素DIV,怎样通过CSS实现子元素div同高或怎样实现同行div按照内容最多的那个设置高度. 如图: 实现1:添加表格特性 ...
CSS中宽高度自适应
CSS中宽高度自适应 1.宽度自适应 (1)如果不写宽度,块状元素默认是浏览器的宽度,内联元素默认是内容的宽度,默认换行显示. (2)设置宽度为auto,块状元素默认是浏览器的宽度,内联元素默认是内容 ...
如何用css实现div高度自适应占满屏幕
如何用css实现div高度自适应占满屏幕不能使用准确的px值,应该用%作为尺寸的单位. 在样式表中将html,body的高度height设置为100% 在要需要站满屏的div设置width:100% ...
强迫症晚期患者：纯CSS实现div高度自适应浏览器。
我记得在学了网页自适应的内容后,每次写网页,力求宽高自适应.最后还是有一些困惑:写一个div给样式.(给定背景色和字体色是为了便于我们观察.) width:100%;background:white: ...
css实现div高度自适应
1.有时候,我们希望容器有一个固定高度,但当其中的内容多的时候,又希望高度能够自适应,也即容器在纵向能被撑开,且如果有背景,也能够自适应.在一般情况下,使用min-height即可解决.但是广大网民的 ...
css中的一些问题及解决方法
1.margin的各种问题 (1)竖向margin的叠加 margin横向上是加法,但在竖向上却会产生叠加的现象,并会取上下间距的其大者生效. (2)margin对行标签的影响行属性标签直接设置m ...
HTML变列自适应布局三行,CSS三行三列DIV高度自适应的设置
上一篇博客里引用了www.52css.com里的一篇关于使用脚本控制三行三列div高度自适应的设置方法,其实不必如此麻烦,只要给父div设置一个固定高度,比如10px,其子div的height:100 ...

HTML/CSS中，DIV高度自适应的解决方法

HTML/CSS中，DIV高度自适应的解决方法相关推荐

最新文章

热门文章