Мобильная версия
вот изображение, как вы можете видеть, контент выходит из коробки, но Короче говоря, я хочу, чтобы высота устанавливалась в соответствии с содержимым, высота должна быть динамической.
Я пробовал использовать Grid-template-rows: auto auto; все еще получаю ту же проблему. как исправить эту проблему, чтобы каждый раз высота устанавливалась в соответствии с содержимым.
Код: Выделить всё
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
@page {
size: A4;
margin: 0.8cm;
border: 1px solid #000;
@bottom-right {
content: counter(page) " / " counter(pages);
font-size: 10px;
color: black;
}
}
html,
body {
height: 100%;
width: 100%;
}
.big {
font-size: 14px;
}
p {
font-size: 10px;
}
.section-3 {
word-break: break-all;
}
.section-3-body {
display: grid;
grid-template-columns: 65% 17.5% 17.5%;
grid-template-rows: auto auto;
border-bottom: 1px solid black;
}
.state-info,
.pan-info {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
}
.item-1 {
grid-column: 1/2;
grid-row: 1 / span 2;
border-right: 1px solid black;
}
.item-2 {
grid-column: 2 / 4;
grid-row: 1 / 2;
border-bottom: 1px solid black;
text-align: center;
}
.item-3 {
grid-column: 2/3;
grid-row: 2 / 3;
border-right: 1px solid black;
text-align: center;
}
.item-4 {
grid-column: 3/4;
grid-row: 2 / 3;
text-align: center;
}Код: Выделить всё
[b]Consignee:[/b]
B.K. Enterprises (Delhi)
[b]Address:[/b]
ABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNQWERTYUI
[b]State:[/b] Delhi
[b]State code:[/b] 07
[b]Phone no :[/b] 9311142406
[b]PAN:[/b] ABFPN3214M
[b]GST No:[/b] 07ABFPN3214M1ZM
[b]Transport Name:[/b]
JAIPUR GOLDEN JAIPUR GOLDEN JAIPUR GOLDEN JAIPUR
[b]LR/Vehicle Name:[/b]
QWERTYUIOPLKJHGFDAZ
[b]LR/Vehicle Date:[/b]
24-JULY-2024
Подробнее здесь: https://stackoverflow.com/questions/786 ... g-to-the-c
