2014-04-01 75 views
1

我不確定這裏要做什麼。使輸入框的寬度和高度相對於外部div的寬度和高度達到100%

我想限制我的div的寬度爲200px,並使輸入框在div內的寬度和高度均爲100%。現在看來,它似乎溢出了div框的寬度。繼承人的問題的快速PIC(IE10):

enter image description here

這裏的標記:

<!DOCTYPE html> 

<html> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 

</head> 

<body> 

<div style="border:1px solid red; height: 20px; width: 200px;"> 

<input style="background: yellow; height: 100%; width: 100%; border: 0;" type="text"> 

</div> 

</body> 

</html> 
+2

'箱上漿:邊框問題? –

+0

'input {padding:1px}'在我的瀏覽器中默認設置。將'padding:0'添加到''將解決此問題。正如@Paulie_D所說,額外的填充會導致寬度增長,因爲默認的['box-sizing'](http://quirksmode.org/css/user-interface/boxsizing.html)模式。 – andyb

回答

0

您可以在<div>添加overflow:hidden;看到這個FIDDLE