Div с margin-left и width: 100% переполнение с правой стороны - PullRequest
Новая
       2

Div с margin-left и width: 100% переполнение с правой стороны

18 голосов
/ 12 апреля 2011

У меня есть 2 вложенных элемента div, ширина которых должна составлять 100%.К сожалению, внутренний div с Textbox переполняется и на самом деле больше, чем внешний div.Он имеет левое поле и переполняется примерно на размер поля.

Как это исправить? 

<div style="width:100%;">
    <div style="margin-left:45px; width:100%;">
    <asp:TextBox ID="txtTitle" runat="server" Width="100%"></asp:TextBox><br />
    </div>
</div>

Если я не выполню 100%, текстовое поле не будет иметь ширину 100%.

Ответы [ 6 ]

25 голосов
/ 12 апреля 2011

Просто удалите ширину из обоих div.

A div является элементом уровня блока и будет использовать все доступное пространство (если вы не начнете плавать или позиционировать их), поэтому внешний div автоматически будет равен 100%широкий и внутренний div будет использовать все оставшееся пространство после установки левого поля.

Я добавил пример с textarea на jsfiddle .

Обновленный пример со входом.

6 голосов
/ 12 апреля 2011

Div - это блочный элемент и по умолчанию имеет ширину 100%.Вам просто нужно установить ширину текстовой области на 100%.

1 голос
/ 14 октября 2015

Я понимаю, что это старый пост, но он может помочь кому-то, кто, как и я, пришел на эту страницу с помощью поиска в Google и остался в стороне.

Ни один из приведенных здесь ответов не сработаля и я уже потеряли надежду, но сегодня я искал решение другой подобной проблемы с div, на которую я нашел ответы несколько раз на SO.Принятый ответ сработал для моего div, и у меня внезапно возникла мысль попробовать его для моего предыдущего вопроса с текстовым полем - и это сработало!Решение:

добавьте box-sizing: border-box к стилю текстового поля.

Чтобы добавить это во все многострочные текстовые поля с помощью CSS, добавьте в свою таблицу стилей следующее: 

textarea
{
  box-sizing: border-box;
}

Спасибо тридцатке за решение в

ширина: заполнение на 100%?

и

Содержимое divбольше, чем сам div, если ширина установлена ​​на 100%?

1 голос
/ 12 апреля 2011

Добавьте несколько CSS либо в заголовок, либо во внешний документ. asp: TextBox отображаются как входные данные: 

input {
     width:100%;
}

Ваш HTML должен выглядеть так: http://jsfiddle.net/c5WXA/

Обратите внимание, что это повлияет на все ваше текстовое поле: если вы не хотите этого, присвойте содержащемуся div классу и укажите css. 

.divClass input {
     width:100%;
}
1 голос
/ 12 апреля 2011

Если какая-то другая часть вашего макета влияет на ширину div, вы можете установить width:auto, и div (который является элементом блока) заполнит пространство 

<div style="width:auto">
    <div style="margin-left:45px;width:auto">
        <asp:TextBox ID="txtTitle" runat="server" Width="100%"></asp:TextBox><br />
    </div>
</div>

Если этовсе еще не работает, нам может понадобиться увидеть больше вашего макета HTML / CSS

1 голос
/ 12 апреля 2011 
<div style="width:100%;">
    <div style="margin-left:45px;">
       <asp:TextBox ID="txtTitle" runat="server" Width="100%"></asp:TextBox><br />
    </div>
</div>
...