#html #css #overflow
#HTML #css #переполнение
Вопрос:
У меня есть DIV (.main), который содержит фоновое изображение. Текст TOS накладывается на фоновое изображение. Все нормально, когда окно браузера расширено, но как только я сжимаю его слишком сильно, текст из TOS переполняет изображение.
Вы можете увидеть проблему вживую, зайдя на мой сайт и изменив размер окна. https://royalkingdom.net/store
Я уже пытался поиграть с отступами, полями, максимальной высотой и максимальной шириной.
/* Main column */
.main {
flex:60%;
height:940px;
margin-bottom:10vh;
padding-right:8%;
}
#bgimg {
position: relative;
height:100%;
width:100%;
background-image: url("https://i.imgur.com/NPhmcae.png");
background-size: 100%;
background-repeat: no-repeat;
background-position:center top; ;
display: block;
padding-top:13%;
padding-right:10%;
padding-left:10%;
padding-bottom:13%;
}
.panel-body {
text-align:justify;
padding:1px;
width: auto;
max-height: 100%;
display: inline-block;
}
Я ожидаю, что текст будет соответствовать размеру изображения. Даже когда я изменяю размер окна моего браузера. Это нормально, если у него должна быть полоса прокрутки (когда размер окна слишком мал).
Комментарии:
1. добавьте медиа-запрос, чтобы уменьшить размер текста
2. Я бы попробовал добавить,
overflow-y: auto:Как сказала Рейчел, вы могли бы попробовать добавить медиа-запрос, но я бы вместо этого увеличил высоту div, если сможете.3. @CallumR Я пробовал overflow-y, но он по-прежнему выходит из div. Есть ли другая альтернатива?
Ответ №1:
Я думаю, что вам нужно добавить background-size: 100% 100%;
Проверьте этот JSFiddle, который я настроил, чтобы имитировать ваш div. Эта секунда на 100% заставляет изображение занимать всю ширину div, поскольку изображение не увеличивалось с высотой div. Если вы уберете эти вторые 100% в JSFiddle, вы увидите, что красная граница все еще расширяется, но изображение этого не делает.
#div2{
background-image:url(https://i.imgur.com/NPhmcae.png);
background-size: 100% 100%;
background-repeat: no-repeat;
background-position:center top;
display: block;
padding-top:13%;
padding-right:10%;
padding-left:10%;
padding-bottom:13%;
height:auto;
width:auto;
border: 1px solid red;
} <div id="div2">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. A iaculis at erat pellentesque adipiscing commodo elit. Quam elementum pulvinar etiam non. Imperdiet dui accumsan sit amet nulla facilisi. Tempus imperdiet nulla malesuada pellentesque elit.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. A iaculis at erat pellentesque adipiscing commodo elit. Quam elementum pulvinar etiam non. Imperdiet dui accumsan sit amet nulla facilisi. Tempus imperdiet nulla malesuada pellentesque elit.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. A iaculis at erat pellentesque adipiscing commodo elit. Quam elementum pulvinar etiam non. Imperdiet dui accumsan sit amet nulla facilisi. Tempus imperdiet nulla malesuada pellentesque elit.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. A iaculis at erat pellentesque adipiscing commodo elit. Quam elementum pulvinar etiam non. Imperdiet dui accumsan sit amet nulla facilisi. Tempus imperdiet nulla malesuada pellentesque elit.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. A iaculis at erat pellentesque adipiscing commodo elit. Quam elementum pulvinar etiam non. Imperdiet dui accumsan sit amet nulla facilisi. Tempus imperdiet nulla malesuada pellentesque elit.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. A iaculis at erat pellentesque adipiscing commodo elit. Quam elementum pulvinar etiam non. Imperdiet dui accumsan sit amet nulla facilisi. Tempus imperdiet nulla malesuada pellentesque elit.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. A iaculis at erat pellentesque adipiscing commodo elit. Quam elementum pulvinar etiam non. Imperdiet dui accumsan sit amet nulla facilisi. Tempus imperdiet nulla malesuada pellentesque elit.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. A iaculis at erat pellentesque adipiscing commodo elit. Quam elementum pulvinar etiam non. Imperdiet dui accumsan sit amet nulla facilisi. Tempus imperdiet nulla malesuada pellentesque elit.
</p>
</div> Одна из проблем, с которой вы можете столкнуться, заключается в том, что если у вас слишком много / слишком мало текста, изображение будет сильно искажено.
Ответ №2:
Пожалуйста, попробуйте code —
.panel-body {
text-align: justify;
padding: 1px;
width: auto;
max-height: 75vh;
display: inline-block;
overflow-y: scroll;
}
Комментарии:
1. prntscr.com/n5maii Это только добавляет полосу прокрутки, и она по-прежнему распространяется на изображение / div
2. Попробуйте уменьшить размер окна, пока текст не будет перекрывать изображение :/