Текучий div толкает фиксированный div рядом с ним. Это также не заполняет ожидаемую высоту

Question

Текучий div толкает фиксированный div рядом с ним. Это также не заполняет ожидаемую высоту

0

У меня есть два divs рядом друг с другом - одна фиксированная и одна жидкость. Однако, всякий раз, когда я применяю margin-top к абзацу внутри жидкого div, он не заполняет всю высоту div, а также толкает фиксированный div рядом с ним вниз. К сожалению, я не могу использовать overflow: auto, чтобы исправить это, потому что мне нужно, чтобы жидкость div имела переполнение: видимое для конкретной потребности. Странно, я знаю, но я уверен, что для этого должно быть решение. Тем не менее, я пробовал часами без везения.

Вот демо проблемы, которую я имею. Я также добавил объяснение в divs: http://jsfiddle.net/LejbU/

<div class="left">
    <p>This div has a fixed width of 300px.<p>
</div>
<div class="right">
    <p class="withMargin">Test</p>     
</div>

-

.left {
background-color: yellow;
width: 300px;
height: 100%;
float: left;
}

.right {
background-color: pink;
height: 100%;
margin-left: 320px;
overflow: visible;

}

p {
margin: 0;
padding: 10px;
color: black;
}

p.withMargin {
margin-top: 100px;
margin-bottom: 100px;
}

AndSmith 05 май 2014, в 19:28

Источник

Теги:

html

css

responsive-design

4 ответа

2

Это из-за коллапсирующих полей определения модели CSS Box:

CSS 2.1 8.3.1 Свертывание полей

В CSS смежные поля двух или более ящиков (которые могут или не могут быть братьями и сестрами) могут объединяться, чтобы сформировать единый запас. Полагают, что поля, которые объединяются таким образом, разрушаются, а полученный комбинированный запас называется скомпенсированным запасом.

Из определения:

Поля встроенных блоков не сворачиваются (даже с их дочерьми в потоке).

Поэтому измените отображение p.withMargin на inline-block чтобы избежать такого поведения.

Демо: http://jsfiddle.net/LejbU/2/

Arbel 05 май 2014, в 16:10

1

добавьте этот display:inline-block; к p.withMargin

Vivek MVK 05 май 2014, в 15:45

1

Вы стали жертвой краха полей (MDN).

Верхний и нижний поля блоков иногда объединяются (сворачиваются) в один край, размер которого является наибольшим из полей, объединенных в него, поведение, известное как крах.

В твоем случае:

Родитель и первый/последний ребенок

Если нет границы, прокладки, встроенного содержимого или разрешения, чтобы отделить верхний край поля с краем верхнего его первого дочернего блока или без границы, заполнение, встроенное содержимое, высота, минимальная высота или макс. -height, чтобы отделить нижний край блока от нижней границы его последнего дочернего элемента, тогда эти поля рушится. Разрушенный край заканчивается вне родителя.

Есть несколько способов обойти это, я просто использую дополнение вместо изменения макета, как мне нужно, не изменяя другие свойства, которые я считаю более опасными. В этом сценарии: http://jsfiddle.net/rgthree/LejbU/1/

p.withMargin {
    padding-top: 100px;
    padding-bottom: 100px;
}

rgthree 05 май 2014, в 14:46

0

Спасибо, это также работало вместе с решением display: inline-block.
AndSmith 05 май 2014, в 17:49
0

@AndSmith Конечно, обратите внимание, что решение display:inline-block может иметь и другие последствия, так как вы фактически меняете тип отображения и, таким образом, меняете способ отображения этого элемента браузером (скажем, если у вас было несколько рядом с каждым другие и т. д.). Мое решение не только сохраняет элемент как тип блока, но также работает в (очень) старых браузерах, которые не поддерживают inline-block. старое, проверенное и верное решение.
rgthree 05 май 2014, в 17:51
0

Вы абсолютно правы, я вижу дисплей: встроенный блок вызывает проблемы. Раскладное решение кажется идеальным. Для тех, у кого есть эта проблема, но с div, поместите div в другой div и установите padding для родительского div.
AndSmith 05 май 2014, в 17:57
0

@AndSmith и rgthree Margins и Padding принципиально разные. Если вы добавите фоновое изображение, цвет фона ... или границы, тени ... тогда вы не сможете заменить поля для отступов. display:inline-block; по определению гарантированно ведет себя так, как вы хотите, и идеально подходит для вашей ситуации.
Arbel 05 май 2014, в 18:00
0

@ Arbel Правильно, ты тоже Арбель. Я думаю, они оба используют в зависимости от ситуации.
AndSmith 05 май 2014, в 18:10
0

@Arbel Вы только что доказали, что ошибаетесь! Если вы добавляете фон в <p> и задаете ему inline-block он в корне меняется : jsfiddle.net/rgthree/s9Nvq/1 inline-block поставляется с собственным набором проблем, таких как проблема ширины, а также как он обрабатывает смежные элементы. Вы не ошибаетесь в том, что отступы и отступы различаются, однако это просто замена двух разных, но связанных свойств макета, вместо фундаментального изменения отображения элемента. Как я уже сказал, существует множество способов решить проблему, и для заданного сценария я нашел, что это самый чистый вариант.
rgthree 05 май 2014, в 18:17
0

@ rgthree Читайте внимательно: Дисплей: встроенный блок; по определению гарантированно ведет себя так, как вы хотите, и идеально подходит для вашей ситуации .
Arbel 05 май 2014, в 18:20
0

@ Arbel Конечно, хорошая работа. То же самое утверждение для переключения на отступы, так как, по определению коллапсирующих полей, отступы никогда не свернутся с полем. Как я уже сказал, ваше решение не является неправильным, но есть много других сценариев, в которых inline-block может вызвать проблемы с макетом, тогда как padding, опять же, на мой взгляд, оптимален в этой ситуации, поскольку все, что он делает, это изменяет визуализированный блок так, чтобы он был включая его занятую площадь .
rgthree 05 май 2014, в 18:39

Показать ещё 6 комментариев

Ещё вопросы

Спасибо, это также работало вместе с решением display: inline-block.
@AndSmith Конечно, обратите внимание, что решение display:inline-block может иметь и другие последствия, так как вы фактически меняете тип отображения и, таким образом, меняете способ отображения этого элемента браузером (скажем, если у вас было несколько рядом с каждым другие и т. д.). Мое решение не только сохраняет элемент как тип блока, но также работает в (очень) старых браузерах, которые не поддерживают inline-block. старое, проверенное и верное решение.
Вы абсолютно правы, я вижу дисплей: встроенный блок вызывает проблемы. Раскладное решение кажется идеальным. Для тех, у кого есть эта проблема, но с div, поместите div в другой div и установите padding для родительского div.
@AndSmith и rgthree Margins и Padding принципиально разные. Если вы добавите фоновое изображение, цвет фона ... или границы, тени ... тогда вы не сможете заменить поля для отступов. display:inline-block; по определению гарантированно ведет себя так, как вы хотите, и идеально подходит для вашей ситуации.
@ Arbel Правильно, ты тоже Арбель. Я думаю, они оба используют в зависимости от ситуации.
@Arbel Вы только что доказали, что ошибаетесь! Если вы добавляете фон в <p> и задаете ему inline-block он в корне меняется : jsfiddle.net/rgthree/s9Nvq/1 inline-block поставляется с собственным набором проблем, таких как проблема ширины, а также как он обрабатывает смежные элементы. Вы не ошибаетесь в том, что отступы и отступы различаются, однако это просто замена двух разных, но связанных свойств макета, вместо фундаментального изменения отображения элемента. Как я уже сказал, существует множество способов решить проблему, и для заданного сценария я нашел, что это самый чистый вариант.
@ rgthree Читайте внимательно: Дисплей: встроенный блок; по определению гарантированно ведет себя так, как вы хотите, и идеально подходит для вашей ситуации .
@ Arbel Конечно, хорошая работа. То же самое утверждение для переключения на отступы, так как, по определению коллапсирующих полей, отступы никогда не свернутся с полем. Как я уже сказал, ваше решение не является неправильным, но есть много других сценариев, в которых inline-block может вызвать проблемы с макетом, тогда как padding, опять же, на мой взгляд, оптимален в этой ситуации, поскольку все, что он делает, это изменяет визуализированный блок так, чтобы он был включая его занятую площадь .

AndSmith · Accepted Answer · 2014-05-06T10-59-00.000Z

Еще одно решение, которое я нашел. Создайте новый div WITHIN в правом div и примените следующий css к новому div:

.correctblock {
display: inline-block;
width: 100%;
zoom: 1;
}

Пример: http://jsfiddle.net/62ueY/