Как разместить постоянное поле в 5px вокруг внутреннего div без указания высоты div? - PullRequest
Новая
       7

Как разместить постоянное поле в 5px вокруг внутреннего div без указания высоты div?

0 голосов
/ 29 января 2010

Существует внутренний блок фиксированной ширины и переменной высоты, содержащийся в внешнем блоке. Внутренний блок должен иметь отступ в 5 пикселей на всех 4 сторонах между ним и внешним блоком.

Как этого достичь, если не указана высота внутреннего div?

С заданной высотой внутреннего элемента div это очень просто. Но внутренний div - это контейнер содержимого для главной страницы. Содержимое, входящее в этот div, будет иметь разную высоту для каждой страницы, которая использует главную страницу.

Если высота внутреннего блока не задана, нижнее поле (между концом внутреннего блока и концом внешнего блока) всегда будет на 2-3 пикселя длиннее. то есть 5 5 5 8 Это происходит в разных браузерах.

Вот CSS: 

#contentframe
{
    position: relative;
    width: 1010px;
    left: 0px;
    top: 0px;
    margin: 0px;
    padding-top:5px;
    padding-bottom:5px;
    padding-left: 14px;
}
#content
{
    position: relative;
    left: 0px;
    top: 0px;
    width: 980px;
    margin: 0px;
    padding: 0px;
    background-color: #cccccc;

}

*** Примечание: установка нижнего поля #content равной 5px не работает.

HTML: 

    <div id="contentframe">
        <div id="content">
            variable height content will go in here
        </div>
    </div>

Это должно быть очень просто. Set: Внешнее деление отступов до 5px и все. Но это работает, только если указана внутренняя высота div. В противном случае есть досадно «высокое» нижнее поле.

РЕДАКТИРОВАТЬ: Полный источник 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css"> 
body
{
    -x-system-font: none;
    background-color: #A2A2A2;
    margin-top: 0px;
    margin-bottom: 35px;
    padding: 0px;
}
#centeredframe
{
    width: 1010px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0px;
    padding: 0px;
}

#contentframe
{
    position: relative;
    width: 1010px;
    left: 0px;
    top: 0px;
    margin: 0px;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 5px;
    background-color: #ffffff;
}

#content
{
    position: relative;
    left: 0px;
    top: 0px;
    width: 1005px;
    margin: 0px;
    padding: 0px;
    height:300px;
    color: #ffffff;
    background-color: #000000;
}

</style>
</head>
<body>
    <div id="centeredframe">
        <div id="contentframe">
            <div id="content">
                <p>hgjghjghjghjg<p>
                <p>hgjghjghjghjg<p>
                <p>hgjghjghjghjg<p>
                <p>hgjghjghjghjg<p>
            </div>
        </div>
    </div>
</body>
</html>

1 Ответ

2 голосов
/ 29 января 2010

Это должно работать в IE7 / 8 и других браузерах, отличных от IE.

Дополнительные элементы 'padding / margin' в верхней и / или нижней части вводятся элементами <p>. Это связано с неослабевающим полем для пустых областей содержимого / отступов / границ (в данном случае это contentFrame). Обратитесь к Блочной модели W3C на полях сворачивания.

Есть несколько способов обойти это, одним из которых является введение тонкой (1px) границы, которая сливается с фоном DIV и затем компенсируется шириной / высотой. Ниже приведен еще один способ взлома с помощью поля / отступа элемента <P> в содержимом DIV. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css"> 
body
{
    -x-system-font: none;
    background-color: #A2A2A2;
    margin: 0;
    margin-bottom: 35px;
    padding: 0px;
}
#centeredframe
{
    width: 1010px;
    margin: 0 auto; /* merged */
    padding: 0;
}

#contentframe
{
    width: 1000px;
    margin: 0;
    padding: 5px;
    background-color: #ffffff;
}
#content
{
    padding: 0;
    color: #ffffff;
    background-color: #000000;
    height: auto;
    min-height: 300px;
}
#content p
{
    margin: 0px; /* removed the default margin of p element*/
    padding: 16px 0; /* replaced with padding to have background*/
}
</style>
</head>
<body>
    <div id="centeredframe">
        <div id="contentframe">
            <div id="content">
                <p>hgjghjghjghjg</p>
                <p>hgjghjghjghjg</p>
                <p>hgjghjghjghjg</p>
                <p>hgjghjghjghjg</p>
            </div>
        </div>
    </div>
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...