Jak mogę utworzyć obszar tekstowy o szerokości 100% bez przepełnienia, gdy wypełnienie jest obecne w CSS?

Question

Jak mogę utworzyć obszar tekstowy o szerokości 100% bez przepełnienia, gdy wypełnienie jest obecne w CSS?

Renderuję następujący fragment CSS i HTML.

textarea
{
  border:1px solid #999999;
  width:100%;
  margin:5px 0;
  padding:3px;
}

<div style="display: block;" id="rulesformitem" class="formitem">
  <label for="rules" id="ruleslabel">Rules:</label>
  <textarea cols="2" rows="10" id="rules"/>
</div>

Problem polega na tym, że obszar tekstowy jest 8px szerszy (2px dla obramowania + 6px dla wypełnienia) niż rodzic. Czy istnieje sposób, aby nadal używać obramowania i wypełnienia, ale ograniczyć Całkowity rozmiar textarea do szerokości rodzica?

383

html css stylesheet

Author: captainsac, 2008-11-07

Source

14 answers

Odpowiedzią na wiele problemów z formatowaniem CSS wydaje się być "dodaj kolejny

!"

Więc, w tym duchu, próbowałeś dodać wrapper div, do którego nakładane są obramowania/wypełnienia, a następnie umieścić pole tekstowe o szerokości 100% wewnątrz tego? Coś jak (nieprzetestowane):

textarea
{
  width:100%;
}
.textwrapper
{
  border:1px solid #999999;
  margin:5px 0;
  padding:3px;
}

<div style="display: block;" id="rulesformitem" class="formitem">
  <label for="rules" id="ruleslabel">Rules:</label>
  <div class="textwrapper"><textarea cols="2" rows="10" id="rules"/></div>
</div>

71

Author: Dave Sherohman,
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
2015-06-26 05:48:09

Rozważmy końcowe wyjście renderowane użytkownikowi tego, co chcemy osiągnąć: wyściełany obszar tekstowy z obramowaniem i wyściółką, które cechują się tym, że kliknięcie przekazuje fokus do naszej strefy tekstowej, oraz zaletą automatycznego 100% szerokości typowego dla elementów blokowych.

Moim zdaniem najlepszym podejściem jest stosowanie rozwiązań niskiego poziomu w miarę możliwości, aby osiągnąć maksymalną obsługę przeglądarek. W tym przypadku tylko HTML może działać dobrze, unikając użycia Javascript (który zresztą wszyscy kochamy).

Znacznik etykiety jest w naszej pomocy, ponieważ ma takie zachowanie i może zawierać elementy wejściowe, do których musi adresować. Jego domyślnym stylem jest jeden z elementów inline, więc, dając etykiecie styl wyświetlania bloków możemy skorzystać z automatycznej szerokości 100%, w tym wypełnienia i obramowania, podczas gdy wewnętrzna Strefa tekstowa nie ma obramowania, bez wypełnienia i 100% szerokości.

Przyjrzyjmy się W3C specyfice innych zalet możemy Uwaga:

jeśli zewnętrzna etykieta dla textarea została już zaprojektowana, nie występują konflikty, ponieważ dane wejście może mieć jedną lub więcej etykiet.

Zobacz szczegóły W3C aby uzyskać bardziej szczegółowe informacje.

Prosty przykład:


<html>
<head>
<style type="text/css">
.container { width: 400px; border: 3px solid #f7c; }
.textareaContainer {
    display: block;
    border: 3px solid #38c;
    padding: 10px;
}
textarea { width: 100%; margin: 0; padding: 0; border-width: 0; }
</style>
</head>

<body>
<div class="container">
    I am the container
    <label class="textareaContainer">
        <textarea name="text">I am the padded textarea with a styled border...</textarea>
    </label>
</div>
</body>
</html>

Wyściółka i obramowanie .textareaContainer elements są te, które chcemy dać do textarea. Spróbuj je edytować, aby stylować je tak, jak chcesz. Dałem duże i widoczne wyściółki i obramowania do .element textareaContainer pozwala zobaczyć ich zachowanie po kliknięciu.

19

Author: Emanuele Del Grande,
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
2016-11-15 09:37:16

Jeśli nie przejmujesz się szerokością wyściółki, rozwiązanie to również zachowa wyściółkę w procentach..

textarea
{
    border:1px solid #999999;
    width:98%;
    margin:5px 0;
    padding:1%;
}

Nie idealnie, ale dostaniesz trochę wyściółki, a szerokość dodaje się do 100%, więc wszystko jest dobre

15

Author: qui,
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-05-02 09:22:48

Natknąłem się na inne rozwiązanie tutaj to jest takie proste: dodać padding-right do kontenera textarea. Pozwala to zachować margines, obramowanie i wypełnienie na obszarze tekstowym, co pozwala uniknąć problemu, który Beck wskazał na podświetlenie ostrości, które chrome i safari umieściły wokół obszaru tekstowego.

Prawo padding-right kontenera powinno być sumą efektywnego marginesu, obramowania i padding po obu stronach obszaru tekstowego, plus dowolne wypełnienie, które może być potrzebne dla kontenera. Więc, dla przypadku w pytaniu pierwotnym:

textarea{
    border:1px solid #999999;
    width:100%;
    margin:5px 0;
    padding:3px;
}
.textareacontainer{
    padding-right: 8px; /* 1 + 3 + 3 + 1 */
}

<div class="textareacontainer">
    <textarea></textarea>
</div>

11

Author: Brian,
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
2013-12-03 05:13:19

Ten kod działa u mnie z IE8 i Firefoksem

<td>
    <textarea style="width:100%" rows=3 name="abc">Modify width:% accordingly</textarea>
</td>

8

Author: Jeff Guest,
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
2016-02-22 13:03:25

Możesz skorzystać z właściwości box-sizing, jest ona obsługiwana przez wszystkie główne przeglądarki zgodne ze standardami i IE8+. Jednak nadal będziesz potrzebował obejścia dla IE7. Czytaj więcej tutaj .

5

Author: jzfgo,
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
2016-11-15 10:35:18

Nie, Nie możesz tego zrobić za pomocą CSS. Z tego powodu Microsoft początkowo wprowadził Inny, a może bardziej praktyczny model box . Model pudełkowy, który ostatecznie wygrał, sprawia, że praktyczne jest mieszanie procentów i jednostek.

Myślę, że nie jest w porządku z Tobą wyrażanie szerokości wypełnienia i obramowania w procentach rodzica.

2

Author: buti-oxa,
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
2008-11-07 05:26:12

Jeśli padniesz i przesuniesz w ten sposób:

textarea
{
    border:1px solid #999999;
    width:100%;
    padding: 7px 0 7px 7px; 
    position:relative; left:-8px; /* 1px border, too */
}

Prawa strona obszaru textarea idealnie dopasowuje się do prawej strony kontenera, i tekst wewnątrz obszaru textarea idealnie dopasowuje się do tekstu głównego w kontenerze... a lewa strona obszaru tekstowego "wystaje" trochę. czasami jest ładniejsza.

1

Author: commonpike,
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
2013-04-03 21:56:53

Użyj właściwości rozmiaru pola :

-moz-box-sizing:border-box; 
-webkit-box-sizing:border-box; 
box-sizing:border-box;

To pomoże

1

Author: user3074446,
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
2014-08-03 09:30:34

Dla osób, które używają Bootstrap, textarea.form-control może również prowadzić do problemów z rozmiarem textarea. Chrome i Firefox wydają się używać różnych wysokości z następującym Bootstrap CSS:

textarea.form-conrtol{
    height:auto;
}

1

Author: Gwi7d31,
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
2014-08-07 15:05:11

A co z ujemnymi marżami?

textarea {
    border:1px solid #999999;
    width:100%;
    margin:5px -4px; /* 4px = border+padding on one side */
    padding:3px;
}

0

Author: meustrus,
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-06-14 21:01:10

Często rozwiązuję ten problem calc(). Po prostu dajesz pole tekstowe o szerokości 100% i pewną ilość wypełnienia, ale musisz odjąć całkowite lewe i prawe Wypełnienie 100% szerokości, które podałeś do pola tekstowego:

textarea {
    border: 0px;
    width: calc(100% -10px);
    padding: 5px; 
}

Lub jeśli chcesz nadać textarea obramowanie:

textarea {
    border: 1px;
    width: calc(100% -12px); /* plus the total left and right border */
    padding: 5px; 
}

0

Author: Jeroen Bellemans,
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
2016-11-16 08:25:05

* {
    box-sizing: border-box;
}

.container {
    border-radius: 5px;
    background-color: #f2f2f2;
    padding: 20px;
}

/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}

input[type=text], select, textarea{
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    resize: vertical;
}

<div class="container">
  <div class="row">
    <label for="name">Name</label>
    <input type="text" id="name" name="name" placeholder="Your name..">
  </div>
  <div class="row">
    <label for="country">Country</label>
    <select id="country" name="country">
      <option value="australia">UK</option>
      <option value="canada">USA</option>
      <option value="usa">RU</option>
    </select>
  </div>    
  <div class="row">
    <label for="subject">Subject</label>
    <textarea id="subject" name="subject" placeholder="Write something.." style="height:200px"></textarea>
  </div>
</div>

0

Author: antelove,
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-02-01 05:47:15

score 612 · Accepted Answer

Dlaczego nie? Zapomnij o hackach i po prostu zrób to za pomocą CSS?

Jeden używam często:

.boxsizingBorder {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

Zobacz obsługę przeglądarki tutaj .

612

Author: Piet Bijl,
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
2016-11-15 10:16:10