Мне приснился кошмар, пытающийся найти решение того, что я считал простым требованием к дизайну. Я создал скрипку, чтобы проиллюстрировать мою проблему.
Проблема, с которой я сталкиваюсь при использовании моего текущего макета, заключается в том, что мой родительский div, который относительно позиционирован, не будет расширяться по высоте, чтобы содержать дочерний div, который является Абсолютная позиция - не говоря уже о том, что я хочу также включить четное поле вокруг дочернего элемента div (.quote) в 50 пикселей.
Вот мой html:
<div id="myContainer">
<div class="quoteStrip">
<div class="quoteImage" style="background-image:url('https://www.animationmagazine.net/wordpress/wp-content/uploads/the-lion-king2-1.jpg');">
</div>
<div class="quote">
<p><strong>This will be dynamically generated quote text of any length.</p>
</div>
</div>
</div>
Вот мой css:
html body {
height: 100vh;
}
#myContainer {
background-color: #F0F5F9;
height: 100%;
padding: 60px 0;
font-size: 16px;
}
.quoteStrip {
background-color: #000;
width: 100%;
height: 10px; /*Just so I can see it even exists to begin with */
padding: 0;
display: table;
position: relative;
}
.quoteImage {
display: table-cell;
width: 60%;
height: 100%;
background-color: coral;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.quoteBlock {
display: table-cell;
width: 40%;
height: 100%;
}
.quote {
position: absolute;
top: 0;
right: 0;
width: 40%;
margin: 50px; /* How can I get .quoteStrip to always enclose and include this margin on bottom? */
background-color: #fff;
padding: 50px;
border: 1px solid tomato; /* Just so i can see edge */
}
.quote p {
margin: 0;
text-align: center;
font-size: 1.5rem;
line-height: 140%;
color: #B58f61;
}
Вот мой javascript:
// Calculate element (.quote) size and add css styles to .quoteStrip)
$(function() {
var quote_height = $(".quote").outerHeight();
$(".quoteStrip").css("height",quote_height+"px");
$(".quoteStrip").css("border-top","5px solid DeepPink"); // Just so I can see this javascript is even working
$(".quoteStrip").css("border-bottom","5px solid DeepPink"); // Just so I can see this javascript is even working
});
Вот мой скрипка: https://jsfiddle.net/Katrina_B/qvdxe8rw/103/
Это то, чего я пытаюсь достичь:
Фоновое изображение льва находится в своем собственном div (.quoteImage) потому что я не мог добиться адаптивной однородности, сохраняя правильный масштаб изображения в противном случае. Например, я попытался просто поместить свойство фонового изображения в родительский div (.quoteStrip), но были проблемы с масштабированием и размером изображения. Я хочу, чтобы изображение льва оставалось на 60% ширины страницы независимо от размера экрана.
Я также пытался использовать различные макеты с z-index, но безрезультатно, чтобы белая цитата слегка перекрывала льва. Самое близкое альтернативное решение, которого я достиг (не показано в моей скрипке), делало фоновое изображение псевдоэлементом с селектором .quoteStrip: after, который почти фантастически работал, но в конечном счете не был вариантом, потому что URL фонового изображения загружен динамически, и я должен использовать встроенный стиль для этого стиля.
Итак, для текущего решения в моем примере скрипки я решил, что javascript должен использоваться для определения высоты элемента .quote, чтобы затем применить Стиль высоты для родительского div .quoteStrip. Но это не работает, как ожидалось. Кажется, что вычисленная высота может просто получить поле и отступ для .quote div, но не включает в себя высоту текста внутри него, который также генерируется динамически и может иметь любую длину. Это потому, что у меня есть javascript в заголовке моего документа? Должно ли это быть где-то еще?
К сожалению, у меня очень ограниченные навыки javascript, и используемые мной сценарии собраны из различных примеров, которые я нахожу в Интернете.
Может ли кто-нибудь предложить жизнеспособное решение? или альтернатива. Кажется, лучший вариант, который у меня есть, это создать что-то другое. Простое решение не слегка перекрывать кавычки в верхней части изображения будет работать и будет легко, но это не дизайн: (
Примечание: Я смотрел на несколько других вопросов с похожими проблемы, но не смог найти точное решение javascript.