给div设置display：table 里面子元素div设置高度height：100% 失效的问题

小杰017 2017-12-13 10:55:40





<div style="display:table;height:100%">

        <div style="height:100%;"></div>

</div>

为什么里面的div高100%没有作用

...全文

1206 2 打赏收藏转发到动态举报

写回复

2 条回复

切换为时间正序

请发表友善的回复…

发表回复

郑小枫 2017-12-13

打赏
举报

回复

这不是很正常吗

针对学员疑问“div垂直居中？”引出的“CSS元素垂直居中一系列方法的探究”的针对性课程，课程包含两方面：1、文本垂直居中的解决方案；2、块级元素垂直居中的解决方案。

刚接触网页排版的新手，常出现这种情况：设置table和div的高height="100%"无效，使用CSS来设置height:"100%"也无效，为什么会这样呢？解决height:100%无效，table和div的解决方法并不相同。首先说一下table，他比较容易解决，当我们使用Dreamweaver来制作网页，新建一张网页，通常在代码头部会有类似以下的代码：没错，你猜对了，问

解决办法第一种：父元素设置position: relative, 子元素设置 position：absolute 第二种：给父元素加一层 box, 给 box 添加 flex 布局第四种：给子元素添加 min-height inherit,这个的问题在于，如果父元素的高度比 min-height 高，子元素不会自动变高第五种：给父元素添加 display: flex; flex-direction: column; 子元素添加 flex: auto;这个问题在于，没法设置为50%的高度。第六种： d

[转载1]https://www.cnblogs.com/stephen666/p/6995388.html DIV+CSS的布局已经让表格布局几乎很少用到，除非表格语义性很强的情况。 display：table解决了一部分需要使用表格特性但又不需要表格语义的情况，尤其是DIV+CSS很不方便解决的问题，比如以下两种情况：一、父元素宽度固定，想让若干个子元素平分宽度通常的做法是手动设置子元素...

父级div使用display:table-cell；vertical-align:middle会出现空隙。 1、html如下 2、css .divCon{ width:200px; height:200px; background:black; display: table-cell; vertical-align: middle; text-al

61,112

社区成员

60,730

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章