Jak zrobić szerokość elementu: 100% minus wypełnienie?

396

Mam dane HTML.

Dane wejściowe mają padding: 5px 10px;być równe 100% szerokości div rodzica (która jest płynna).

Jednak używanie width: 100%;powoduje, że dane wejściowe są w 100% + 20pxjaki sposób mogę to obejść?

Przykład

Hailwood
źródło
1
Zobacz tę odpowiedź, którą opublikowałem nie 15 minut temu: stackoverflow.com/questions/5219030/... To powinno działać idealnie dla Ciebie, chyba że wymaga tego do pracy w IE7.
thirtydot
Jeśli użyłeś mojej metody, zobacz niewielką zmianę, którą właśnie wprowadziłem w odpowiedzi. Zapewnia „równomierne wypełnianie” w niektórych przeglądarkach.
thirtydot
@Hailwood Mam rozwiązanie, które utrzymuje padding inputi wspiera IE7
Vladimir Starkov
Zobacz także odpowiedź poniżej za pomocą funkcji calc
Daan

Odpowiedzi:

485

box-sizing: border-box to szybki i łatwy sposób to naprawić:

Działa to we wszystkich nowoczesnych przeglądarkach i IE8 +.

Oto demo: http://jsfiddle.net/thirtydot/QkmSk/301/

.content {
    width: 100%;
    box-sizing: border-box;
}

Wersje z prefiksem przeglądarki ( -webkit-box-sizingitp.) Nie są potrzebne w nowoczesnych przeglądarkach.

trzydzieści
źródło
5
Nie sądzę, że to takie złe rozwiązanie. Ogólnie rzecz biorąc, owijanie elementów w dodatkowy div jest dobrym sposobem na wypełnianie elementów bez wypychania całkowitej szerokości elementu poza jego pojemnik nadrzędny.
Jake Wilson
1
Wypełnianie div zawijania powoduje również nieidentyczne wyniki dodawania padding bezpośrednio do danych wejściowych.
Felix Fung
@ thirtydot Mam bardziej elastyczne i eleganckie rozwiązania, które utrzymują szerokość wejścia
Vladimir Starkov
8
@ thirtydot tak, po prostu zostaw to zepsute dla IE7 i pozwól M $ naprawić to :)
Petr Peller
To także zachowuje automatyczne zmienianie rozmiaru obszarów tekstowych dla każdego z was jQuery people vs. box-sizing spieprzy to, chyba że zastosuje się to do ukrytego div.
Michael J. Calkins,
276

Właśnie dlatego mamy box-sizing w CSS.

Zredagowałem twój przykład, a teraz działa w Safari, Chrome, Firefox i Opera. Sprawdź to: http://jsfiddle.net/mathias/Bupr3/ Wszystko, co dodałem, to:

input {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

Niestety starsze przeglądarki, takie jak IE7, nie obsługują tego. Jeśli szukasz rozwiązania, które działa w starych IE, sprawdź inne odpowiedzi.

Mathias Bynens
źródło
3
+1, ale caniuse.com/#search=box-sizing IE 8? Ponadto github.com/Schepp/box-sizing-polyfill wydaje się stanowić rozwiązanie dla IE 6-7.
Alix Axel
1
+1, jest to świetne, jeśli nie obchodzi Cię IE (na przykład podczas korzystania z PhoneGap)
Luke B.
3
Co to za magia? +1 za odpowiedź i +1 za komentarz nade mną (to jest dokładnie to, czego potrzebuję).
Eduard Luca,
20
To powinno być zachowanie domyślne. Zamiast +20 do szerokości. Czasami CSS wydaje się poważnie pomieszany.
Soth
2
Aby wyjaśnić obsługę zmiany rozmiaru pudełka w IE, w przypadku IE zmiana rozmiaru pudełka zależy od Trybu dokumentu IE, działa on w trybie „IE8 Standards mode” i nowszych. Będzie więc działał w wersji przeglądarki IE8 również wtedy, gdy trybem dokumentu jest „Tryb normalny IE8”. Mam nadzieję że to pomoże.
Sanjeev,
40

Użyj dopełnienia również w procentach i usuń z szerokości:

wypełnienie: 5%;
szerokość: 90%;
Alex
źródło
19
Fyi, to rozwiązanie jest idealne tylko dla nieelastycznych układów.
mufki
+1, Myślę, że problemem będą granice. Zwykle wyglądają „dobrze” przy maks. 1–3 pikselach. Wyniki są zbyt nieprzewidywalne, biorąc pod uwagę niespójności przeglądarki dotyczące zaokrąglania subpikseli.
Alix Axel
27

Możesz to zrobić bez użycia box-sizingi niejasnych rozwiązań width~=99%.

Demo na jsFiddle :
enter image description here

  • Zachowaj dane wejściowe paddingiborder
  • Dodaj do wejściowego ujemnego poziomego margin= border-width+horizontal padding
  • Dodaj do otoki wejściowej poziomej paddingrównej marginz poprzedniego kroku

Znaczniki HTML:

<div class="input_wrap">
    <input type="text" />
</div>

CSS:

div {
    padding: 6px 10px; /* equal to negative input's margin for mimic normal `div` box-sizing */
}

input {
    width: 100%; /* force to expand to container's width */ 
    padding: 5px 10px;
    border: none;
    margin: 0 -10px; /* negative margin = border-width + horizontal padding */ 
}
Vladimir Starkov
źródło
4
To dobra sztuczka, aby użyć marginesu dla danych wejściowych i wypełnienia dla opakowania, aby skompensować wypełnienie wejściowe.
maulik13
Zgadzam się całkowicie !!! Użyłem tego rozwiązania i działa ono szeroko, bez brudnych sztuczek! To musiało być rozwiązanie każdego rodzaju tych odpowiedzi.
Andre Figueiredo,
Nie do końca rozumiem, jaką rolę ma ujemny margines - wiem tylko, że jeśli wartość jest nieprawidłowa, pole kończy się na jedną stronę, ale jakoś to rozwiązuje margines symetryczny
Casebash,
21

Użyj css calc ()

Super proste i niesamowite.

input {
    width: -moz-calc(100% - 15px);
    width: -webkit-calc(100% - 15px);
    width: calc(100% - 15px);
}​

Jak widać tutaj: szerokość Div 100% minus stała liczba pikseli
Webvitaly ( https://stackoverflow.com/users/713523/webvitaly )
Oryginalne źródło: http://web-profile.com.ua/css/dev/css -width-100prc-minus-100px /

Właśnie skopiowałem to tutaj, ponieważ prawie przegapiłem to w innym wątku.

Daan
źródło
Musisz to jednak ręcznie zaprogramować. Idealnie byłoby to automatycznie ustalone.
JackHasaKeyboard
11

Zakładając, że jestem w pojemniku z wyściółką 15px, zawsze używam tej części wewnętrznej:

width:auto;
right:15px;
left:15px;

To rozciągnie wewnętrzną część na dowolną szerokość, która powinna być mniejsza o 15 pikseli z każdej strony.

Andologia
źródło
Czy możesz opublikować pełny przykład width:autozastosowania do inputpola?
jakubiszon
to tylko połowa odpowiedzi. domyślna pozycja elementów jest statyczna, więc lewy i prawy tutaj nic nie zrobią. a szerokość auto jest również wartością początkową, więc .. cała ta odpowiedź jest niczym :)
honk31
5

Możesz wypróbować kilka sztuczek pozycjonujących. Możesz umieścić dane wejściowe w div za position: relativepomocą stałej wysokości, a następnie na wejściuposition: absolute; left: 0; right: 0; i dowolne wypełnienie, które ci się podoba.

Przykład na żywo

Felix
źródło
W jakich przeglądarkach to przetestowałeś? :(
thirtydot
Hmm, działa tylko w Chrome. Ale wiem, że mam coś bardzo podobnego do pracy w FF i IE.
Felix
Wygląda na to, że nie działa z <input>elementami w Firefoksie (idk o IE). Działa jednak z <div>s. I nie, display: blockna <input>nie działa również: - /
Felix
5

Oto zalecenie codeontrack.com , które zawiera dobre przykłady rozwiązań:

Zamiast ustawiać szerokość div na 100%, ustaw ją na auto i upewnij się, że <div>jest ustawiona na display: block (domyślnie dla <div>).

MÓJ KOMPUTER
źródło
3
Nie należy publikować linków bezpośrednio. Możesz dołączyć informacje z tego linku. Powodem jest to, że może być jutro, że link nie będzie dostępny, a twoja odpowiedź nie będzie już ważna.
Amnesh Goel
4

Przenieś wypełnienie pola wprowadzania do elementu opakowania.

<style>
div.outer{ background: red; padding: 10px; }
div.inner { border: 1px solid #888; padding: 5px 10px; background: white; }
input { width: 100%; border: none }
</style>

<div class="outer">
    <div class="inner">
       <input/>
    </div>
</div>

Zobacz przykład tutaj: http://jsfiddle.net/L7wYD/1/

Martin Jespersen
źródło
2

Po prostu zrozum różnicę między szerokością: auto; i szerokość: 100%; Szerokość: auto; (AUTO) MATYCZNIE obliczy szerokość, aby dopasować dokładnie do podanego div owinięcia, w tym wypełnienia. Szerokość 100% powiększa szerokość i dodaje wypełnienie.

użytkownik3849374
źródło
Czy możesz podać przykład, w którym działa to z <wejście>? W przeciwnym razie po prostu wysyłasz ludzi na dziką gęś.
Pan Lister
0

Co powiesz na zawinięcie go w pojemnik? Kontener powinien mieć styl:

{
    width:100%;
    border: 10px solid transparent;
}
Vitali Protosovitski
źródło
0

Spróbuj tego:

width: 100%;
box-sizing: border-box;
Manolo Ramos
źródło
-1

Dla mnie przy użyciu margin:15px;padding:10px 0 15px 23px;width:100%wynik był następujący:

wprowadź opis zdjęcia tutaj

Rozwiązaniem było dla mnie użycie width:autozamiast width:100%. Mój nowy kod to:

margin:15px;padding:10px 0 15px 23px;width:auto. Następnie element jest odpowiednio wyrównany:

wprowadź opis zdjęcia tutaj

Jaime Montoya
źródło
-1

Miałem ten sam problem. Napraw to tak:

width: 100%;
box-sizing: border-box;
Manny Alvarado
źródło
-9

Możesz to zrobić:

width: auto;
padding: 20px;
MissHD
źródło
To nie to samo 100% - marża.
James