CSS-свойство width задаёт не общую ширину блока, а только ширину содержания. Общая ширина блока затем складывается из трёх компонентов: ширины содержания, внутренних отступов и ширины рамок слева и справа.
Поведение элемента может зависеть от того, как именно вы зададите его ширину:
Первый вариант. Вариант по умолчанию, когда ширина не задаётся, соответствует значению width: auto; . В этом случае блок занимает всю ширину родительского блока. Если у блока есть внутренние отступы или рамки, то его ширина содержания автоматически уменьшается, а общая ширина остаётся равной ширине родителя.
Второй вариант. Когда ширина блока задана явно, например, width: 100%; . В этом случае ширина содержания блока равна ширине родительского блока. Если блоку добавить внутренние отступы и рамки, то его общая ширина становится больше ширины родителя.
В этом задании вы увидите, как эти эффекты работают на практике. Обратите внимание, что ширины блоков будут рассчитываться автоматически.
Помимо CSS ширина полей ввода может быть задана в значении атрибута size . Ширина width: auto для полей ввода рассчитывается из значения size по умолчанию и не растягивает поля на всю ширину контейнера.
Имеется такой код:
Необходимо сделать на всю доступную ширину родительского дива.
- Вопрос задан более трёх лет назад
- 15186 просмотров
Если не смущают косяки в ie DOCTYPE html >
html >
head >
title > Test title >
style type =’text/css’ >
body > div <
width:400px;
>
.row <
display:table-row;
>
.row input[type=text] <
width:100%;
>
.row div:first-child <
display:table-cell; white-space:nowrap;
>
.row div:nth-child(2) <
display:table-cell;
width:100%;
padding-right:4px;
>
.row div:nth-child(3) <
width:40px;
>
style >
head >
body >
div >
div class =’row’ >
div > Floating size div >
div >
input type =’text’ />
div >
div > 40px; div >
div >
div >
div >
div class =’row’ >
div > Really Floating size div >
div >
input type =’text’ />
div >
div > 40px; div >
div >
div >
body >
html >
I have an html input.
The input has padding: 5px 10px; I want it to be 100% of the parent div’s width(which is fluid).
However using width: 100%; causes the input to be 100% + 20px how can I get around this?
15 Answers 15
box-sizing: border-box is a quick, easy way to fix it:
The browser prefixed versions ( -webkit-box-sizing , etc.) are not needed in modern browsers.
This is why we have box-sizing in CSS.
I’ve edited your example, and now it works in Safari, Chrome, Firefox, and Opera. Check it out: http://jsfiddle.net/mathias/Bupr3/ All I added was this:
Unfortunately older browsers such as IE7 do not support this. If you’re looking for a solution that works in old IEs, check out the other answers.
Use padding in percentages too and remove from the width:
You can do it without using box-sizing and not clear solutions like w >.
Demo on jsFiddle: 
- Keep input’s padding and border
- Add to input negative horizontal margin = border-width + horizontal padding
- Add to input’s wrapper horizontal padding equal to margin from previous step
HTML markup:
CSS:
Super simple and awesome.
Just copied this over here, because I almost missed it in the other thread.
Assuming i’m in a container with 15px padding, this is what i always use for the inner part:
That will stretch the inner part to whatever width it should be less the 15px either side.
You can try some positioning tricks. You can put the input in a div with position: relative and a fixed height, then on the input have position: absolute; left: 0; right: 0; , and any padding you like.
Live example
Here is the recommendation from codeontrack.com, which has good solution examples:
Instead of setting the width of the div to 100%, set it to auto, and be sure, that the
Move the input box’ padding to a wrapper element.