Сделайте div и ширину входа равным 100% от родителя

Question

Рассмотрим родителя <div>, который является position:relative; width:100%. Он содержит <div> и <input>. Я хочу, чтобы они имели ширину 100%.

В идеале следует установить <div> (это настраиваемая кнопка), а <input> должен заполнить остальную часть ширины (подумайте о размере окна).

Возможно ли это без использования JS-кода?

Кроме того, это не обязательно, но я хочу поддерживать как можно больше с IE7 +.

КОД:

<div id="parent" style="position:relative; width:100%"> 
    <div id="button">Click</div> 
    <input type="text" id="txt_input" /> 
</div> 

ПОЯСНЕНИЯ:
Я могу использовать JavaScript, конечно. Если нет элегантного решения, то JS это так. Дай мне знать, пожалуйста.

Answer 1

Вы можете сделать это, не требуя дополнительных элементов HTML. Для современных браузеров используйте flexbox. Вот отличный список поддержки браузера для flexbox http://caniuse.com/#feat=flexbox.

#parent { 
 
    display:flex; 
 
} 
 
#button { 
 
    width:100px; 
 
    background:red; 
 
} 
 
#txt_input { 
 
    flex: 2; 
 
}

<div id="parent" style="position:relative; width:100%"> 
 
    <div id="button">Click</div> 
 
    <input type="text" id="txt_input" /> 
 
</div>

И для поддержки старых браузеров, вы можете использовать таблицу макет вместо:

#parent { 
 
    display:table; 
 
} 
 
#button { 
 
    background:red; 
 
    display:table-cell; 
 
    width:100px; 
 
} 
 
#txt_input { 
 
    display:table-cell; 
 
    width:100% 
 
}

<div id="parent" style="position:relative; width:100%"> 
 
    <div id="button">Click</div> 
 
    <input type="text" id="txt_input" /> 
 
</div>

Answer 2

В этом случае поле размера коробки: пригодится. Предположим, что ширина вашей кнопки составляет 150 пикселей.

<div id="parent" style="position:relative; width:100%; padding-left: 150px; box-sizing: border-box;"> 
 
    <div id="button" style="position: absolute; top: 0; left: 0; width: 150px"> 
 
     Click 
 
    </div> 
 
    <div> 
 
     <input type="text" id="txt_input" style="width: 100%" /> 
 
    </div> 
 
</div>