Блок выходит за границы родителя.

**AlexaP** · 23.12.2007, 15:53

Код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
****<title></title>
 * <style type="text/css">
 * * * html {
 * * * * * height: 100%;
 * * * }

 * * * body {
 * * * * * height: 100%;
 * * * * * padding: 0;
 * * * * * margin: 0;
 * * * }

 * * * #content {
 * * * * * min-height: 100%;
 * * * * * background-color: #FF4500;
 * * * }

 * * * * html #content {
 * * * * * height: 100%;
 * * * }
 * * * #menu{
 * *background-color: #00CED1;
 * *width: 500px;
 *}
 * </style>
</head>

<body>

 * * * *<div id="content">
 * *
 * *<div id="menu">Содержимое</div>
 * *
 * * * *</div>
</body>
</html>

Блок MENU находится внутри блока CONTENT. Если окно просмотра меньше, по ширине, блока MENU, то этот блок выходит за границы CONTENT.
Так должно быть? Почему?

**Aykroyd** · 23.12.2007, 18:20

А почему так НЕ должно быть?) Нормальные браузеры в данной ситуации ведут себя именно так, как Вы им и предписываете.

С одной стороны, по умолчанию для любого блока значение свойства overflow установлено в visible. Это означает, что в случае его переполнения, дочерние элементы будут выходить за его пределы.

С другой стороны, если для блока content не задается явная ширина, то по умолчанию она будет равна 100% (как и для любого другого элемента в прямом потоке). В данном конкретном случае – 100% от ширины элемента body, которая равна 100% от ширины элемента html, которая в свою очередь равна ширине окна браузера. Поэтому красный фоновый цвет блока content распространяется только на ширину окна браузера. А для блока menu ширина указана явно – 500px, которые меньше или равны ширине окна браузера далеко не всегда...)

Совет: задайте для блока content свойство min-width: 500px. А в общих случаях свойство min-width обычно задают для элемента body...

**AlexaP** · 23.12.2007, 23:13

Возник следующий вопрос.
Не все браузеры понимают min-width (если не использовать скрипт). Будет правильным вариант если, для CONTENT задам overflow: auto, а в качестве ограничения минимальной ширины, буду использовать вложенный в него блок (MENU) с нужной width?
Или так

body {overflow: auto;}

а для ограничения минимальной ширины - блок с нужными размерами.

**Aykroyd** · 24.12.2007, 00:21

То, что Вы написали, очень легко проверить на практике. И убедиться, что подобный вариант не сработает.

Originally posted by AlexaP@Dec 24 2007, 00:13
Будет правильным вариант если, для CONTENT задам overflow: auto
Или так
body {overflow: auto;}
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]
В результате:

1. Если контента на странице будет больше, чем один «экран», Вы получите горизонтальный скролл не в окне браузера, а в блоке CONTENT, до которого придется «доскролливаться» вертикально...

2. В IE будет два вертикальных скролла.

<div class='quotetop'>Цитата</div>

Не все браузеры понимают min-width (если не использовать скрипт).[/b]

Давайте будем конкретнее. Свойства min/max-width/height не понимает только один современный браузер. И лучшего решения, чем minmax.js, на сегодняшний день не существует в принципе...

P.S. Не изобретайте велосипед...)

**AlexaP** · 24.12.2007, 01:29

Ну да, написал не подумав и не проверив.
Велосипед я не изобретаю. Все пишут: делай так а не иначе. А причину не объясняют. Чтобы делать нужно понять.

**Aykroyd** · 24.12.2007, 06:19

Originally posted by AlexaP@Dec 24 2007, 02:29
Все пишут: делай так а не иначе. А причину не объясняют.
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]
Это где так пишут? И «все» – это кто?

**AlexaP** · 29.12.2007, 22:41

Это где так пишут?

Скорее всего, очень часто, попадаю на сайты из серии "Первый вор".

Не будем о грустном.
С наступающим Вас!

**Aykroyd** · 29.12.2007, 22:49

Взаимно!

Тема: Блок выходит за границы родителя.

Опции темы

Поиск по теме

Отображение

Похожие темы

В Индии выходит глянцевый журнал для проституток

Сдвигаем вложенный див, сдвигается фон родителя

Как удалить границы у SELECT ?

Границы в таблицах.

Границы в Photoshop

Ваши права