Проблема дизайна макета CSS - PullRequest
Новая
       10

Проблема дизайна макета CSS

1 голос
/ 29 августа 2009

Я создал дизайн, но у меня проблемы с тем, чтобы он работал так, как мне нужно. Было бы слишком много, чтобы опубликовать полный пакет здесь, но вот проблема вкратце: У меня есть элемент DIV рядом с другим элементом DIV. Один - это боковая панель, а другой - контент. Когда я помещаю набор полей в свой контентный div, все, что угодно (как и другие div), я помещаю в натяжные поля и правильно инкапсулирую div. Но если я удаляю fieldset, «гостевые дивы» просто не растягивают инкапсулирующий «контентный див». Почему это происходит и как я могу это исправить?

Спасибо!

Если вам нужна дополнительная информация, пожалуйста, спросите.

Код - это что-то вроде этого: 

    <!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>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 1</title>
<style type="text/css">

#main-container
{
    background-color:gray;
}
#header-container
{
    background-color:green;
    height: 60px;
}
#sidebar-container
{
    background-color:maroon;
    width: 150px;
    float: left;
}
#content-body
{
    background-color:white;
    position: relative;
}
#block-1, #block-2
{
    float:left;
    width: 50%;
    background-color: blue;
    height: 95px;
}
#block-3
{
    float: left;
    width: 100%;
    background-color:navy;
    height: 156px;
}
#footer
{
    width: 100%;
    background-color:orange;
}

</style>
</head>

<body>
    <div id="main-container">
        <div id="header-container"></div>
        <div id="sidebar-container"><ul><li>menu option</li><li>menu option</li><li>menu option</li><li>menu option</li><li>menu option</li></ul></div>
        <div id="content-body">
            <div id="block-1">&nbsp;</div>
            <div id="block-2">&nbsp;</div>
            <div id="block-3">&nbsp;</div>
        </div>
        <div id="footer">&nbsp;</div>
    </div>
</body>

</html>

1 Ответ

0 голосов
/ 01 сентября 2009

Вам нужно установить переполнение: скрытое в вашем содержащем div, и убедиться, что оно имеет хотя бы одно измерение, которое является текучим. По умолчанию элементы переполнения (т.е. плавающие элементы, все, что извлечено из нормального потока документов) «переполняют границы содержащих их блоков» (переполнение: видимое), не затрагивая их родительский контейнер. Когда вы устанавливаете переполнение на скрытый, вы указываете блочной модели увеличивать содержащий div в любых измерениях, для которых не установлен фиксированный размер, чтобы он полностью содержал свои элементы содержимого.

В зависимости от того, требуется ли прокручивать содержимое содержащего элемента div или нет, вы можете использовать overflow: auto или overflow: scroll. Автоматическая настройка отображает полосы прокрутки, если необходимо, прокрутка всегда будет отображать их. Любые браузеры, которые поддерживают переполнение CSS3, предоставляют дополнительные возможности, которые вы можете посмотреть на W3C.org.

Первое изменение, которое я внесу в ваш код, будет следующим: 

#content-body
{
    background-color:white;
    position: relative;
    overflow: hidden;
}

Альтернативный метод, предпочтительный в наши дни, можно найти по ссылке ниже. Я не использовал его сам, поэтому я не могу убедительно сказать, насколько совместим этот метод. Однако для современных браузеров он предпочтительнее исправления переполнения (Opera, FF 3.x, Safari, Chrome, IE8). Для более старых версий IE они в любом случае автоматически расширяют div, поэтому ваш набор.

http://www.positioniseverything.net/easyclearing.html

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...