4

CSS レイアウトの基本を理解しようとしていますが、境界線を追加するとページが高すぎるという問題があります。

ここに私のコードがあります：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" type="text/css" href="KKF_00005.css">
<title>KKF 5: Border coping</title>
</head>
<body>
    <div class="links_aussen">
        <div class="innen">Rechts</div>
    </div>
    <div class="mitte_aussen">
        <div class="innen">Mitte</div>
    </div>
    <div class="rechts_aussen">
        <div class="innen">Links</div>
    </div>
</body>
</html>

次のスタイルシートを使用します。

@CHARSET "ISO-8859-1";

* {
    height: 100%;
    margin: 0;
    padding: 0;
}

html,body {
    background-color: grey;
    width: 100%;
}

.innen {
    border: 1px solid black;
}

.links_aussen {
    float: left;
    background-color: green;
    width: 33%;
    height: 100%;
}

.mitte_aussen {
    float: left;
    background-color: yellow;
    height: 100%;
    width: 34%;
}

.rechts_aussen {
    float: left;
    background-color: red;
    height: 100%;
    width: 33%;
}

そして、ここにjsFiddleがあります

私の問題は、このコードによって水平方向に 100% のレイアウトが得られるのに、垂直方向に高いスクロールバーが作成されることです。スクロールバーを持たずに境界線も表示したい (オーバーフロー: 非表示; これでは役に立たないと思います) - Chrome と Firefox でテストされています。

では、私の小さなブラウザーに、高さから 2 ピクセルを削除して、境界線を表示し、スクロールバーを表示しないようにするにはどうすればよいでしょうか?

アイデアと回答を前もってありがとうアンドレ

4

4 に答える 4

5

を使用したソリューションを次に示しますbox-sizing: border-box。.innerまた、 divが不要になります。

http://jsfiddle.net/mqchen/xHFvG/

編集: なぜこれが機能するのか疑問に思っている人は、Joakim Johansson の投稿を見下ろしてください。さて、この投稿に戻ります。プロパティはbox-sizing、ブラウザーが要素のサイズを計算する方法を再定義するだけです。詳細はこちら: https://developer.mozilla.org/en-US/docs/CSS/box-sizing

于 2012-09-09T10:18:04.707 に答える
3

これは、デフォルトのボックス モデルが content-box であり、次のように機能するためです。

w3schools から

設定した高さによって「コンテンツ」部分が変わります。したがって、高さを 100% に設定し、境界線を 1% に設定すると、合計は 101% になります。

これは、何をしようとしているかに応じて、さまざまな方法で解決されます。

たとえば、box-sizing 属性を設定できます: http://www.quirksmode.org/css/box.htmlで、高さ属性をさまざまな方法で機能させることができます。

私の人生では、今すぐ良い解決策を見つけることはできませんが（ボックスサイズに依存することは互換性がないため）、絶対位置を使用した悪い解決策があります：http://jsfiddle.net/XhfmR/

于 2012-09-09T10:22:32.293 に答える
1

あなたの問題は国境です：

それ以外の

.innen {
    border: 1px solid black;
}

http://jsfiddle.net/tt13/997zC/

使用する

 .innen {
    border-left: 1px solid black;
    border-right: 1px solid black; 
 }

http://jsfiddle.net/tt13/997zC/1/

ただ書くとborder、divのすべての側面にボーダーが追加されます。あなたの場合、下と上の境界線に余分な 1 ピクセルがかかり、高さが 2 ピクセル高くなります。そのため、スクロールバーが表示されます。

そして、この種の質問には常にjsfiddleを使用してください。

于 2012-09-09T10:17:34.130 に答える
0 
.innen {
    border: 1px solid black;
}

あなたの問題です。垂直スクロールバーを作成します。これを解決するには、次のコードを使用します。

.innen {
    border-left: 1px solid black;
    border-right: 1px solid black;
}

http://jsfiddle.net/yrLtz/

編集：おそらく最良の解決策はbox-sizing: border-box、@mqchenが提案したとおりです。

于 2012-09-09T10:19:22.760 に答える