3
具体的に言えば、私は、DIV上で100％と言うが、10ピクセルのパディングと1ピクセルの境界線の合計幅を必要とする状況を指している。 （そして、その幅に自動的に設定するブラウザには依存しないでください。例えば、左に浮かべています）CSSの1つの要素でパーセンテージベースとピクセルベースの両方のサイズをどのように扱いますか？
JavaScriptを使用せずにこれを行う簡単な方法はありますか？
A
答えて
2
いいえ、現在主要なブラウザで動作する1つの要素にこれを設定する方法はありません。
2つのネストされたdivを使用できます。外側の100%の幅をdivに設定し、内側の詰め物と境界線をdivに設定します。
0
これはCSS 3でのみ可能です。
+4
私はあなたが「CSS3で*これだけ*可能です」ということを推測しています：http://www.w3.org/TR/css3-values/#calc – mercator
0
次の解決策はどうですか？
<?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要素と話している何を達成していません。
2
box-sizing: border-boxを使用する場合は、width: 100%; border: 1px solid black; padding: 10px;と設定できます。幅、罫線、余白、および詰め物の合計が幅に指定されたものになります。 Source
EDIT：真のブラウザサポートは少し制限されています。 FF 3.5とSafari 4はそれをサポートしていますが、IE8やChromeについてはわかりません。
+0
CSS3でのみ動作します。 –
+0
ChromeとSafariはどちらもWebkitです。つまり、一般的に言えば（CSS）は同義語です。 –
ええ、私はそれがただ一つでは不可能だと考えましたが、私は確信していました。入れ子になったDIVに固執します。ありがとう！ –