Problem z elementem o 100% szerokości elementu

Przypisywanie niektórych elementów HTML (np. Wprowadzania formularzy) o szerokości 100% - nie można już stosować żadnych dodatkowych stylów, które mogłyby wpływać na szerokość. Rzeczy takie jak border lub padding spowodują, że element przekroczy 100%. Powoduje to kłopotliwe elementy, które mogą znajdować się poza ich elementami macierzystymi.Problem z elementem o 100% szerokości elementu

Ponieważ CSS nie obsługuje width: 100% - 2px; Jedynym sposobem, jaki znam, jest użycie bezwzględnej szerokości piksela (width: 98px) lub odcięcie elementu w 100%, co nie jest tak naprawdę opcją.

<div style="overflow:hidden;"> 
<input style="width:100%; border: 1px solid #000;" /> 
</div>

Czy są na to inne sposoby?

Źródło

2011-01-11 Xeoncross

Wraz z adding another div, rozwiązanie będzie wkrótce korzystać z CSS 3, aby dodać box-sizing attribute z regułami CSS. Ta nowa wartość CSS 3 działa już w IE 8 i wszystkich innych przeglądarkach - więc jeśli nie masz nic przeciwko przeskakiwaniu do IE 6 & 7, możesz go teraz użyć!

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

Źródło

2011-01-11 03:45:58 Xeoncross

+1 świetny, działa jak czar! :) –

To zabawne, że każdy z nas kopiuje i wkleja ten fragment z tej samej witryny za każdym razem, gdy jest nam potrzebny: P – Loupax

fajnie! thanx - właśnie tego potrzebowałem! – headkit

Możesz wykonać pojemnik w 100% bez chromowania (obramowania, wypełnienia), a następnie umieścić w nim element blokowy, bez względu na wybrany chrom - element blokowy domyślnie wypełni całkowitą szerokość.

<style> 
.container {width:100%;border:0:margin:0;} 
.thingy {border:1px solid black;margin:2px;background:#ddd;} 
</style> 

<div class="container"> 
    <div class="thingy"> 
    Both worlds? 
    </div> 
</div>

Źródło

2011-01-11 02:50:36 Rudu

Wydaje się to jedynie prace nad div elementów. Jednak http://stackoverflow.com/questions/271067/how-can-i-make-a-textarea-100-width- without-overflowing-when-padding-is-present/272632#272632 pokazuje sposób dodawania inny div wokół elementu i zastosowanie do niego stylizacji. – Xeoncross

Cóż, element wewnętrzny musi być elementem blokowym (nie 'inline' ani' inline-block'). – Rudu

+1 co bym powiedział, gdybym był wystarczająco szybki. :) Warto również zauważyć, że CSS3 daje nam "box-sizing: content-box", który odejmuje granice i dopełnienie od obliczonej szerokości. –

To stara sprawa, ale warto wspomnieć, że od CSS3, można użyć calc:

width: calc(100% - 2px);

Źródło

2017-04-25 20:51:59 Keith

Problem z elementem o 100% szerokości elementu

Odpowiedz

Powiązane problemy