1

1年間私を悩ませてきた質問があります。根本的な問題は、要素のサイズをその親に対して相対的に設定して、すべてのエッジから N ピクセルだけ挿入されるようにするにはどうすればよいかということです。幅を設定するのはいいことですが、親の幅がわからず、ウィンドウに合わせて要素のサイズを変更したい場合。(特定のピクセル数が必要なため、パーセントは使用しません。)

編集 また、コンテンツ (またはコンテンツの欠如) が両方の要素を引き伸ばしたり縮小したりしないようにする必要があります。私が得た最初の答えは、親にパディングを使用することでした。これはうまく機能します。親の幅を正確に 25% にし、ブラウザーのクライアント領域とまったく同じ高さにし、子がそれを押してスクロール バーを取得できないようにします。/編集

{top:Npx;left:Npx;bottom:Npx;right:Npx;} を使用してこの問題を解決しようとしましたが、特定のブラウザーでのみ機能します。

ページのサイズが変更されるたびにすべての要素を修正するために、jquery を使用して JavaScript を記述できる可能性がありますが、その解決策には満足していません。(上部を 10px ずらして、下部を 5px だけオフセットしたい場合はどうすればよいでしょうか? 複雑になります。)

私が知りたいのは、これをクロスブラウザーの方法で解決する方法、または簡単な CSS ソリューションを可能にするブラウザーのリストです。誰かがこれを簡単にするトリックを持っているかもしれません。

4

5 に答える 5

1

CSSボックスモデルはあなたに洞察を提供するかもしれませんが、私の推測では、CSSだけではピクセルパーフェクトなレイアウトを実現することはできないでしょう。

私が正しく理解していれば、親の幅を25％にし、ブラウザの表示領域の高さを正確に設定する必要があります。次に、子の幅を25％〜2nピクセル、高さを100％〜2nピクセルにし、子をnピクセルで囲みます。現在のCSS仕様には、これらのタイプの計算のサポートは含まれていません（ただし、IE5、IE6、およびIE7はCSS式の非標準サポートを備えており、IE8はIE8標準モードでのCSS式のサポートを廃止しています）。

親をブラウザ領域の100％、幅25％に強制することはできますが、これでは子供の高さをピクセル単位で完全に伸ばすことはできません...

<style type="text/css">
html { height: 100%; }
body { font: normal 11px verdana; height: 100%; }
#one { background-color:gray; float:left; height:100%; padding:5px; width:25%; }
#two { height: 100%; background-color:pink;}
</style>
</head>
<body>
<div id="one">
<div id="two">
<p>content ... content ... content</p>
</div>
</div>

...ただし、水平スクロールバーが表示されます。また、コンテンツが圧縮されている場合、親の背景は100％を超えて拡張されません。これはおそらく、質問自体で提示したパディングの例です。

画像や追加のdivを介して探しているような錯覚を実現できますが、CSSだけで、その高さの要件を満たしたピクセルの完全性を実現できるとは思いません。

于 2008-09-25T23:17:38.687 に答える
1

水平方向のスペースのみに関心がある場合は、親要素のパディングを指定することで、親ブロック要素内のすべての子ブロック要素を一定量「挿入」することができます。要素のマージンを指定することで、親ブロック要素内に単一の子ブロック要素を「挿入」することができます。後者のアプローチを使用する場合は、親要素に境界線またはわずかなパディングを設定して、マージンの崩壊を防ぐ必要がある場合があります。

垂直方向の間隔も気にする場合は、配置を使用する必要があります。親要素を配置する必要があります。どこにも移動したくない場合は、またはposition: relative設定を気にしないで使用してください。それはそのまま残ります。次に、子要素で絶対配置を使用し、 、、およびを親要素の端に対して相対的に設定します。toplefttoprightbottomleft

例えば：

#outer {
    width: 10em;
    height: 10em;
    background: red;
    position: relative;
}

#inner {
    background: white;
    position: absolute;
    top: 1em;
    left: 1em;
    right: 1em;
    bottom: 1em;
}

コンテンツが要素の幅を広げないようにしたい場合は、overflowプロパティを使用する必要がありますoverflow: auto。

于 2008-09-24T16:50:26.083 に答える
0

親要素にパディングを適用し、子要素には幅を適用しないだけです。それらが両方であると仮定するとdisplay:block、それはうまくいくはずです。

于 2008-09-24T16:38:19.937 に答える
0

または逆marginに、子要素の を設定します。

Floatutorialは、このようなものに最適なリソースです。

于 2008-09-24T16:45:31.697 に答える
0

これを試して：

.parent {padding:Npx; display:block;}
.child {width:100%; display:block;}

すべての側面に Npx のスペースがあり、親要素を埋めるために伸びている必要があります。

編集:もちろん、親では、使用することもできます

{padding-top:Mpx; padding-bottom:Npx; padding-right:Xpx; padding-left:Ypx;}
于 2008-09-24T16:48:07.853 に答える