html中div高度问题
让DIV的高度随内容的增多而加大,这个的话,就是设置一个div的height:auto;
这个意思就是height自动去增加,只要内容增加,div容不下了,就会自动增加;
这里我写段代码:
div高度自动增加
#div1{
widrh:960px;
height:auto;
}
我是测试文字
这里只要你的字,越写越多自然就会自动增加了。
html中的div排版是通过css样式控制的。
DIV+CSS布局中主要CSS属性介绍:
Float:
Float属性是DIV+CSS布局中最基本也是最常用的属性,用于实现多列功能,我们知道标签默认一行只能显示一个,而使用Float属性可以实现一行显示多个div的功能,最直接解释方法就是能实现表格布局的多列功能。
Margin:
Margin属性用于设置两个元素之间的距离。
Padding:
Padding属性用于设置一个元素的边框与其内容的距离。
Clear:
使用Float属性设置一行有多个DIV后(多列),最好在下一行开始之前使用Clear属性清楚一下浮动,否则上面的布局会影响到下面。
DIV+CSS布局教程
#Container{
width:1000px;
margin:0 auto;/*设置整个容器在浏览器中水平居中*/
background:#CF3;
}
#Header{
height:80px;
background:#093;
}
#logo{
padding-left:50px;
padding-top:20px;
padding-bottom:50px;
}
#Content{
height:600px;
/*此处对容器设置了高度,一般不建议对容器设置高度,一般使用overflow:auto;属性设置容器根据内容自适应高度,如果不指定高度或不设置自适应高度,容器将默认为1个字符高度,容器下方的布局元素(footer)设置margin-top:属性将无效*/
margin-top:20px;/*此处讲解margin的用法,设置content与上面header元素之间的距离*/
background:#0FF;
}
#Content-Left{
height:400px;
width:200px;
margin:20px;/*设置元素跟其他元素的距离为20像素*/
float:left;/*设置浮动,实现多列效果,div+Css布局中很重要的*/
background:#90C;
}
#Content-Main{
height:400px;
width:720px;
margin:20px;/*设置元素跟其他元素的距离为20像素*/
float:left;/*设置浮动,实现多列效果,div+Css布局中很重要的*/
background:#90C;
}
/*注:Content-Left和Content-Main元素是Content元素的子元素,两个元素使用了float:left;设置成两列,这个两个元素的宽度和这个两个元素设置的padding、margin的和一定不能大于父层Content元素的宽度,否则设置列将失败*/
#Footer{
height:40px;
background:#90C;
margin-top:20px;
}
.Clear{
clear:both;
}
这里设置了padding属性介绍一下padding的用法,padding将设置文本与边框的距离。
Content-Left
Content-Main
Footer
运行效果:
如果可以不考虑IE67可以用display:table布局:
HTML:
<div class="outer">
<div class="inner-title">
A
</div>
<div class="inner-content">
B
</div>
</div>
CSS:
.outer{
background-color:blue;
height:400px;
display: table;
width:100%
}
.inner-title{
background-color:#CCC;
display:table-row;
width:100%;
height:100px;
}
.inner-content{
background-color:#888;
display:table-row;
width:100%;
}
IE6和IE7下估计只能用JS算高度了
你父div高度固定,下只有两个子。上面也固定。把父-上div不就等下了吗。如果你说你父的高度值不确定。那就不是固定的啊。所以还是没怎么理解的的意思。最好能晒图。让后才能帮你解决。对自动高度的问题我还是解决过挺多的
这是x=a-b的问题么?下面那个div的高度岂不是也是固定的。。
题目可以简化成这样:有3个固定高度的div,1个父div包含2个上下排列的子div,知道父div高度和其中一个子div的高度,求另外一个子div的高度。
虽然固定高度,但是不知道其确定值?
额,有点矛盾。
怎样在div中设置宽度和高度?
1、首先,打开html编辑器,新建html文件,例如:index.html,编写问题基础代码。2、在index.html中的<input>标签中新增样式代码:style="width: 200px;height:60px;"。3、浏览器运行index.html页面,此时input框的宽度被设置为200px,高度被设备为60px了。
div设置宽高(div默认宽度)
HTML 页面中,html 和 body 标签的height是auto的。如果要设置div 的高度跟浏览器一致,则要先将html 和 body 的高度设置为100%。如果设置了父类标签的百分比高度,但是当前div 的高度还是不能以百分比的形式放大缩小时,要考虑当前div 的子类标签的高度是否都是以固定像素定义的。如果是,则也要统一...
html如何将div置于最上层
1、新建一个html文件,命名为test.html,用于讲解html如何将一个div置于最上层。2、在test.html文件内,使用div标签创建两个模块,并分别设置它们的id为testone,testtwo。3、在css标签内,统一设置div的样式,定义它们的位置属性为绝对定位,宽度和高度为300px。4、在css标签内,设置id为testone的样式,...
HTML中.div1{height: 55px; line-height: 55px; text-align:center}是...
.div1 表示一个类,类名是div1,对应html中的classname属性,如果网页中有一个div或其他html元素的classname="div1",则大括号中的样式,会作用在这个元素上。大括号中,为样式,采用 属性:属性值的方式。依次为:高度:55px 设置行间的距离(行高):55px 文字居中。还有很多类似的属性,不...
DIV高度怎么设置全屏?
要想对DIV设置全屏,一般设置其width宽度样式为100%,设置其width宽度样式为100%有两种方案,具体方案如下。(一)方案一 1.Html:<div class="outer"> <div class="A"> 头部DIV <\/div> <div class="B">下部DIV <\/div> <\/div> 2.CSS:html,body { height: 100%; padding: 0; margin: ...
html中怎么设置一个div的高度是另一个div高度的倍数?
column; height:100%"> <div style="flex:1 1 auto; background-color: #fa8">1<\/div> <div style="flex:2 2 auto; background-color: #af8">2<\/div> <div style="flex:3 3 auto; background-color: #888">3<\/div> <\/div> 三个子div的高度比例为 1:2:3 ...
html页面有两个上下排列的div,头部div的高度为固定的,底部div的高度是...
头部div固定的,用固定像素值设定高度 底部div是动态的,用百分比来设定高度
html 怎么按百分比设置div高度
先给父级<div>设置宽度(像素)然后再子<div>里,设置百分比,如图示。代码原件:<div style="width:80px;height:50px; border:#FF0000 3px solid"> <div style="width:20%;height:50%; border:#CC33FF 3px solid"><\/div> <\/div> 复制到<body><\/body>之间使用即可。
用html5开发手机网站,div的高度与宽度比例怎么来设定
div的100%是从其上一级div的宽高继承来的,有一点很关键,就是要设置div100%显示,必须设置其上一级div的宽度或高度,否则无效。举例说明:父div(deman)宽300高200,子div(cc)如果在这个条件下设置divcc的宽高都为100%的话,那cc的确切大小就是父div的大小(宽300高200),在尝试中你会发现,div...
怎样让两个div保持相同的高度
1、新建一个html文件,命名为test.html,用于讲解jquery怎么设置div高度。2、在test.html文件内,引入jquery.min.js库文件,成功加载该文件,才能使用jquery中的方法。3、在test.html文件内,使用div标签创建一个模块,并使用css设置其宽度为50px,背景颜色为红色。4、在test.html文件内,设置div标签的...
歹彭欧普: 这是x=a-b的问题么?下面那个div的高度岂不是也是固定的.. 题目可以简化成这样:有3个固定高度的div,1个父div包含2个上下排列的子div,知道父div高度和其中一个子div的高度,求另外一个子div的高度.虽然固定高度,但是不知道其确定值? 额,有点矛盾.
乌海市19238643070: div设置宽高(div默认宽度) ?
歹彭欧普: div默认宽度在头部标签前面输入width就是div的宽度,height就是div的高度,px值是单位,想设置不同的宽度和高度只需要改变width和height的数值就行了div如何根据实际...
乌海市19238643070: DIV的宽度和高度问题 - ?
歹彭欧普: 1、你可以把div设置自适应的高度和宽度,这样的话div高度和宽度会随内容增加.2、你把可以给div一个超出部分隐藏的属性即 overflow hidden 属性 一般来说给div自适应高度和宽度常见于手机页面,在pc上固定的宽和高比较常见,只有在一些特别地方pc页面才能见到高度和宽度都是自适应的div,可以页面情况使用不同的方法,有什么不懂可以继续追问!
乌海市19238643070: html 怎么按百分比设置div高度 - ?
歹彭欧普: 原理: 先给父级<div>设置宽度(像素) 然后再子<div>里,设置百分比,如图示.代码原件: <div style="width:80px;height:50px; border:#FF0000 3px solid"> <div style="width:20%;height:50%; border:#CC33FF 3px solid"></div> </div> 复制到<body></body>之间使用即可.
乌海市19238643070: 怎么让div的高度自适应屏幕的高度 - ?
歹彭欧普: body ,html的高度都设置为100%;然后用百分比设置div高度,div高度百分比是按他父元素算的,所以他父元素设置有高度他的百分比高度才有效
乌海市19238643070: css中div的高度是用百分比设置的,怎样让div内的元素垂直居中? - ?
歹彭欧普: 做了一年前段,还从来没有把高度设置成百分比.响应式页面可以设置宽度为百分比,高度都是固定的.假设如果父div高度为height:50px;宽度为:width:200px;1,如果div内为文本,可以设置包含文本的元素:line-height:50px; text-align:center;2,如果div内的子元素为块级元素或宽度为百分比,需要通过position定位left:50%;margin-left:-50px如果宽度不是百分比可以直接用margin计算居中 如果不确定高度,可以用margin,padding撑开
乌海市19238643070: CSS中DIV高度 - ?
歹彭欧普: 在div里面加一些textfield或者label,把属性设为隐藏即可.回复:其实,一般需要在网页中获取某一个值,或者控制页面的显示样式,我们经常用到隐含域,这是专门处理这类问题而产生的特殊控件,不同于普通的button,label等等.你的情况主...
乌海市19238643070: css 设置div 高度无效 - ?
歹彭欧普: 只需要把HTML或BODY的高度设置为100%,然后在body内的任意DIV的高度用百分比表示,就可以了.具体代码如下:网页顶部 网页内容 网页底部
乌海市19238643070: CSS+DIV问题!DIV的最小高度问题! - ?
歹彭欧普: 这个其实很简单,只要加上两条语句就行了. #obj{ min-height:500px; _height:500px; } 第一条min-height:500px这是针对IE7和FF的,因为IE6不支持min-height属性.而第二条是用了hack,因为_height只有IE6才认识,对IE7和FF不起作用.因为IE6里面,如果内容超出了height指定的高度,则容器会被撑大.切记不能给#obj加overflow:hidden;属性哦.
乌海市19238643070: css样式高度为什么引用到div里却出来两个高度,这是什么意思?(图) - ?
歹彭欧普: 一个是预设值 一个可能是因为div中的东西撑开的实际值 div里的东西超出了预设的值了