像素邊框和百分比寬度

我想我可能已經知道這個問題的答案，但我需要一個理智檢查！像素邊框和百分比寬度

說我有

#gridtest{ 
width:590px; 
}

我可以通過使用RESULT = TARGET/CONTEXT寬度改變的百分比。在這種情況下，上下文是一個最大寬度設置爲1000像素，所以我能做到這一點的容器：

#gridtestpercent{ 
width:59%; /*590/1000*/ 
}

如果我要縮小窗口下的股利將始終在按比例其容器。但是，如果我想要做

#gridtest{ 
width:570px; 
border:10px solid red; 
}

我可以工作寬度出立足現在的目標是570，但作爲窗口被縮小比例全力以赴同步。

#gridtestpercentnoborder{ 
width:57%; /*570/1000*/ 
border:10px solid red; 
}

我無法使用百分比邊框。我不想使用JS繼續檢查上下文，並且我還不能使用CSS3框邊界聲明。

如果我想使用Ethan Marcotte在響應式網頁設計中描述的技術，那麼所有東西都會相互縮小，如果使用邊框，我會不幸運？

乾杯！

來源

2011-11-16 user1010892

不幸的是，你運氣不好。解決這個問題的一個方法就是用一個包裝div來創建你的邊框。所以外部div將是57％（在你的例子中）背景是你想要的邊框的顏色。然後，內部div將有96％左右的寬度（玩確切的數字來找到適合您的設計的邊框）。

來源

2011-11-16 14:21:11

感謝這個 - 我真的很想避免這樣做，但至少有一個解決方案，如果我遇到它。另一個稍微有些黑客的方式是爲邊界提供多個背景圖片，但目前這並不是十分跨瀏覽器。 – user1010892

是的，多個背景在舊瀏覽器中不起作用;然而，它不會像使用邊框那樣破壞任何東西。所以也許這是一個優雅而有辱人格的選擇。 –

是的，這是一個好點 – user1010892

如果你想保持語義，你可以使用div { box-sizing:border-box; }或一些絕對定位的:after元素。看到帖子How do I add 1px border to a div whose width is a percentage?

來源

2012-02-15 05:43:25 RobW

你可以使用，而不是一個邊界插圖的box-shadow：

box-shadow: 0px 0px 0px 10px red inset;

只是墊在容器內進行補償。

編輯：我寫「墊」，但當然，如果你使用填充，它會拋出箱的尺寸。改爲保留內部的內容。

來源

2012-11-23 15:52:41

箱陰影有一個性能開銷，應該謹慎使用 - 特別是在低端和移動設備 – Ruskin

這個鏈接給出了兩個方案來解決這個問題很好解釋：

http://designshack.net/articles/css/beating-borders-the-bane-of-responsive-layout/

來源

2012-11-27 08:31:23 Vijey

你可以使用CSS3 計算（）功能，

.selector{ 
    border: 5px solid black; 
    width: -moz-calc(50% - 10px); 
    width: -webkit-calc(50% - 10px); 
    width: calc(50% - 10px); 
}

SASS混入

@mixin calc($property, $expression) { 
    #{$property}: -moz-calc(#{$expression}); 
    #{$property}: -webkit-calc(#{$expression}); 
    #{$property}: calc(#{$expression}); 
} 
article { 
    border: 1px solid red; 
    @include calc(width, '100% - 2px') 
}

來源

2013-04-10 19:39:32

這真棒！感謝提示好友！ – mXX

如果可能的，取決於你的設計，我喜歡做的是把邊框作爲一個寬度爲3px（例如）和高於其父div的高度的絕對div。然後我設置隱藏在父div上的溢出。

來源

2013-09-15 19:48:55

接受的答案不正確。實際上，你有兩個選擇：

使用box-sizing性質，所以所有的填充和邊界被認爲是大小的一部分：

.column { 
    width: 16%; 
    float: left; 
    margin: 0 2% 0 2%; 
    background: #03a8d2; 
    border: 2px solid black; 
    padding: 15px; 
    font-size: 13px; 

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

或者，使用outline屬性，而不是border屬性。您將仍然有填充問題，但更容易添加。例如：

.column { 
    width: 16%; 
    float: left; 
    margin: 0 2% 0 2%; 
    background: #03a8d2; 

    outline: 2px solid black; 
}

充分說明：http://designshack.net/articles/css/beating-borders-the-bane-of-responsive-layout/

來源

2014-04-23 17:18:30

這適用於我正在做的工作 - 在移動視口上處理基於百分比的容器以實現響應式設計。雖然我通常不使用盒子大小，因爲它不是最受支持的屬性 - 對於我需要的平臺上的流體容器來說，它工作得很好。完善！ –

CSS3中，您還可以使用新的box-sizing屬性包括像素填充算成元素的width：

box-sizing: border-box;

來源

2014-07-10 16:43:18 Shoe

像素邊框和百分比寬度

回答

相關問題