Question

我正在对包含文本元素（标题，段落和摘要/详细信息元素，其中包含ul，而后者又包含多个li元素）和SVG的样式进行样式设置。我正在使用CSS网格将此内容分为两列：一列用于所有文本元素，另一列（使用justify-self: end推到屏幕的右端）用于我的SVG。

如下面的代码片段所示，无论我的summary / detail元素是关闭还是展开，我的部分的高度始终等于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>

Answer 1

您可以尝试将此代码添加到CSS文件中以设置svg的样式

svg {
 max-height: 100%;
}

您也可以尝试使用svg作为背景图片。在“ span-row-1”中添加：

<img class="bg-image" src="your-img-url.svg">

然后应用此CSS样式

.bg-image {
 max-height: 100%;
}

将我的部分的高度设置为等于文本内容，而忽略SVG的高度

1 个答案: