Zmienne css - procenty

Question

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`);

 

Answer 1

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';
  }
}

 

Comments

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;