HTML / CSS div, который перекрывает родительский div - PullRequest
Новая
       4

HTML / CSS div, который перекрывает родительский div

1 голос
/ 02 ноября 2011

Итак, я построил несколько сайтов и всегда мог решить эту проблему, так или иначе.Но на этот раз я застрял.

У меня есть 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

1 Ответ

2 голосов
/ 02 ноября 2011

Определяя высоту 100% для оболочки, вы ограничиваете ее высотой окна браузера.Очень длинный div увеличит это ограничение из-за его установленной высоты.

Чтобы исправить это, удалите высоту 100% из оболочки и любых других контейнеров, если вы хотите ограничить содержимое до размера видимогодокумент, вы могли бы установить ваши divs в положение: абсолютное, а затем установить верхнюю, левую, правую и нижнюю конечности экрана.

...