3

IE で以下のコードに若干の問題があります。

デザインは Chrome と Firefox で完璧ですが、IE ではテキストエリアのサイズが非常に小さく表示されます。Firefox や Chrome で見られるようにしたい。


Consistently sizing a <textarea> under IE, FF, Safari/Chrome
OR
Firefox / IE textarea sizing quirk - workaroundsの複製である可能性があります。
しかし、言及されている適切な解決策はありません。だから私はこれを始めました。

jQuery で解決できると確信していますが、自分のページには CSS だけが必要です。それに対する適切なCSSソリューションはありますか??

私はjsFiddleにログインできないので、jsFiddleの人はいません.. :(

<!DOCROOT html>

<html>

<head>

    <meta charset="utf-8" />

    <title>Code Compressor</title>

    <link href="styles.css" rel="stylesheet" type="text/css" />

    <style type="text/css">

        .container {
            width: 100%;
            overflow: hidden;
        }

        .column {
            width: 48%;
            margin: 1%;
            float: left;
        }

        textarea {
            min-width: 100%;
            max-width: 100%;

            min-height: 80%;
            max-height: 80%;

            overflow: auto;
        }

        .center {
            clear: both;
            text-align: center;
        }

    </style>

</head>


<body>

    <div class="container">

        <div class="column">
            <div>Input Source:</div>
            <textarea id="sourceCode" name="sourceCode" ></textarea>
        </div>

        <div class="column">
            <div>Compressed Output:</div>
            <textarea id="outputCode" name="outputCode" ></textarea>
        </div>

        <div class="center">
            <input type="button" id="compressButton" name="compressButton" 
                value="Compress" onClick="compress" />
        </div>

    </div>

</body>

</html>
4

3 に答える 3

2

高さが期待どおりに動作しない場合は、 の高さを設定してみてください.column。あなたtextareaは円柱の中にいて、その高さは父親のパーセンテージですが、あなたの父親はどのくらいの高さですか?

更新しました

.center高さを に設定すると、レイヤーが列に重なると言いましたtextareaよね？次に、列を相互に相対的に設定する必要があり、列の.center後に配置する必要があることを HTML に説明する必要があります。これを行うには、次のコードに従います。

.column {
    width: 48%;
    height: 500px; /* for example */
    position: relative; /* add this to trasnform your columns 
                           relative to each other */
    margin: 1%;
    float: left;
}

textarea {
    min-width: 100%;
    max-width: 100%;

    width: 90%;
    height: 90%;

    min-height: 80%;
    max-height: 80%;

    overflow: auto;
}

.center {
    width: 100%; /* to specify that your "center" must 
                    to occupy 100% of the width on the screen. */
    position: relative; /* to transform the position to relative */
    float: left; /* to accompany the columns' floating */
    clear: both;
    text-align: center;
}

理解度の割合

見栄えを良くするために、パーセンテージを扱うには、最初のポイントが必要です。これは、何かが他のものの高さの 80% を持つためには、他のものの高さを知る必要があることを意味します。

つまり、.something身長の 80% を持つには、父親の身長を知る必要があり、父親の身長が 90% の場合、父親の父親は特定の身長でなければなりません。ある時点で、高さを定義する必要があります。

JavaScript の代替

私が言ったように、私はパーセンテージ測定を使いすぎて、純粋な CSS 2.1 で解決策を見つけることができませんでした。そこで、このミニプラグインを JavaScript + jQuery で作成しました。回避策はありません:

function calculateResponsiveHeight(couple) {
    for (var value in couple) {
        $(value)
            .css("height", 
                 $(couple[value].wrapper).height() - 
                   couple[value].spacing + "px");
    }
}

使用法：

calculateResponsiveHeight({
    ".content": {
        spacing: 135, // how much you want to spacing your layer?
        wrapper: window // who is the reference point?
    }
});
于 2013-07-03T12:39:29.663 に答える
1

これを試して

#outputCode{
width:100%;
height:100%;
}
于 2013-07-03T12:47:20.990 に答える
0

高さを宣言していません。「高さ: 80%」を追加してください。最大値と最小値を指定しただけです。その中間にあるべき値が本質的にわかりません。

于 2013-07-03T12:43:05.643 に答える