CSS 中子元素的高度问题

问题描述 投票：0回答：1

我遇到了

.contenedor-elementos-generales
的子元素高度问题 我不知道该怎么做才能解决它。

我的主要 html 文件：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://fonts.googleapis.com/css2?family=Titillium+Web:wght@700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="css/index.css">

    <title>Descontrol</title>
</head>

<body>
    <div class="layout">
        <div class="item-grilla contenedor-carta">
            <img src="." alt="" id="imgCarta" class="img-carta">
            <div class="contenedor-consola-carta">
                <span class="consola-carta" id="textoConsolaCarta">Descripción carta: Lorem ipsum dolor sit, amet
                    consectetur adipisicing elit. Reprehenderit obcaecati voluptatem eius quibusdam facilis dolores
                    suscipit id a explicabo laborum.</span>
            </div>
        </div>

        <div class="item-grilla contenedor-consola-personaje">
            <span class="consola-personaje" id="textoConsolaPersonaje">Consola: Lorem ipsum, dolor sit amet consectetur
                adipisicing elit. Voluptatum, vero nesciunt? Repellendus quos ipsam fugit?</span>
        </div>

        <div class="item-grilla contenedor-botones-juego">
            <div class="boton-juego boton-levantarCarta" id="btnLevantarCarta">
                <span>LEVANTAR CARTA</span>
            </div>
            <div class="boton-juego boton-atacar" id="btnAtacar">
                <span>ATACAR</span>
            </div>
        </div>

        <div class="item-grilla encabezado-elementos-generales">
            <div class="encabezado-personaje">AVATAR</div>
            <div class="encabezado-atributo">ATRIBUTO</div>
            <div class="encabezado-estado">ESTADO</div>
        </div>
        <div class="item-grilla contenedor-elementos-generales">
            <div class="elemento-general contenedor-personaje">
                <img src="img/vida.png" alt="" id="imgPersonaje" class="img-personaje">
            </div>
            <div class="elemento-general contenedor-atributo">
                <div class="atributo">
                    <img src="img/ataque.png" alt="" class="img-atributo">
                    <span class="text-atributo">0</span>
                </div>
                <div class="atributo">
                    <img src="img/esquiva.png" alt="" class="img-atributo">
                    <span class="text-atributo">0</span>
                </div>
                <div class="atributo">
                    <img src="img/velocidad.png" alt="" class="img-atributo">
                    <span class="text-atributo">0</span>
                </div>
                <div class="atributo">
                    <img src="img/vida.png" alt="" class="img-atributo">
                    <span class="text-atributo">0</span>
                </div>
                <div class="atributo">
                    <img src="img/vida.png" alt="" class="img-atributo">
                    <span class="text-atributo">0</span>
                </div>
            </div>
            <div class="elemento-general contenedor-estado">
                <img src="img/vida.png" alt="" class="img-estado" id="imgEstado">
            </div>
        </div>
    </div>

    <script src="js/main.js"></script>
</body>

</html>

我的CSS文件：

* {
    all: initial;
    box-sizing: border-box;
}

* {
    border: 0;
    margin: 0;
}

body {
    font-size: 0.9rem;
    font-family: Titillium Web;
}

.layout {
    width: 100vw;
    height: 100vh;
    display: grid;
    grid-template-rows: repeat(18, 1fr);
    grid-template-columns: repeat(9, 1fr);
    outline: 1.5px solid #000;
}

.contenedor-carta {
    grid-column: 1/10;
    grid-row: 1/12;
    background: #000;
    display: flex;
    flex-direction: column;
}

.img-carta {
    height: calc((6/11)*100%);
}

.contenedor-consola-carta {
    height: calc((5/11)*100%);
    color: #fff;
    display: flex;
    justify-content: center;
    text-align: center;
}

.consola-carta {
    padding: 0 20px;
    padding-top: 50px;
    text-align: center;
}

.contenedor-consola-personaje {
    grid-column: 1/10;
    grid-row: 12/15;
    display: flex;
    align-items: center;
    justify-content: center;
}

.consola-personaje {
    text-align: center;
    padding: 30px;
}

.contenedor-botones-juego {
    grid-column: 1/10;
    grid-row: 15/16;
    display: flex;
    align-items: center;
}

.boton-juego {
    border-top: 1px solid #000;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50%;
    height: 100%;
}

.boton-juego.boton-levantarCarta {
    border-right: 1px solid #000;
}

.encabezado-elementos-generales {
    grid-column: 1/10;
    grid-row: 16/17;
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    background: #000;
    color: #fff;
}

.encabezado-personaje,
.encabezado-atributo,
.encabezado-estado {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.encabezado-personaje {
    grid-column: 1/ span 2;
}

.encabezado-atributo {
    grid-column: 3 / span 5;
}

.encabezado-estado {
    grid-column: 8 / span 2;
}

.encabezado-elementos-generales * {
    text-align: center;
}

.contenedor-elementos-generales {
    grid-column: 1/10;
    grid-row: 17/-1;
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    height: 100%;
}

.contenedor-personaje {
    grid-column: 1/3;
    background: #000;
    border: 1px solid #fff;
}

.contenedor-atributo {
    grid-column: 3/8;
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    background: #000;
}

.atributo {
    margin: 0 1px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.img-atributo {
    border: 1px solid #fff;
    height: 50%;
    background: #fff;
}

.text-atributo {
    margin-top: 2px;
    height: 50%;
    background: #fff;
    text-align: center;
}

.contenedor-estado {
    grid-column: 8/-1;
    background: #000;
    border: 1px solid #fff;
}

@media only screen and (min-width: 600px) {
    body {
        display: flex;
        justify-content: center;
    }

    .layout {
        width: 60vw;
    }
}

@media only screen and (min-width: 700px) {
    body {
        display: flex;
        justify-content: center;
    }

    .layout {
        width: 40vw;
    }
}


.layout
元素被假设为一个9x18的网格，与任何窗口的尺寸相匹配，它做到了，问题是元素
.contenedor-personaje
、
contenedor-atributo
和
.contenedor-estado
的高度。 如果您发现其他错误或有建议，请随时告诉我，我仍然是网页设计的初学者。 导航器：Chrome 操作系统：Ubuntu 20.04

html css responsive-design height responsive-images
1个回答
0
投票

您似乎正在开发一个使用 CSS 网格来构建各个部分的布局。根据您的描述，问题与 .contenedor-elementos-generales 中的 .contenedor-personaje、.contenedor-atributo 和 .contenedor-estado 元素的高度有关。这些元素的高度在网格内可能不会按预期运行。

要解决这些元素的高度问题，您可以考虑进行一些修改：

调整网格行高：确保 .contenedor-elementos-generales 网格中的行具有正确的高度以容纳这些元素中的内容。

处理百分比高度：具有百分比高度的元素通常依赖其父元素的高度来计算自己的高度。确保所有父元素都有一个定义的高度，可以根据这些基于百分比的高度正确计算。

在您的情况下， .contenedor-elementos-generales 的指定高度为 100%，但其父级 .layout 没有固定高度。尝试为 .layout 设置固定高度或使用 100vh（视口高度）以确保网格内正确的百分比计算。

例如：

.layout {
    /* existing styles */
    height: 100vh; /* Set the layout height to be 100% of the viewport height */
}

.contenedor-elementos-generales {
    /* existing styles */
    height: calc(100% - [adjust for other elements' heights]); /* Adjust the height calculation as needed */
}

调整网格中的高度可能需要对百分比值进行一些试验，以完美地满足您的布局要求。另外，确保没有冲突的样式或填充/边距影响整体高度计算。

请记住在不同的视口大小上测试您的布局，以确保响应能力和一致的行为。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.