Я оформляю раздел, содержащий текстовые элементы (заголовок, абзац и элемент резюме / подробности, содержащий ul, который, в свою очередь, содержит несколько элементов li) и SVG.Я использую сетку CSS, чтобы структурировать этот контент в два столбца: один столбец для всех текстовых элементов и один столбец (сдвинутый к правому краю экрана с помощью justify-self: end) для моего SVG.
Как выВы можете увидеть в фрагменте кода ниже, независимо от того, закрыт ли мой элемент Сводка / Детали или нет, высота моего раздела всегда равна высоте моего SVG.
Я хотел бы для высотымоего раздела всегда будет равняться высоте моего текстового содержимого, даже когда элемент summary / details закрыт (в этом случае высота раздела будет намного короче, чем в настоящее время, а оставшаяся часть SVG будетбыть отрезанным - важно, чтобы оно было отрезано, но не сдавлено).
Возможно ли это?Будем весьма благодарны за любую помощь или руководство.
(Вывод приведенного ниже фрагмента кода может иметь больше смысла, если вы откроете его как полную страницу.)
var clickDetails = document.getElementById("click-details");
function showDetails() {
if (clickDetails.innerHTML === "Click here to show full syllabus") {
clickDetails.innerHTML = "Click here to hide..."
} else {
clickDetails.innerHTML = "Click here to show full syllabus"
}
}
.grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 10px;
}
.span-row-1 {
grid-row: span 1 / auto;
justify-self: end;
}
object {
/* height: */
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<section>
<div class="grid">
<div>
<h4>Title</h4>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolorem, architecto unde iure deserunt veniam hic reprehenderit perspiciatis in itaque labore facilis nemo reiciendis nulla a voluptatem voluptates quos sint? Tempore.</p>
<h5 class="syllabus-text">Syllabus</h5>
<details>
<summary id="click-details" onclick="showDetails()" class="syllabus-text">Click here to show full syllabus</summary>
<ul class="syllabus browser-default">
<li class="header-section"><a href="#Introduction">Introduction</a>
<li>Stuff goes here</li>
<li>Stuff goes here</li>
<li>Stuff goes here</li>
<li>Stuff goes here</li>
<li>Stuff goes here</li>
<li>Stuff goes here</li>
<li>Stuff goes here</li>
<li>Stuff goes here</li>
<li>Stuff goes here</li>
<li>Stuff goes here</li>
<li>Stuff goes here</li>
<li>Stuff goes here</li>
<li>Stuff goes here</li>
<li>Stuff goes here</li>
<li>Stuff goes here</li>
<li>Stuff goes here</li>
<li>Stuff goes here</li>
<li>Stuff goes here</li>
<li>Stuff goes here</li>
<li>Stuff goes here</li>
</ul>
</details>
</div>
<div class="span-row-1">
<svg width="590" height="900" viewBox="0 0 590 900" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M570 -580C589.882 -580 606 -563.882 606 -544L606 959C606 978.882 589.882 995 570 995H182.054C149.285 995 125.984 947.458 136.202 916.323C155.065 858.84 158.723 770.828 90 655.5C-40.5 436.5 291.5 781.5 90 253.5C-84.2112 -202.994 42.8138 -493.173 80.4145 -563.397C86.1259 -574.064 97.2813 -580 109.381 -580H570Z" fill="url(#paint0_linear)"/>
<defs>
<linearGradient id="paint0_linear" x1="606" y1="-675.5" x2="429.743" y2="1137.1" gradientUnits="userSpaceOnUse">
<stop stop-color="#DE7575"/>
<stop offset="1" stop-color="#7090CE"/>
</linearGradient>
</defs>
</svg>
</div>
</div>
</section>
<section>
<h5>Beginning of next section</h5>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eum aliquid qui repellendus! Provident, laborum quaerat vel, officiis quidem amet sequi aut repellendus architecto itaque expedita saepe perferendis ullam distinctio iure.
Repudiandae error est in perferendis quo ex illo at itaque ad ullam amet nostrum sed, inventore animi ipsa cupiditate vel tenetur eius dolorem explicabo asperiores facilis blanditiis voluptatem? Temporibus, aperiam!
Dicta voluptatum libero quis soluta consequuntur aliquam iste quo officia voluptates nihil suscipit ullam, maiores quam deleniti perspiciatis minus obcaecati tenetur. Officia provident natus quod aut laborum quidem perspiciatis ad!</p>
</section>
</body>
</html>