Css 从获取父容器的绝对子容器展开父容器'；s的大小来自父级

我正在开发我的第一个drupal站点，尽管我有很好的web编程技巧（css、jscript、php），但我正在尝试尽可能完整地使用drupal标记模板

我的问题是一个3栏响应的网站，我没有太多的经验。我的左栏和右栏（13%+1%边距）是div，它们在视觉上表示沿着父容器长度向下延伸的彩色条纹，而中间div（72%）是内容所在的位置。问题是，我决定让父容器控制子div的大小，方法是将子div设置为绝对值，并使用边距将子div拉伸到父div的维度（顶部：x；左侧：x；底部：x；右侧：x；）-要拉伸垂直方向，我使用父容器：在和显示：块之后；垫面：xx%

这些列由菜单包装器垂直拆分，虽然顶部容器具有设置的高度（padding top:xx%），但底部容器需要根据内容进行扩展

问题：如果子对象从父对象获取大小，如何使子对象根据子对象的内容调整父对象的大小？谢谢

#main-wrapper {
    position:relative;
    width:100%;
}

#main-wrapper:after {
    content:"";
    display:block;
    padding-top:46%;
}

#main-wrapper-left{
    position:absolute;
    top:0;left:1%;bottom:0;right:86%;
    background:#CC0000; 
}

#main-wrapper-left img {
    width:100%;
    display: block;
}

#main-wrapper-left a{
    display:block;
}

#main-wrapper-right{
    position:absolute;
    top:0;left:86%;bottom:0;right:1%;
    background:#0600ff;
}

#main-wrapper-center{   
    position:absolute;
    top:0;left:14%;bottom:0;right:14%;
    background: #ffffff;
}

<div id="main-wrapper">
    <div id="main-wrapper-left"> images and links go here </div>
    <div id="main-wrapper-center"> header slideshow goes here </div>
    <div id="main-wrapper-right"> images and links go here </div>
</div>

<div> menu </div> // this is where the menu div goes which splits the page page in two

<div id="main-wrapper">
    <div id="main-wrapper-left"> advertisements </div>
    <div id="main-wrapper-center"> main content goes here </div>
    <div id="main-wrapper-right"> advertisements </div>
</div>

#主包装器{
位置：相对位置；
宽度：100%；
}
#主包装：后包装{
内容：“；
显示：块；
垫顶：46%；
}
#左主包装器{
位置：绝对位置；
顶部：0；左侧：1%；底部：0；右侧：86%；
背景：#CC0000；
}
#主包装器左img{
宽度：100%；
显示：块；
}
#主包装器留下了一个{
显示：块；
}
#主包装右{
位置：绝对位置；
顶部：0；左侧：86%；底部：0；右侧：1%；
背景：#0600ff；
}
#主包装中心{
位置：绝对位置；
顶部：0；左侧：14%；底部：0；右侧：14%；
背景：#ffffff；
}
图片和链接在这里
标题幻灯片显示在这里
图片和链接在这里
menu//menu div将页面一分为二
广告
主要内容在这里
广告

切勿对布局的主要部分使用

position:absolute

。这是一个痛苦的世界，只是不值得。列有许多选项，如

浮点

、

显示：内联块

或

显示：表格单元格

，因此根本不需要定位。：-）你也犯了一个错误，使用了两次身份证。如果你需要重复一个元素，用一个类来代替。如果我要重写，我想我会用3个div来显示：inline block。。。如何以流体方式设置其高度？默认情况下，无论您使用

float

还是

inline block

还是

display:table

，它们的高度都是流体。只是

position:absolute

跳出了文档流，很难管理。我想我想说的是，如何将它们的高度设置为父容器的100%，而不失去流动性？并不是每个div都塞满了足够的内容，可以让它们拉伸到我需要的总高度。高度：100%是很棘手的，因为它只在父级有一个设置的高度时起作用，而这通常是你不想要的。我认为最好的选择是在父级上使用display:table，在列上使用display:table单元格，因为这样至少可以保持所有列的高度相同。