將CSS寬度設置爲100％+右邊框缺失？

我將div的寬度設置爲窗口的100％。當我將邊框應用於此div時，右邊框被切斷。我必須執行一個盒子模型黑客嗎？將CSS寬度設置爲100％+右邊框缺失？

#textBoxContainer { 
 
    width:100%; 
 
    height:30%; 
 
    position:fixed; 
 
    z-index:99; 
 
    bottom:0px; 
 
    left:0px; 
 
    background-color:#999; 
 
    border: 4px solid #000; 
 
}

<div id="textBoxContainer"></div>

來源

2011-02-26 worked

你的情況，最簡單的解決方法是這樣的：

#textBoxContainer { 
 
    height: 30%; 
 
    position: fixed; 
 
    z-index: 99; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    background-color: #999; 
 
    border: 4px solid #000; 
 
}

<div id="textBoxContainer"></div>

Live Demo

刪除width: 100%。
要使div填滿屏幕，請改爲添加right: 0。

這是完全可行的給既有left和right（或top和bottom），就像我們在這裏所做的元素。

來源

2011-02-26 16:38:01 thirtydot

已經得到解答，但我更喜歡這個解決方案。將此添加到textBoxContainer：

-webkit-box-sizing: border-box; 
-moz-box-sizing: border-box; 
-ms-box-sizing: border-box; 
box-sizing: border-box;

它會將邊框放在框的內側。更多信息：http://css-tricks.com/box-sizing/

編輯 - 不適用於IE7，但沒有太大的作用。下面是更多的是：box-sizing support in IE7

來源

2012-07-09 07:06:48

爲我完美工作。接受的答案不適用於我，因爲我遇到同樣的問題，但使用寬度：33.33％。 – 2012-08-21 06:14:16

有點關係Firefox的錯誤
100％選擇下拉往往會丟失其右邊框（依賴於窗口的寬度）
https://bugzilla.mozilla.org/show_bug.cgi?id=924068
沒有其他的，而不是試圖寬度解決方法：99％

來源

2013-12-27 21:11:20

我試過寬度：99％來解決FF下拉錯誤，但它沒有幫助:( – Atara 2015-09-08 09:45:21

http://stackoverflow.com/questions/32181842/missing-border-right-in-select-on-firefox – Atara 2015-09-08 09:50:01

將CSS寬度設置爲100％+右邊框缺失？

回答

相關問題