位置绝对，但调整大小父母

我想编码一个div内的2个div的html。有一个父div没有宽度或高度..宽度是浏览器的宽度和高度没有指定。我想在这个父div，2 divs：第一个需要有一个宽度或250像素，第二个需要有屏幕的其余部分宽度。他们都错过了高度......取决于它里面有多少内容。现在我试图让这样的：位置绝对，但调整大小父母

<div id="calendar"> 
     <section id="list"> 
     </section> 

     <section id="grid"> 
     </section> 
</div>

像这样的CSS：

#calendar { 
    margin: 0 auto; 
    position: relative; 
    overflow: hidden; 
} 
#calendar #list { 
    background: #f00; 
    position: absolute; 
    width: 250px; 
    left: 0; 
    top: 0; 
} 
#calendar #grid { 
    background: #0f0; 
    position: absolute; 
    left: 250px; 
    top: 0; 
    right: 0; 
}

现在的问题是，父DIV犯规调整大小时，我将内容添加到孩子的DIV

我希望有一个解决方法与CSS来解决这个问题，这将是不好的，通过JS做到这一点。

谢谢你，丹尼尔！

来源

2012-06-28 Pacuraru Daniel

你需要使用'position：absolute'吗？你可以使用'position：static'和'float'来实现这一点，父母将保持其高度 –

我试着你的例子，我会进一步的问题，因为第二个div没有宽度大小..所以如果我添加一个div里面，并将其设置为父母的100％，它将在第一个div下面 –

我在这里做了1个小提琴http://jsfiddle.net/yY2wy/7/ –

这里是我的解决方案 - >http://tinkerbin.com/Z8mJmItU

浮球随其给定宽度#list，然后给#grid相同保证金左。

然后，让两列看起来像他们有100％的父容器的高度，你需要一个图像。在你不得不使用“实际图像”之前。今天，您可以简单地依靠css3渐变来获得更快的页面加载速度（对图像的http请求减少1个）。这看起来可能更复杂，但实际上并不是那么复杂。它甚至可以给您更多的灵活性，因为您可以在不需要创建新图像的情况下更改列的宽度和颜色。所有你需要的是改变CSS。

来源

2012-06-28 12:01:06 banzomaikaka

与你的想法和一些小的变化，我做了我想要实现的：D我使用了相对位置的儿童divs和使用margin-left：250px;相反左：250像素，它的作品就像一个魅力..非常感谢你的帮助JOPLOmacedo，并感谢大家的话题！ –

没问题！很高兴我帮了忙。 – banzomaikaka

还没有工作链接 –

如果您打算使用绝对值，则需要指定高度。那么它应该工作。

编辑

在子元素中使用

position: relative;

。

EDIT 2

也许这一职位将与你所追求的帮助？ Div width 100% minus fixed amount of pixels

来源

2012-06-28 11:23:19 Danny

我现在给他们添加了一个高度，父div仍然是0像素高度 –

我刚刚做了，内容消失 –

你需要它们是绝对的吗？相对会更容易使父div伸展。 – Danny

不要使用定位，使用float ...与您当前的方法父母将崩溃，唯一的方法来确定所需的父母的高度将是计算最高的子元素的高度（通常，用JavaScript）。

<div id="calendar"> 
     <section id="list"> 
     </section> 

     <section id="grid"> 
     </section> 
     <div class="clear"></div> 
</div>

...和CSS ...

#calendar { 
    margin: 0 auto; 
    position: relative; 
} 
#calendar #list { 
    background: #f00; 
    float:left; 
    width: 250px; 
} 
#calendar #grid { 
    background: #0f0; 
    margin-left: 250px; 
} 
.clear{ 
    clear:both; 
}

这样的#calendar将高度调整到最高的子元素。另外请记住删除溢出规则。

...上面为了简单起见，你应该看看使用clearfix（通过向#calendar添加一个类） - read more here。

来源

2012-06-28 11:46:16 Jayx

位置绝对，但调整大小父母

回答

相关问题