Warum ist die folgende `ts` Konstruktion nicht gültig?

Question

Ich möchte calc Funktion verwenden, aber es ist zu einfach.

#data { 
 
    background: #333333; 
 
    float: left; 
 
    width: 70%; 
 
    height: calc(data.width/4)px; 
 
    margin-top: 3%; 
 
    border-radius: 10px; 
 
    border: 0px solid #333333; 
 
}

Answer 1

Ich verstehe Sie Höhe 1/4th die Breite sein wollen.

Dies sollte das tun, was Sie wollen:

#data{ 
 
    background-color:blue; 
 
    width: 100%; 
 
    height: 25vw; 
 
}

<div id="data"></div>

Answer 2

Es funktioniert nicht, weil data.width nicht verfügbar ist, können Sie jedoch Variablen verwenden, um zu erreichen, was Sie wollen.

#container { 
 
    width: 100%; 
 
    height: 100px; 
 
} 
 
#data{ 
 
    --width: 70%; 
 
    background-color:blue; 
 
    width: var(--width); 
 
    height: calc(var(--width)/4); 
 
}

<div id="container"> 
 
    <div id="data"></div> 
 
</div>

Answer 3

Leider CSS zur Zeit nicht erlaubt tatsächlichen Abmessungen der Elemente in Berechnungen verwendet wird. Die calc() function erlaubt nur Operationen mit bekannten Werten desselben Typs (z. B. Längen, die in Einheiten unterschiedlicher Länge ausgedrückt sind).

Um das Element mit konstanten Anteilen zu machen (wie Sie Ihren Code bedeutet) können Sie entweder:

1. Verwenden Ansichtsfenster relativen Einheiten, z.B.

#data { 
 
    background: #333333; 
 
    float: left; 
 
    width: 70vw; 
 
    /* note the white spaces around "/" and no extra units */ 
 
    height: calc(70vw/4); 
 
    /* or just height: 17.5vw; */ 
 
    margin-top: 3%; 
 
    border-radius: 10px; 
 
    border: 0px solid #333333; 
 
}

<div id="data"></div>

2. Verwenden the padding hack (in diesem Fall werden Sie absolute Position für Ihren div Inhalt):

#data { 
 
    background: #333333; 
 
    float: left; 
 
    width: 70vw; 
 
    height: 0; 
 
    padding-top: calc(70vw/4); 
 
    margin-top: 3%; 
 
    border-radius: 10px; 
 
    border: 0px solid #333333; 
 
    position: relative; 
 
}

<div id="data"></div>