Jak ustawić procentową szerokość div względem nadrzędnego div, a nie viewport

Question

Jak ustawić procentową szerokość div względem nadrzędnego div, a nie viewport

<div id="outer" style="min-width: 2000px; min-height: 1000px; background: #3e3e3e;">
  <div id="inner" style="left: 1%; top: 45px; width: 50%; height: auto; position: absolute; z-index: 1;">
    <div style="background: #efffef; position: absolute; height: 400px; right: 0px; left: 0px;"></div>
  </div>
</div>

Chciałbym, aby wewnętrzny div zajmował 50% przestrzeni podanej jego macierzystemu div(zewnętrznemu). Zamiast tego is otrzymuje 50% dostępnego miejsca dla viewportu, co oznacza, że w miarę jak przeglądarka/viewport kurczy się w rozmiarze, tak też się dzieje.

Biorąc pod uwagę, że zewnętrzny div ma min-width z 2000px, spodziewałbym się, że wewnętrzny div będzie co najmniej 1000px szeroki.

64

html css css-position width

Author: Mosh Feu, 2012-12-13

Source

2 answers

Użyj position: relative na elemencie nadrzędnym.

Zauważ również, że gdybyś nie dodał żadnych atrybutów pozycji do żadnego z div, nie zauważyłbyś takiego zachowania. Juan wyjaśnia dalej.

15

Author: William,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-12-13 20:25:22

score 70 · Accepted Answer

Określenie pozycji niestatycznej, np. position: absolute/relative na węźle oznacza, że będzie ona używana jako odniesienie dla absolutnie umieszczonych elementów w nim http://jsfiddle.net/E5eEk/1/

Zobacz https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Positioning#Positioning_contexts

Możemy zmienić kontekst pozycjonowania - do którego elementu jest pozycjonowany element bezwzględnie. Odbywa się to poprzez ustawienie pozycjonowania na jednym z przodkowie żywiołu.

#outer {
  min-width: 2000px; 
  min-height: 1000px; 
  background: #3e3e3e; 
  position:relative
}

#inner {
  left: 1%; 
  top: 45px; 
  width: 50%; 
  height: auto; 
  position: absolute; 
  z-index: 1;
}

#inner-inner {
  background: #efffef;
  position: absolute; 
  height: 400px; 
  right: 0px; 
  left: 0px;
}

<div id="outer">
  <div id="inner">
    <div id="inner-inner"></div>
  </div>
</div>