html – 向右浮动并填充父级

概述当元素在相对定位的元素中浮动时,如何使高度填充父元素？ <div id="page"> <div id="left"></div> <div id="right"></div></div> #page { width: 980px; padding: 10px; background: #3C4B76; display: block; margin: 10px aut 当元素在相对定位的元素中浮动时,如何使高度填充父元素？

<div ID="page">  <div ID="left"></div>  <div ID="right"></div></div>

#page {  wIDth: 980px;  padding: 10px;  background: #3C4B76;  display: block;  margin: 10px auto auto auto;  position: relative;}#left {  padding: 0;  margin: 0;  wIDth: 230px;  float: left;}#right {  float: right;  wIDth: 720px;  border-left: 1px solID white;  padding: 5px 5px 5px 20px;  height: 100%;  position: relative;  display: block;}

在这个例子中,#right元素没有填充’#page’元素,它只是增长到与内容一样大.如果它小于#page,我希望#right填充父级.

解决方法 为父母试试这个：

overflow:auto;

另一种方案：

父：

display: table;

儿童：

display: table-row;

检查这个fiddle

更新：
要使用跨浏览器CSS设置相等的高度列,您应该阅读此Matthew James post

总结

以上是内存溢出为你收集整理的html – 向右浮动并填充父级全部内容，希望文章能够帮你解决html – 向右浮动并填充父级所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。