Что не так с моим макетом div?

Question

Что не так с моим макетом div?

0

Кажется, я не могу подобрать нижний колонтитул. Он всегда находится в нижней части моего контейнера div, но мой контейнер div всегда имеет высоту: 0. Я попытался установить переполнение в скрытое в контейнере div, но высота была 0, и все остальные мои divs исчезли. Что не так? Вот мой css и html.

Благодарю.

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

    <head></head>

    <body background="images/bg.png">
        <div id="contentcontainer">
            <div id="header">
                <img src="images/banner.png" />
            </div>
            <div id="nav">
            </div>
            <div id="form">
                <!--This is where the form goes-->
            </div>
            <div id="content">
                <!--This is where the content goes-->
            </div>

            <div id="submission"></div>
            <div id="footer">
                <p id="footertext">Copyright  2013 me.com. All rights reserved.</p>
            </div>
        </div>
    </body>

</html>

CSS:

@charset"utf-8";

/* CSS Document */
 #submission {
    width:500px;
    height:175px;
    position:absolute;
    left:320px;
    top:225px;
}
#header {
    width: 820px;
    height: 200px;
    position: absolute;
    left: 0px;
    top: 0px;
}
#nav {
    width: 820px;
    height: 50px;
    position: absolute;
    left: 0px;
    top: 150px;
}
#form {
    background-color: #FFFFFF;
    width: 820px;
    height: 175px;
    position: absolute;
    left: 0px;
    top: 200px;
    border-bottom: 1px;
    border-bottom-color: #666666;
    border-bottom-style: dashed;
}
#content {
    border: hidden;
    background-color: #FFFFFF;
    width: 820px;
    position: absolute;
    left: 0%;
    top: 376px;
    min-height: 1200px;
    height: auto;
}
#footer {
    background-color: #666666;
    width: 100%;
    height: 50px;
    position: absolute;
    bottom: 0;
}
#footertext {
    color: #FFF;
    text-align: center;
    position: absolute;
}
#contentcontainer {
    height: 100%;
    width: 820px;
    position: relative;
    top: -10px;
    background-color: #FFF;
    left: 20%;
}

OT2O 30 дек. 2013, в 12:31

Источник

0

Потому что нижний колонтитул находится внутри вашего контейнера div. Поместите это в конец своего тела и посмотрите, работает ли это. Sidenote: Вам, вероятно, следует использовать такие имена, как content_container / footer_text или content-container / footer-text или contentContainer / footerText. Улучшает читаемость
tewathia 30 дек. 2013, в 10:46
0

Это просто помещает это внизу экрана. Я хочу, чтобы он двигался с масштабируемым размером контента. и быть на дне моего контейнера. Спасибо за ответ, хотя.
OT2O 30 дек. 2013, в 10:50
0

Вы хотите, чтобы нижний колонтитул был липким внизу?
Ali Gajani 30 дек. 2013, в 10:52
0

Не могли бы вы создать скрипку? ( min-height вашего #contentcontainer могла бы помочь)
tewathia 30 дек. 2013, в 10:53
1

Высота contentcontainer всегда равна нулю, потому что все его дочерние элементы расположены absolute . Если вы знаете высоту всех дочерних элементов и их позиции , прежде чем руки то сделать некоторые расчеты и установить высоту contentcontainer , а до некоторого фиксированного значения , как 990px .
Vikram Deshmukh 30 дек. 2013, в 10:56
0

Ваш Css выглядит очень опасно. По возможности избегайте использования абсолюта в этом отзывчивом мире.
Anup 30 дек. 2013, в 11:03

Показать ещё 4 комментария

Теги:

html

css

1 ответ

Ещё вопросы

Потому что нижний колонтитул находится внутри вашего контейнера div. Поместите это в конец своего тела и посмотрите, работает ли это. Sidenote: Вам, вероятно, следует использовать такие имена, как content_container / footer_text или content-container / footer-text или contentContainer / footerText. Улучшает читаемость
Это просто помещает это внизу экрана. Я хочу, чтобы он двигался с масштабируемым размером контента. и быть на дне моего контейнера. Спасибо за ответ, хотя.
Вы хотите, чтобы нижний колонтитул был липким внизу?
Не могли бы вы создать скрипку? ( min-height вашего #contentcontainer могла бы помочь)
Высота contentcontainer всегда равна нулю, потому что все его дочерние элементы расположены absolute . Если вы знаете высоту всех дочерних элементов и их позиции , прежде чем руки то сделать некоторые расчеты и установить высоту contentcontainer , а до некоторого фиксированного значения , как 990px .
Ваш Css выглядит очень опасно. По возможности избегайте использования абсолюта в этом отзывчивом мире.

myTerminal · Accepted Answer · 2013-12-30T09-03-00.000Z

Высота вашего контейнера div равна нулю, потому что все дети расположены как абсолютные. Если бы вы могли достичь этого без абсолютного позиционирования, вы заметите, что контейнер div фактически занимает некоторое пространство.

Это не очень хорошая идея сделать все абсолютно позиционируемым.