CSSの1つの要素でパーセンテージベースとピクセルベースの両方のサイズをどのように扱いますか？

具体的に言えば、私は、DIV上で100％と言うが、10ピクセルのパディングと1ピクセルの境界線の合計幅を必要とする状況を指している。（そして、その幅に自動的に設定するブラウザには依存しないでください。例えば、左に浮かべています）CSSの1つの要素でパーセンテージベースとピクセルベースの両方のサイズをどのように扱いますか？

JavaScriptを使用せずにこれを行う簡単な方法はありますか？

出典

2009-06-20 James Skidmore

いいえ、現在主要なブラウザで動作する1つの要素にこれを設定する方法はありません。

2つのネストされたdivを使用できます。外側の100%の幅をdivに設定し、内側の詰め物と境界線をdivに設定します。

出典

2009-06-20 22:10:38 molf

ええ、私はそれがただ一つでは不可能だと考えましたが、私は確信していました。入れ子になったDIVに固執します。ありがとう！ –

これはCSS 3でのみ可能です。

出典

2009-06-20 22:12:05

私はあなたが「CSS3で*これだけ*可能です」ということを推測しています：http://www.w3.org/TR/css3-values/#calc – mercator

次の解決策はどうですか？

<?xml version='1.0' encoding='UTF-8'?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">  
    <head>  
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
     <title>Content with Menu</title>   
    <style type="text/css"> 
     .content .outer{ 
     width:100%; 
     border:1px solid black; 
     background-color:green; 
     } 
     .content .inner{ 
     margin-left:10px; 
     margin-right:10px; 
     background-color:red; 
     } 
    </style>   
    </head> 
    <body>  
    <div class="content"> 
     <div class="outer"> 
     <div class="inner"> 
      <p>Hi!</p> 
     </div> 
     </div> 
    </div> 
    </body> 
</html>

更新 OK、あなただけの1要素と話している何を達成していません。

出典

2009-06-20 22:12:07 merkuro

box-sizing: border-boxを使用する場合は、width: 100%; border: 1px solid black; padding: 10px;と設定できます。幅、罫線、余白、および詰め物の合計が幅に指定されたものになります。 Source

EDIT：真のブラウザサポートは少し制限されています。 FF 3.5とSafari 4はそれをサポートしていますが、IE8やChromeについてはわかりません。

出典

2009-06-20 22:36:46 Kerrick

CSS3でのみ動作します。 –

ChromeとSafariはどちらもWebkitです。つまり、一般的に言えば（CSS）は同義語です。 –

CSSの1つの要素でパーセンテージベースとピクセルベースの両方のサイズをどのように扱いますか？

答えて

関連する問題