时间戳

首页 > 解决方案 > 设置我的部分的高度等于文本内容，忽略 SVG 的高度

html - 设置我的部分的高度等于文本内容，忽略 SVG 的高度

问题描述

我正在设计一个包含文本元素（标题、段落和包含一个ul又包含多个元素的摘要/详细信息li元素）和一个 SVG 的部分。我正在使用 CSS 网格将此内容构造为两列：一列用于所有文本元素，一列（使用 推到屏幕的最右侧justify-self: end）用于我的 SVG。

正如您在下面的代码片段中看到的，无论我的摘要/详细信息元素是关闭还是展开，我的部分的高度始终等于我的 SVG 的高度。

我希望我的部分的高度始终等于我的文本内容的高度，即使摘要/详细信息元素已关闭（在这种情况下，部分的高度将比当前短得多，并且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>

标签： htmlcsssvggrid

解决方案

您可以尝试将此代码添加到您的 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%;
}

推荐阅读