• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Zmienne css - procenty

VPS Starter Arubacloud
+1 głos
184 wizyt
pytanie zadane 9 września 2022 w HTML i CSS przez Doge Gaduła (3,420 p.)
edycja 9 września 2022 przez Doge

Witam, mam diva x, który ma wysokość procentową swojego parenta. Mam również element z position: absolute, który chciałbym odsunąć od góry o top: wysokość diva x; Czy jest taka możliwość?

EDIT: Znalazłem rozwiązanie, w js wystarczy zrobić

let x = document.querySelector('.info').offsetHeight;
    document.querySelector('.menu').style.setProperty('top', `${x}px`);

 

1 odpowiedź

0 głosów
odpowiedź 9 września 2022 przez VBService Ekspert (255,320 p.)
edycja 9 września 2022 przez VBService

Możesz też przez użycie zmiennych w css-ie, np.

<div class="parent">
  <div class="child1"></div>
  <div class="child2"></div>
</div>
* {
  box-sizing: border-box;
}
:root {
  --some-variable: 50%;
}
.parent {
  position: relative;
  height: 300px;
  border: 1px solid red;
}
.child1 {
  height: var(--some-variable);
  border: 2px dotted green;  
}
.child2 {
  position: absolute;
  top: var(--some-variable);
  width: 5em;
  height: 5em;
  border: 5px solid #0b2e77;
  background-color: #5c88e8;
}

 

 

 


P.S. w javascript można też za pomocą getBoundingClientRect (właściwość height)

przykład

<div class="buttons">
  <button>offsetHeight</button>
  <button>getBoundingClientRect</button>
  <input type="range" id="range" min="300" max="600" step="10" value="300" list="range600">
  <output for="range">300px</output>
  <datalist id="range600">
    <option>300</option><option>350</option>
    <option>400</option><option>450</option>
    <option>500</option><option>550</option>
    <option>600</option>
  </datalist>
</div>
<div class="parent">
  <div class="child1"></div>
  <div class="child2">2<span></span></div>
  <div class="child3">3<span></span></div>
</div>
* {
  box-sizing: border-box;
}
.parent {
  position: relative;
  height: 300px;
  border: 1px solid red;
  font: 500 1em system-ui;  
}
.child1 {
  height: 50%;
  border: 2px dotted green;  
}
.child2,
.child3 {   
  position: absolute;
  width: 5em;
  height: 5em;
  padding: 0.5em;
}
.child2 {
  top: 0;
  left: 0;
  border: 5px solid #0b2e77;
  background-color: #5c88e8;  
}
.child3 {
  top: 0;
  left: 10em;
  border: 5px solid #026b44;
  background-color: #15ef9f;
}
.child2 span,
.child3 span {
  position: absolute;
  bottom: 0;
}
.buttons {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}
.buttons input {
  width: 50%;
}
window.onload = load;

function load() {
  const parent = document.querySelector('.parent'),
        child1 = document.querySelector('.child1'),
        buttons = document.querySelectorAll('button'),
        range = document.querySelector('input'),
        range_output = document.querySelector('output');

  buttons[0].onclick = topBox2;
  buttons[1].onclick = topBox3;
  range.oninput = parentResize;

  function topBox2() {
    const top = child1.offsetHeight,
          child = document.querySelector('.child2');
    setValue(child, top);
  }
  function topBox3() {
    const top = child1.getBoundingClientRect()['height'],
          child = document.querySelector('.child3');
    setValue(child, top);
  }  
  function setValue(element, value) {
    element.style.setProperty('top', value + 'px');
    element.querySelector('span').textContent = value + 'px';    
  }
  function parentResize() {
    parent.style.height = range.value + 'px';
    range_output.value = range.value + 'px';
  }
}

 

komentarz 10 września 2022 przez Doge Gaduła (3,420 p.)
Właśnie ze zmiennymi css to chyba nie zadziała, bo wartość procentowa dla jednego diva nie jest równa wartości procentowej dla drugiego, tym bardziej, że dałem position: absolute;

Podobne pytania

0 głosów
1 odpowiedź 903 wizyt
pytanie zadane 21 listopada 2017 w PHP przez Jake Obywatel (1,820 p.)
0 głosów
2 odpowiedzi 354 wizyt
pytanie zadane 29 marca 2022 w JavaScript przez KubaLaska Początkujący (350 p.)
0 głosów
1 odpowiedź 208 wizyt
pytanie zadane 3 kwietnia 2018 w JavaScript przez JSJerry Początkujący (260 p.)

92,781 zapytań

141,707 odpowiedzi

320,587 komentarzy

62,114 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...