Html CSS溢出问题，div不包含内容

如何使cols包含整个botcol区域。我意识到这是非常基本的，但我已经挣扎了一段时间，提前感谢你的帮助

Html:

---

你能把这个放进一把可用的小提琴里吗？^是的，我懒得为你做小提琴，你能做一把并放在这里吗？只是试了一下，没有结果。问题是它的大部分是带有图像的空白区域，在看不到整个文件的情况下很难查看。你能想出任何可能导致或解决此问题的css吗？尝试使用display:table在一些地方尝试过，但没有成功，你希望我将其应用于哪个元素

<div id="content">
        <img id="worldmap" src="worldmap.png"/>
        <div id="cols">
            <div id="topcol">
                ...
            </div>
            <div id="botcol">
                <div id="infopanel">
                    ...
                </div>
            </div>

div#container{
    margin-left: auto;
    margin-right: auto;
    width: 70%;
    height:100%;
    position: relative;
    border: grey solid 1px;
}
#cols {
    z-index:1;
    position: absolute;
    top:0;
    left:0;
    height:100%;
    width:100%;
    overflow:auto;
}
#topcol {
    width:100%;
    overflow:auto;
}
#botcol {
    height:100%;
    width:100%;
}
div#content{
    position:relative;
}