Question

所以，我已经构建了多个站点，并且可以随时解决这个问题。但是这次我被困住了。

我有一个包装div，在这个div中我有两个div。当内部div超过包装div的长度时，它只是重叠它。我的目标是包装器div获得与内部div相同的高度。

以下是我使用的代码：

<body>
    <!-- Begin of site -->
    <div id="wrapper">
        <!-- Site Wrapper -->
        <div id="site-wrapper">
            <!-- Header -->
            <div id="header"></div>
            <!-- end Header -->
            <!-- Column positioner -->
            <div id="colpos">
                <!-- Column Left -->
                <div id="columnLeft">
                    <div id="mainWrap">
                        <div id="contentBar"></div>
                        <div id="main">
                            Content 
                            <div id="longDiv">Very long</div>
                        </div>
                    </div>
                </div>
                <!-- Column Right -->
                <div id="columnRight">
                    <div id="links">
                        <div id="navBar"></div>
                        Links
                    </div>
                </div>              
            </div>
            <!-- einde Column positioner -->

            <div id="footer">Copyright</div>
        </div>
        <!-- end Site Wrapper -->
    </div>
    <!-- end  site -->
</body>

和相应的CSS：

    /*==============================
    SITE RESETS
===============================*/
html {
    margin: 0px;
    padding: 0px;
    font-family: Calibri, arial;
}

body{
    margin: 0px;
    padding: 0px 0px 50px 0px;
    border: 0px;
    background: url('img/background.png');
}


a img { border:none; }

#longDiv{
    height: 2000px;
    color: white;
    background-color: black;
}

/*==============================
    SITE WRAPPER
===============================*/
#wrapper{
    width: 1200px;
    margin: 0px;
    padding: 0px;
    border: 0px;
}

#site-wrapper{
    width: 970px;
    margin: 0px 0px 30px; 
    padding: 0px;
    border: 0px;
    position: relative;
    background-color: #ebebeb;
    left: 115px;
    top: 30px;
}

#header{
    clear: both;
    min-width: 970px;
    width: 100%;
    height: 190px;
    margin: 0px;
    padding: 0px;
    border: 0px;
    background: #fff url('img/header.png');
    background-repeat: repeat-x;
    position: relative;
    top: 30px;
}

#colpos{
    clear: both;
    float: left;
    height: 100%;
    min-height: 100px;
    width: 920px;
    padding: 50px 20px 20px 20px;
    margin: 0px;
    border: 0px;
}

#columnLeft
{
    float: left;
    width: 620px;
    height: 100%;
    min-height: inherit;
    margin: 0px;
    padding: 0px;
    border: 0px;
}

#columnRight
{
    float: right;
    width: 265px;
    height: 100%;
    min-height: inherit;
    margin: 0px;
    padding: 0px;
    border: 0px;
}

/*==============================
    Content
===============================*/
#mainWrap{
    float: left;
    width: 100%;
    height: 100%;
    min-height: inherit;
    margin: 0px;
    padding: 0px;
    background: white;
    border: 1px solid #689e9f;
}

#contentBar{
    float: left;
    min-width: 620px;
    width: 100%;
    min-height: 23px;
    margin: 0px;
    padding: 0px;
    border: 0px;
    background: #689e9f url('img/content.png');
    background-repeat: no-repeat;
}

#main{
    clear: both;
    height: 100%;
    min-height: inherit;
    float: left;
    margin: 5px 5px 5px 5px;
    max-width: 620px;
    height: inherit;
    font-family: Calibri, arial;

}

#links{
    float: left;
    width: 100%;
    min-height: 250px;
    margin: 0px;
    padding: 0px;
    background: white;
    border: 1px solid #689e9f;
}

#navBar{
    float: left;
    min-width: 265px;
    width: 100%;
    min-height: 23px;
    margin: 0px;
    padding: 0px;
    border: 0px;
    background: #689e9f url('img/nav.png')  right;
    background-repeat: no-repeat;
}

#footer
{
    clear: both;
    margin: 10px 10px 10px 10px;
    width: 50%;
    position: relative;
    top: 0.5em;
    left: 25%;
    font-family: Calibri, arial;
    color: white;
    text-align: center;
    font-style: italic;
    background-color: #689e9f;
}

我的问题简而言之： http://i.stack.imgur.com/bBW8g.jpg

我尽可能多地发布了我的代码，希望你们中的一位能指出我一直在犯的错误。我通常不会在网上寻求帮助，但这个问题一直困扰着我。

提前致谢， EvilTuinhekjeNL

Answer 1

通过为包装器定义100％的高度，您将其限制为浏览器窗口的高度。非常长的div会因为它的设定高度而延长这个限制。

要解决此问题，请从包装器和任何其他容器中移除100％的高度。如果要将内容限制为可查看文档的大小，可以将div设置为position：absolute然后设置top，左，右和底到屏幕的四肢。

HTML / CSS div与父div重叠

1 个答案: