div高度 50% 不起作用

2024-11-05

HTML学习之给div高度设置百分比不生效的问题

这几天在学习HTML的知识,今天想做一个极为简单的页面,就是分为头部,内容和底部,本来用三个div即可,可是给div高度设置百分比时发现不生效,具体页面如下,非常简单. 下面是html部分: <body> <div id="header"> 11111111 </div> <div id="content"> 2222222222 </div> <div id="footer"&g

纯CSS实现Div高度根据自适应宽度（百分百调整）

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>纯CSS实现Div高度根据自适应宽度(百分百调整)</title> </head> <style> .father { width: 100px; height: 100px; background: #222 } .element { width: 50%; height

在如今响应式布局的要求下,很多能自动调整尺寸的元素能够做到高宽自适应,如img,通过{width:50%;height:auto;}实现图片高度跟随宽度比例调整. 然而,用的最多的标签一哥Div却不能做到自动调整(要么从父级继承,要么自行指定px,要么给百分比!但是这个百分比是根据父级的高度来计算的,根本不是根据元素自身的宽度,那么就做不到Div的宽高达成一定的比例=-=). 要实现这种功能(div的高度:宽度=1:1),通过各种加Buff,得知有以下几种处理方式 1,直接指定div的宽高+zo

css中div高度自适应

高度的自适应(父div高度随子div的高度改变而改变) 1.如果父div不定义height.子div均为标准流的时候,父div的height随内容的变化而变化,实现父div高度随子div的高度改变而改变. <style type="text/css"> #aa{min-height: 1em;} #bb{height: 55px;} #cc{height: 66px;} </style> <div id="aa">父div <

父类div高度适应子类div

父类div高度适应子类div 通常有许多div的高度由子类的高度决定父类的高度,所以需要父类div要适应子类div的高度,一般情况父类的高度可以直接设置成“auto”即可. 在有的情况下,子类div会撑破父类div. 所以需要走一些调整.通常有3种方法对高度进行调整: 方法一:直接设置父类高度(不过通常不适用) 方法二:清除浮动属性方法三: ----------------------------- 个人经常忘记浮动属性,导致排版出现问题.所以喜欢将内部有浮动属性的div添加一个border

如何设置div高度为100%

div高度通常都是固定值,直接将div高度设为100%是无效的,那么如何设置才能有效呢? 直接给div设置height:100%即可,无效的原因一定是父元素的高度为0,最常见的就是给body的直接元素设置height:100%无效,修改办法就是设置html,body{height:100%},这两个元素的默认高度是0

如何让两个并列的div高度相等

哪个div Height值大,就将其值赋给Height值小的div,从而使2个div高度始终保持一致. function $(id){ return document.getElementById(id) } function getHeight() { if ($("left").offsetHeight>=$("right").offsetHeight){ $("right").style.height=$("left&quo

div高度自适应（总结：min-height:100px; height:auto;的用法）

对于div高度自适应问题,我总是用一句话:height:auto来解决. 但是很多时候我们需要的是当div内部有内容时,高度会随着内容的增加和增加,当div中没有内容时,div能够保持一个固定的高度. 具体可以用以下方法解决: height:auto !important; min-height:100px; height:100px; 详细讲解参见:总结:min-height:100px; height:auto;的用法

CSS布局：div高度随窗口变化而变化(BUG会有滚动条)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>CSS布局:div高度随窗口变化而变化</

限制div高度当内容多了溢出时显示滚动条

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type"content="text/html; charset=utf-8" /> <title>限制div高度,内容多了显示滚动条</title> <style type="text/css"> div{ border-radius:5px;bord

<转载>如何解决子级用float浮动父级div高度不能自适应的问题

转载:http://www.kwstu.com/ArticleView/divcss_2013101582430202 解决子级对象使用css float浮动而父级div不能自适应高度,不能被父级内容撑开解决方法,父级div没有高度解决方法. 最外层的父级DIV不能自适应高度-不能随对象撑开没有高度当在对象内的盒子使用了float后,导致对象本身不能被撑开自适应高度,这个是由于浮动产生原因. 如何解决父div对象自适应高度,方法有三种,接下来DIVCSS5逐一介绍. 1.首先我们先看HTML

四种方法解决DIV高度自适应问题

本文和大家重点讨论一下解决DIV高度自适应的方法,这里主要从四个方面来向大家介绍,相信通过本文学习你对DIV高度自适应问题会有更加深刻的认识. DIV高度自适应关于DIV高度的自适应,一直是个让人头疼的问题,整理了一下以前总结的方法,仅表示我也玩过. htmlcode: <div id="container"> <dividdivid="leftSide">这边的高度自适应右侧的高度</div> <dividdivid=&

css 子div自适应父div高度

<div class="out"> <div class="a"></div> <div class="b"></div> <div class="c">当父DIV高度变化随里面DIV高度不同而变化的时候,子DIV仍然能充满高度.</div> </div> .out{ border:1px solid #c0c0c0; overfl

CSS实现div高度自适应

1.有时候,我们希望容器有一个固定高度,但当其中的内容多的时候,又希望高度能够自适应,也即容器在纵向能被撑开,且如果有背景,也能够自适应.在一般情况下,使用min-height即可解决.但是广大网民的首选浏览器ie6并不支持min-height.ie7,opera,火狐,谷歌没有问题.所以采用以下写法可以解决兼容性: height:auto!important; height:200px; min-height:200px; 2.很多朋友反映用上面的方法后,在有些时候依然无法解决容器无法撑开自适

DIV高度自适应及注意问题(转)

本文和大家重点讨论一下DIV高度自适应及注意问题,主要包括父div高度随子div的高度改变而改变和子div高度随父亲div高度改变而改变两种情况. DIV高度自适应及注意问题积累了一些经验,总结出一些关于div高度自适应的技巧,希望有助于大家,转载请标明出处,谢谢. 一.DIV高度自适应(父div高度随子div的高度改变而改变) 1.如果父div不定义height.子div均为标准流的时候,父div的height随内容的变化而变化,实现父div高度随子div的高度改变而改变. 代码: <sty

div高度不能自适应（子级使用float浮动，父级div高度不能自适应）

1.问题截图: 2.问题描述: 由于地址.公司名长度的不定性,所以每一条地址所在的父级div高度不定,但是需要设置一个最小的高度min-height:48px;但是当内容增加的时候,父级div高度却不能自适应 3.HTML代码: <div class="right-info3"> <div class="address_info"> <li class="company">深圳华东纱线纺织有限公司</li

html div高度100%无效

移动端相关: div高度继承自父元素——>body——>html 解决方案: html,body { height: 100%;margin: 0; padding: 0;} 然后对应的div设置高度——height:100% 则可以生效

让一个父级div根据子级div高度而自适应高度

需求是点击上传的时候进行子级div高度不定,相对来说父级div高度也不能固定,把元素都设置成普通标准流,然后样式可以使用margin内边距或者padding外边距来进行调节放上代码供参考: .opus_upload_img_body_third_div{ background: #FFFFFF; width: %; margin-top: 12px; height: auto; } .opus_upload_img_body_header_div_span{ font-size: 14px;

JS获取div高度的方法

有时在写页面时,需要获取一个div的高度.怎么才能获取呢?哈哈,先上结论.有两种方法. offsetHeight .clientHeight getComputedStyle offsetHeight 与 clientHeight 这两个属性都能获取元素的高度,它们有什么区别呢? 代码说话~ <!DOCTYPE html> <html> <head> <title>demo</title> <meta charset="utf-8

关于让左右2个DIV高度相等

哪个div Height值大,就将其值赋给Height值小的div,从而使2个div高度始终保持一以下是代码: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>div高度相等</title> <style type="text/css"> #left{background:#