绝对位置，但调整父母的大小 [英] position absolute but resize parent

问题描述

我正在尝试使用div内的2个div来编码html。
有一个没有宽度或高度的父div。宽度是浏览器宽度，高度没有指定。
我想要在这个父div，2个div：第一个需要有一个宽度或250像素，第二个需要有其余的屏幕宽度。他们都错过了高度......取决于它里面有多少内容。
现在我试图让它像这样：

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

和css是这样的：

  #calendar {
 margin：0 auto; 
职位：亲属; 
 overflow：hidden; 
} 
 #calendar #list {
 background：＃f00; 
位置：绝对; 
 width：250px; 
剩下：0; 
 top：0; 
} 
 #calendar #grid {
 background：＃0f0; 
位置：绝对; 
 left：250px; 
 top：0; 
 right：0; 
} 
  

现在的问题是，父div不会调整大小，孩子divs

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

预先感谢您，
Daniel！

解决方案

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

将#list浮动它的给定宽度，然后给#grid相同的保证金左。

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

i am trying to code an html with 2 divs inside a div. There is a parent div with no width or height.. the width is the browser width and the height is not specified. I want inside this parent div, 2 divs: 1st one needs to have a width or 250px and the 2nd one needs to have the rest of the screen's width. They both are missing the height.. depending how much content there will be inside it. Now i was trying to make it like this:

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

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

and the css like this:

#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;
}

now the problem is, the parent div doesnt resize when i add content to the children divs

I hope there is a workaround with the CSS to solve this cause it would be bad to do it via JS.

Thank you in advance, Daniel!

解决方案

Here's my solution -> http://tinkerbin.com/Z8mJmItU

Float the #list with its given width, then give #grid the same margin-left.

Then to get both columns to look like they have 100% of the height of the parent-container you need an image. Before you'd have to use an 'actual image'. Today you can simply rely on css3 gradients for backgrounds making your page load faster (1 less http request for the image). It may seem more complicated, but it actually isn't 'that' complicated. It even ends up giving you more flexibility since you can change the width and color of the columns without needing to create a new image. All you need is to change the css.

这篇关于绝对位置，但调整父母的大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！