100％寬度HTML元素問題

當分配一些HTML元素（如表單輸入）100％寬度時，您不能再應用任何可能影響寬度的其他樣式。例如border或padding會導致元素超過100％。這會導致可能在其父元素之外的尷尬元素。100％寬度HTML元素問題

由於CSS不支持width: 100% - 2px;我知道的唯一方法是使用絕對像素寬度（width: 98px）或將元素關閉爲100％，這不是真正的選項。

<div style="overflow:hidden;"> 
<input style="width:100%; border: 1px solid #000;" /> 
</div>

他們有什麼其他的方法呢？

來源

2011-01-11 Xeoncross

隨着adding another div，該解決方案將很快使用CSS 3的box-sizing attribute添加到CSS規則。這個新的CSS 3價值已經在IE 8和所有其他瀏覽器 - 所以如果你不介意跳過IE 6 & 7你現在就可以使用它！

textarea { 
     -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ 
     -moz-box-sizing: border-box; /* Firefox, other Gecko */ 
     box-sizing: border-box;   /* Opera/IE 8+ */ 
}

來源

2011-01-11 03:45:58 Xeoncross

你可以製作一個沒有鑲邊（邊框，填充）的100％的容器，然後在其中放置一個塊元素，使用任何你想要的鑲邊 - 塊元素默認會填滿總寬度。

<style> 
.container {width:100%;border:0:margin:0;} 
.thingy {border:1px solid black;margin:2px;background:#ddd;} 
</style> 

<div class="container"> 
    <div class="thingy"> 
    Both worlds? 
    </div> 
</div>

來源

2011-01-11 02:50:36 Rudu

似乎對div元素這隻作品。但是，http://stackoverflow.com/questions/271067/how-can-i-make-a-textarea-100-width-without-overflowing-when-padding-is-present/272632#272632顯示了一種添加圍繞元素的另一個div並將樣式應用於該元素。 – Xeoncross 2011-01-11 03:01:39

那麼，內部元素必須是塊級元素（而不是`inline`或`inline-block`）。 – Rudu 2011-01-11 03:05:45

這是一個老問題，但它是值得一提的是，由於CSS3，你可以使用calc：

width: calc(100% - 2px);

來源

2017-04-25 20:51:59 Keith

100％寬度HTML元素問題

回答

相關問題