CSS Div procent szerokości i wypełnienia bez łamania układu

Question

CSS Div procent szerokości i wypełnienia bez łamania układu

Może i jest na to prosta poprawka, ale niepokoi mnie to od wieków...

Pozwól mi wyjaśnić sytuację. Mam div o ID 'kontener', który zawiera całą zawartość na stronie (w tym nagłówek i stopkę również), który będzie trzymać wszystko w linii i mogę zrobić tylko 1 proste 'margin: 0 auto;' zamiast wielokrotności. Powiedzmy więc, że szerokość kontenera #jest ustawiona na 80%. Teraz jeśli włożę do środka inny div o tej samej szerokości (80%) i nadam mu ID 'header' z 10px z padding dookoła, układ będzie "złamać" (że tak powiem), ponieważ strona dodaje ilość padding na szerokość. Więc, jak Mogę sprawić, że pozostanie w granicach bez użycia metod takich jak niższy procent dla #header div? Zasadniczo chcę, żeby było płynne.

Oto przykładowy kod, który da ci wyobrażenie o tym, o czym mówię...

CSS

#container {
    position:relative;
    width:80%;
    height:auto;
}
#header {
    position:relative;
    width:80%;
    height:50px;
    padding:10px;
}

HTML

<div id="container">
    <div id="header">Header contents</div>
</div>

Czy ktoś może mi pomóc z tym problemem, który mnie dręczy na zawsze?

51

css padding fluid-layout

Author: easwee, 2010-08-22

Source

3 answers

Spróbuj usunąć position z header i dodaj overflow do container:

#container {
    position:relative;
    width:80%;
    height:auto;
    overflow:auto;
}
#header {
    width:80%;
    height:50px;
    padding:10px;
}

2

Author: Sarfraz,
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
2010-08-21 20:42:54

Możesz również użyć funkcji CSScalc () , aby odjąć szerokość wypełnienia od procentu szerokości kontenera.

Przykład:

width: calc((100%) - (32px))

Upewnij się, że odejmowana szerokość jest równa całkowitej wyściółce, a nie tylko połowie. Jeśli wstawisz obie strony wewnętrznego div 16px, powinieneś odjąć 32px od ostatecznej szerokości, zakładając, że poniższy przykład jest tym, co chcesz osiągnąć.

.outer {
  width: 200px;
  height: 120px;
  background-color: black;
}

.inner {
  height: 40px;
  top: 30px;
  position: relative;
  padding: 16px;
  background-color: teal;
}

#inner-1 {
  width: 100%;
}

#inner-2 {
  width: calc((100%) - (32px));
}

<div class="outer" id="outer-1">
  <div class="inner" id="inner-1"> width of 100% </div>
</div>

<br>
<br>

<div class="outer" id="outer-2">
  <div class="inner" id="inner-2"> width of 100% - 16px </div>
</div>

1

Author: Ian Gradert,
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
2018-04-28 15:20:32

score 89 · Accepted Answer

Jeśli chcesz, aby #header miał taką samą szerokość jak Twój kontener, z 10px padding, możesz pominąć jego deklarację szerokości. Spowoduje to, że domyślnie zajmie całą szerokość rodzica(ponieważ div jest domyślnie elementem poziomu bloku).

Następnie, ponieważ nie zdefiniowano na nim szerokości, 10px padding zostanie prawidłowo zastosowane wewnątrz elementu, zamiast dodawać do jego szerokości:

#container {
    position: relative;
    width: 80%;
}

#header {
    position: relative;
    height: 50px;
    padding: 10px;
}

Możesz go zobaczyć w akcji tutaj.

Na kluczem przy użyciu szerokości procentowych i wypełnienia pikseli/marginesów nie jest definiowanie ich na tym samym elemencie(jeśli chcesz dokładnie kontrolować rozmiar). Zastosuj szerokość procentową do rodzica, a następnie dopełnienie/margines pikseli do potomka display: block bez ustawionej szerokości.

Update

Inną opcją radzenia sobie z tym jest użycie box-sizing reguły CSS:

#container { 
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */

    /* Since this element now uses border-box sizing, the 10px of horizontal
       padding will be drawn inside the 80% width */
    width: 80%;
    padding: 0 10px;
}

Oto post mówiący o tym, jak box-sizing działa.