Position absolute height - wartości procentowe nie działają

pytanie zadane 20 sierpnia 2022 w HTML i CSS przez ladybug Początkujący (350 p.)
edycja 22 sierpnia 2022 przez ladybug

Hej, proszę bardzo o zrozumienie dlaczego nie mogę ustawić wartości procentowych dla obiektów z position absolute.
Mam div o nazwie container, który chcę żeby mial 100% szerokość i 100% wysokość. Problem pojawia się gdy ustawiam wysokość - kiedy w containerze wysokość jest ustawiona w pikselach, pozostałe divy mogę ustawiać w procentach. Gdy height w container zmienię na proenty, wtedy w divach muszę używać pikseli.

Będę bardzo wdzięczna za wyjaśnienie!

<body>
  <div id="container">
    <div id="logo">
      <img src="//via.placeholder.com/150x50/ 2c72db/ffffff?text=Canvas">
    </div>
    <nav>
      <div class="menu">
        <ul>
          <li>Home</li>
          <li>About Us</li>
          <li>Rates</li>
          <li>Contact Us</li>
          </div>
        </nav>
      </div>
    </body>


#container {
    margin-left:auto;
    margin-right:auto;
    height:100%;
    width:100%;
    position: relative;
}
#logo {
  position: absolute;
  top:2%;
  left:2%;
}
.menu {
  position: absolute;
  top:2%;
  left: 55%;
}
li {
  display: inline-block;
  margin-right:70px;

komentarz 21 sierpnia 2022 przez ladybug Początkujący (350 p.)

Niestety ustawienie

html {
  height: 100%;
}
body {
  min-height: 100%;
}

Nie pomogło, muszę nadal ustawić wysokość w main container w pikselach by móc używać w pozostałych divach wartości procentowe.

komentarz 21 sierpnia 2022 przez pablop76 VIP (123,180 p.)

Użyj vh dla kontenera

komentarz 22 sierpnia 2022 przez VBService Ekspert (253,340 p.)
edycja 22 sierpnia 2022 przez VBService

Tworzenie layout-u strony w ten sposób jak sama widzisz może być problematyczne, może rozważ zastosowanie flex lub grid.

komentarz 22 sierpnia 2022 przez ladybug Początkujący (350 p.)

@pablop76, do viewport jescze nie dotarłam ale jest na mojej liście

komentarz 22 sierpnia 2022 przez ladybug Początkujący (350 p.)

@VBService, Próbuję różnych metod i chcę je wszystkie zrozumieć jak działają

komentarz 22 sierpnia 2022 przez VBService Ekspert (253,340 p.)

@ladybug, position dobrze się sprawdza np. we wnętrzu "kontenera"

przykład ( kontener - class="price-tag" )

<div class="products">
  <div class="price-tag chocolate">
    <img
         src="https://picsum.photos/300/200/?random=1"
         alt="price tag product lorem"
    />
    <div class="price-strikethrough">&nbsp;36&dollar;&nbsp;</div>
    <div class="price-normal">15&dollar;</div>
  </div>
  
  <div class="price-tag lilac">
    <img
         src="https://picsum.photos/300/200/?random=2"
         alt="price tag product ipsum"
    />
    <div class="price-strikethrough">&nbsp;99&dollar;&nbsp;</div>
    <div class="price-normal">25&dollar;</div>
  </div>
  
  <div class="price-tag greenapple">
    <img
         src="https://picsum.photos/300/200/?random=3"
         alt="price tag product dolor sit"
    />
    <div class="price-strikethrough">&nbsp;199&dollar;&nbsp;</div>
    <div class="price-normal">99&dollar;</div>
  </div>  
</div>

html,
body {
  margin: 2em;
}
.products {
  position: relative;
}
.products .price-tag {
  position: relative;
  width: 300px;
  height: 200px;
  overflow: hidden;
  margin-bottom: 2em;
  padding: 0;
  border-radius: 1em;
  font-family: system-ui;
  letter-spacing: 0.05em;
  box-shadow: 0 0 1.5em 0.5em gray;
}
.products div img {
  width: 100%;
  height: 100%;
}
.products .price-tag::before {
  position: absolute;
  content: '';
  width: 100%;
  height: 100%;
  top: -50%;
  right: -50%;
  transform: rotate(35deg);
}

.products .chocolate::before {
  background-image: 
    linear-gradient(
      rgba(190, 146, 104, 0.95) 20%, 
      rgba(190, 166, 124, 0.95) 97%, 
      transparent 100%);
}
.products .lilac::before {
  background-image: 
    linear-gradient(
      rgba(190, 146, 204, 0.95) 20%, 
      rgba(190, 166, 224, 0.95) 97%, 
      transparent 100%);
}
.products .greenapple::before {
  background-image: 
    linear-gradient(
      rgba(0, 126, 0, 0.95) 20%, 
      rgba(0, 196, 0, 0.95) 97%, 
      transparent 100%);
}

.products .price-strikethrough {
  position: absolute;
  top: 1.5em;
  right: 4.5em;
  font-size: 0.85em;
  font-weight: 700;
  text-decoration: line-through;
  color: white;
}
.products .price-normal {
  position: absolute;
  top: 1em;
  right: 0.2em;
  font-size: 2em;
  font-weight: 700;
  color: white;
}

2 odpowiedzi

odpowiedź 20 sierpnia 2022 przez pablop76 VIP (123,180 p.)

Jeżeli ustawiasz kontener w procentach to przyjmuje on wartość względem rodzica (html, body) więc 100% rodzica to 0 a więc jakakolwiek wartość procentowa nie działa. Musisz ustawić

html {
  height: 100%;
}
body {
  min-height: 100%;
}

komentarz 20 sierpnia 2022 przez ladybug Początkujący (350 p.)

Bardzo dziękuję za wyjaśnienie

komentarz 20 sierpnia 2022 przez jasper93 Obywatel (1,310 p.)

Mnie tylko zastanawia jedna kwestia, element body rośnie wraz z elementami, które są w body, to dlaczego trzeba ustawić stałą wartość wysokości, skoro już w tym momencie posiada wysokość 320,8px przez elementy, które zajmują określne miejsce?

komentarz 21 sierpnia 2022 przez pablop76 VIP (123,180 p.)

Ale tutaj mowa o wartościach procentowych.

komentarz 21 sierpnia 2022 przez jasper93 Obywatel (1,310 p.)

No tak, ale zostało napisane, że 100 % rodzica to 0, czyli w tym przypadku body jest rodzicem, a on już ma określona wysokość przez dzieci, które maja pewną zawartość i wypychają całość na wysokość - z tego co widzę body ma chyba 1000px, dlaczego trzeba określać wartość %? Zrozumiałem, że 100 % rodzica to 0 wysokości, a body ma jednak wysokość.

komentarz 22 sierpnia 2022 przez ladybug Początkujący (350 p.)

Może opiszę co chciałam osiągnąć i będzie Ci wtedy łatwiej zrozumieć

Chciałam żeby #container zajmował cały rozmiar strony, czyli 100% szerokość i wysokość. Na podstawie containera chciałam ustawiać procentowo inne elementy na stronie. Kiedy container ma wartość 100% width i height, mogę wstedy ustawiać inne elementy (np logo) procentowo, ale tylko w szerokości, wysokość musi być wyrażona w pikselach. Jeśli main container albo body ma ustawioną wysokość w pikselach, wtedy mogę ustawić wartość dla innych elementów procentowo. Nie mogę zrozumieć tej zależności.

odpowiedź 22 sierpnia 2022 przez ladybug Początkujący (350 p.)

Znalazłam dobrą odpowiedź na podobny problem na stackoverflow. Wklejam tutaj, może się komuś przyda.

"The top CSS property only works if the parent element (i.e., main-container) has the height set in any unit other than %.

The problem is very logical. How would you position an element 10% from the top if you don't know the height of the parent?

Is it 10% of the 50px height? (That would be 5px from the top.)

Is it 10% of the 500px height? (That would be 50px from the top.)

Is it 10% of the 5000px height? (That would be 500px from the top.)

The parent cannot have the height set in % because then you need to set the height (in any unit other than %) to the parent of the parent."

1	komentarz 22 sierpnia 2022 przez overcq Pasjonat (21,710 p.) Dodam do tego jeszcze, że Absolutely positioned elements are completely removed from the document flow, and thus their dimensions cannot alter the dimensions of their parents. Position: absolute and parent height?