如何基于 JavaScript 网格设置 Div 最小高度？

Question

我正在尝试创建一个具有依赖于其他无线电的无线电的表单，除了样式之外，我已经完成了大部分工作。我希望带有控制台徽标的最左边的列具有基于缩略图网格的最大内容 (5x5) 的固定高度，同时间隔均匀（如 justify-content:space-around）。

例如，如果你没有点击任何东西，所有的标题都会被压在一起，但是当你选择“超级马里奥赛车”或“马里奥赛车8”时，它会增长到JS中指定的5x5网格。

`

            <div class="Console">
                <div class="console-column">
                    <label>
                        <input type="radio" name="console" value="SNES" onclick="snesCourses();">
                        <div class="console-image">
                            <img src="./images/logos/Super-Mario-Kart.png" alt="Super Mario Kart">
                        </div>
                    </label>
                    <label>
                        <input type="radio" name="console" value="N64" onclick="n64Courses();">
                        <div class="console-image">
                            <img src="./images/logos/Mario-Kart-64.png" alt="Mario Kart 64">
                        </div>
                    </label>
                    <label>
                        <input type="radio" name="console" value="GBA" onclick="gbaCourses();">
                        <div class="console-image">
                            <img src="./images/logos/Mario-Kart-Super-Circuit.png" alt="Mario Kart Super Circuit">
                        </div>
                    </label>
                    <label>
                        <input type="radio" name="console" value="GCN" onclick="gcnCourses();">
                        <div class="console-image">
                            <img src="./images/logos/Mario-Kart-Double-Dash.png" alt="Mario Kart Double Dash">
                        </div>
                    </label>
                    <label>
                        <input type="radio" name="console" value="DS" onclick="dsCourses();">
                        <div class="console-image">
                            <img src="./images/logos/Mario-Kart-DS.png" alt="Mario Kart DS">
                        </div>
                    </label>
                    <label>
                        <input type="radio" name="console" value="Wii" onclick="wiiCourses();">
                        <div class="console-image">
                            <img src="./images/logos/Mario-Kart-Wii.png" alt="Mario Kart Wii">
                        </div>
                    </label>
                    <label>
                        <input type="radio" name="console" value="3DS" onclick="mk7Courses();">
                        <div class="console-image">
                            <img src="./images/logos/Mario-Kart-7.png" alt="Mario Kart 7">
                        </div>
                    </label>
                    <label>
                        <input type="radio" name="console" value="Tour" onclick="tourCourses();">
                        <div class="console-image">
                            <img src="./images/logos/Mario-Kart-Tour.png" alt="Mario Kart Tour">
                        </div>
                    </label>
                    <label>
                        <input type="radio" name="console" value="MK8" onclick="mk8Courses();">
                        <div class="console-image">
                            <img src="./images/logos/Mario-Kart-8.png" alt="Mario Kart 8">
                        </div>
                    </label>
                    <label>
                        <input type="radio" name="console" value="Booster Courses" onclick="boosterCourses();">
                        <div class="console-image">
                            <img src="./images/logos/Mario-Kart-8-Deluxe-Booster-Course-Pass.png" alt="Mario Kart 8 Deluxe Booster Courses">
                        </div>
                    </label>
                </div>
            </div>

body {
    display: grid; 
    grid-template-columns: 66% 33%; 
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr; 
    gap: 1% 1%; 
    grid-template-areas: 
        "Header Header"
        "Nav Nav"
        "Settings Settings"
        "Course Stats"
        "Footer Footer";
    height: 100vh;
}

.hide {
    display: none;
}

input[type="radio"]{
    display: none;
}

h1 {
    text-align: center;
    font-size: 16px;
}
.Header { 
    grid-area: Header; 
    background: teal;
}
.Nav { 
    grid-area: Nav; 
    background: salmon;
}
.Settings { 
    grid-area: Settings; 
    background: yellowgreen;
}
.Course {
    display: grid; 
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr; 
    grid-template-rows: 10% repeat(3, minmax(1, 1fr)); 
    gap: 5% 5%; 
    grid-template-areas: 
        ". . . Class Class"
        "Console Thumbnail Thumbnail Thumbnail Thumbnail"
        "Console Thumbnail Thumbnail Thumbnail Thumbnail"
        "Console Thumbnail Thumbnail Thumbnail Thumbnail"; 
    grid-area: Course; 
    background: brown;
    gap: var(--gap);
}
.Console {
    grid-area: Console;
    border: 5px solid #000000;
    border-radius: 10px;
    align-content: center;
}
.Class { 
    grid-area: Class; 
    background: blue;
}
.Thumbnail { 
    grid-area: Thumbnail; 
    background: purple;
    border: 5px solid #000000;
    border-radius: 10px;
}
.Stats { 
    grid-area: Stats; 
    background: orange;
}
.Footer { 
    grid-area: Footer; 
    background: green;
}

/* Console Header */
.console-column {
    display: table;
    height: auto;
}

.console-image img {
    cursor: pointer;
    display: block;
    opacity: 50%;
    transition: transform 250ms ease-in-out;
    max-width: 70%;
    max-height: 10%;
    margin: auto;

    &:hover {
        opacity: 80%;
        transition: opacity 250ms ease-in-out;
    }
}

.console-column input[type=radio]:checked + .console-image img{
    opacity: 100%;
    transform: scale(1.1);
    filter: drop-shadow(0px 0px 10px hsla(0, 0%, 0%, 0.75));
    transition: transform 250ms ease-in-out, filter 250ms ease-in-out;
}

/* Course Grid */
.course-container {
    display: flex;
}

.course-thumbnail img {
    cursor: pointer;
    display: block;
    opacity: 80%;
    max-width: 90%;
    transition: transform 250ms ease-in-out;
    border: 5px solid transparent;
    margin: 5% auto;

    &:hover {
        opacity: 100%;
        transition: opacity 250ms ease-in-out;
    }
}

.course-grid input[type=radio]:checked + .course-thumbnail img{
    border: 5px solid salmon;
    background-color: salmon;
    opacity: 100%;
    mask-image: linear-gradient(135deg, transparent 5px, gold 0),
                linear-gradient(-135deg, transparent 5px, gold 0),
                linear-gradient(45deg, transparent 5px, gold 0),
                linear-gradient(-45deg, transparent 5px, gold 0);
    mask-position: 0 0, 100% 0, 0 100%, 100% 100%;
    mask-repeat: no-repeat;
    mask-size: 51% 51%;
} 

function snesCourses(){ 
  document.getElementById('snesCourses').style.display = 'grid';
  document.getElementById('snesCourses').style.gridTemplateColumns = "repeat(5, 1fr)"; 
  document.getElementById('snesCourses').style.gridTemplateRows = "repeat(5, 1fr)"; 
  document.getElementById('mk8Courses').style.display = 'none';
}

function n64Courses(){ 
  document.getElementById('snesCourses').style.display = 'none';
  document.getElementById('mk8Courses').style.display = 'none';
}

function mk8Courses(){ 
  document.getElementById('snesCourses').style.display = 'none';
  document.getElementById('mk8Courses').style.display = 'grid';
  document.getElementById('mk8Courses').style.gridTemplateColumns = "repeat(5, 1fr)"; 
  document.getElementById('mk8Courses').style.gridTemplateRows = "repeat(5, 1fr)"; 
}

这是一个 CodePen 示例

我知道我必须将 .course-container 的 min-height 更改为某些内容，我只是不知道是什么。

Answer 1

首先，你说你觉得需要调整

.course-container

，但你只包含了CSS指令，而不是HTML标记，所以我们不知道它在哪里。乍一看，在分析您的 HTML 示例时，我很想说您应该设置

.console-column

，但我可能是错的。

至于修复，我们有两种情况之一：要么动态生成缩略图网格，并且在填充之前永远无法确定它的高度，要么您的缩略图网格有固定值，然后您始终知道它的确切高度。

如果依赖动态生成，所有内容加载完毕后，应该执行：

document.getElementById('container-column').style.minHeight = document.getElementById('thumbnail-grid').offsetHeight;

相反，如果高度始终相同，那么您可以直接在 CSS 中设置它：

.container-column {
    min-height: [your value here]
}

您没有包含缩略图网格的 HTML 标记，因此我无法自己计算它。要弄清楚这一点，请加载完整的缩略图网格，一旦加载，控制台将成为您的朋友：

console.log(document.getElementById('thumbnail-grid').offsetHeight);