4

私はこのHTMLフォームを持っています: 

<form method="post" action="#" class="cf">
    <div class="left">
        <label for="first-name">First Name</label>
        <input type="text" name="first-name" placeholder="First Name" id="first-name" required />
        <label for="last-name">Middle Name</label>
        <input type="text" name="middle-name" placeholder="Middle Name" id="middle-name" />
        <label for="last-name">Last Name</label>
        <input type="text" name="last-name" placeholder="Last Name" id="last-name" required />
    </div>
    <div class="right">
        <label for="details">Details</label>
        <textarea name="details" placeholder="Details" id="details" required></textarea>
    </div>
    <input type="submit" name="submit" value="Submit Form" />
</form>

そして、これは私のCSSです: 

/* Clearfix */
.cf:before,.cf:after { content: " "; display: table; }
.cf:after { clear: both; }

form > * {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.left {
    background: rgba(255, 0, 0, .2);
}

.right {
    background: rgba(0, 255, 0, .2);
}

form {
    background: #ccc;
}

input[type="text"],
textarea {
    width: 100%;
    border: none;
}

input[type="text"] {
    margin-bottom: 10px;
}

label {
    display: inline-block;
    margin-bottom: 5px;
}

@media only screen and (min-width: 600px) {
    form {
        background: rgba(0, 0, 255, .3);
    }

    .left {
        float: left;
        width: 50%;
    }

    .right {
        float: right;
        width: 50%;
    }

    input[type="submit"] {
        clear: both;
    }
}

フィドル
http://jsfiddle.net/gRRmh/

基本的には、3 つのテキスト入力フィールド、1 つのテキストエリア、1 つの送信ボタン (入力タイプの送信) です。ブレークポイントに到達すると、フォームは 2 列のレイアウトになります。それが機能している部分です。

機能していない部分は、テキストエリアの高さです。左側の 3 つの入力フィールドと同じ高さにしたいです。
に設定するとheight: 100%;、次の 2 つの理由で機能しません。

  • ラベルの高さを考慮する必要があります。確かに、パーセンテージで高さを指定し、その値をテキストエリアの高さから差し引くことができます (10% / 90%) ...
  • ...しかし、これを機能させるには、1 つの親要素の高さを固定する必要があるため、フォームの高さを 200px にする必要があります。それに関する問題は、実際には左の列の高さを手動で一致させる必要があることです。これは実際には良い解決策ではありません。

したがって、私が実際に探しているのは、次のようなものです。手動でピクセルを微調整 する必要ここに画像の説明を入力 はありません:

この問題を解決するには？

4

3 に答える 3

3

テキストエリアに手動で高さを与えることによってのみ可能です。したがって、メディアクエリでテキストエリアに高さを与えます。

于 2013-01-25T14:44:31.413 に答える
0

「box-sizing: border-box;」を設定します。そしてそれは動作します

于 2015-12-29T17:36:09.743 に答える
0

これを試して。CSSテーブルを使用していますが、テキストエリアを100％の高さに設定してから、ラベルの高さを引くことで、探している結果が得られると思います。しかし、何らかの理由で、他のブラウザーがサポートしていると思われるにもかかわらず、高さは Chrome でのみ正しく計算されます。 http://jsfiddle.net/73cyorL1/

CSS:

.table {
    display: table;
    width: 100%;
}
.row {
    display:table-row;
    width: 100%;
}
.left {
    background: red;
}
.right {
    background: blue;
}
label {
    display: block;
    padding: 10px;
    font-family: arial;
    font-style: italic;
    font-size: 0.75em;
    line-height: 1em;
}
form {
    background: grey;
}
input[type="text"], textarea {
    width: 100%;
    border: none;
    background: #ccc;
    font-family: arial;
    padding: 10px;
    box-sizing: border-box;
    display: block;
}
input[type="text"]:focus, textarea:focus {
    outline: 0;
    background: #ddd;
}
input[type="submit"] {
    display: block;
    margin: 10px;
    padding: 10px;
    cursor: pointer;
}
@media only screen and (min-width: 600px) {
    .left {
        width: 50%;
        height: 100%;
        display: table-cell
    }
    .right {
        width: 50%;
        height: 100%;
        display: table-cell;
        overflow: hidden;
    }
    textarea {
        height: calc(100% - 0.75em);
        /* 100% fill height, minus height of details label */
    }
}

HTML:

<form method="post" action="#" class="table">
    <div class="row">
        <div class="left">
            <label for="first-name">First Name</label>
            <input type="text" name="first-name" placeholder="First Name" id="first-name" required="required" />
            <label for="last-name">Middle Name</label>
            <input type="text" name="middle-name" placeholder="Middle Name" id="middle-name" />
            <label for="last-name">Last Name</label>
            <input type="text" name="last-name" placeholder="Last Name" id="last-name" required="required" class="last" />
        </div>
        <div class="right">
            <label for="details">Details</label>
            <textarea name="details" placeholder="Details" id="details" required></textarea>
        </div>
    </div>
    <input type="submit" name="submit" value="Submit Form" />
</form>
于 2014-09-07T01:32:28.953 に答える