同じ親の幅を持つ親divの下部に固定要素を配置

Question

親divの下部にテキスト領域を配置する方法とテキスト領域を同じ幅にする方法はありますか？

私が今問題にしているのは、テキストエリアがページの右側に広がっていることです。これは、HTMLとCSSで解決することができますどのようにhttps://jsfiddle.net/hu45v46p/1/

：

Htmlのここ

html, 
 
body { 
 
    height: 90%; 
 
} 
 

 
.container { 
 
    position: relative; 
 
    margin-left: 100px; 
 
    width: 500px; 
 
    height: 100%; 
 
    border: 1px solid red; 
 
} 
 

 
.middle { 
 
    position: absolute; 
 
    top: 20px; 
 
    left: 20px; 
 
    width: 100%; 
 
    height: 100%; 
 
    border: 1px solid blue; 
 
} 
 

 
.bottom { 
 
    position: fixed; 
 
    bottom: 0; 
 
    width: 100%; 
 
}

<div class="container"> 
 
    <div class="middle"> 
 
    <p> 
 
     Textarea should be placed at bottom of the 'blue' div, with the same width 
 
    </p> 
 
    <textarea class="bottom" placeholder="Textarea..."></textarea> 
 
    </div> 
 
</div>

は、私が持っている問題の簡単な例でありますか？

Answer 1

position: fixedの代わりに、position: absoluteとします。

デフォルトでは、境界線のために青色のボックスよりもわずかに大きくなります。あなたはwidth: calc(100% - 6px)でこれに対処することができます

html,body { 
 
    height: 90%; 
 
} 
 
.container { 
 
    position: relative; 
 
    margin-left: 100px; 
 
    width: 500px; 
 
    height: 100%; 
 
    border: 1px solid red; 
 
} 
 
.middle { 
 
    position: absolute; 
 
    top: 20px; 
 
    left: 20px; 
 
    width: 100%; 
 
    height: 100%; 
 
    border: 1px solid blue; 
 
} 
 
.bottom { 
 
    position: absolute; 
 
    bottom: 0; 
 
    width: calc(100% - 6px); 
 
}

<div class="container"> 
 
    <div class="middle"> 
 
    <p> 
 
     Textarea should be placed at bottom of the 'blue' div, with the same width 
 
    </p> 
 
    <textarea class="bottom" placeholder="Textarea..."></textarea> 
 
    </div> 
 
</div>

は、この情報がお役に立てば幸い！ :)

Answer 2

以下のコードを確認してください。

html,body { 
 
    height: 90%; 
 
} 
 
.container { 
 
    position: relative; 
 
    margin-left: 100px; 
 
    width: 500px; 
 
    height: 100%; 
 
    border: 1px solid red; 
 
} 
 
.blue { 
 
    position: absolute; 
 
    top: 20px; 
 
    left: 20px; 
 
    width: 100%; 
 
    height: 100%; 
 
    border: 1px solid blue; 
 
} 
 
.bottom { 
 
    position: absolute; 
 
    bottom: 0; 
 
    left: 0; 
 
    width: 100%; 
 
}

<div class="container"> 
 
    <div class="middle"> 
 
    <div class="blue"> 
 
    <p>Textarea should be placed at bottom of the 'blue' div, with the same width</p> 
 
     <textarea class="bottom" placeholder="Textarea..."></textarea> 
 
    </div> 
 
    
 
    </div> 
 
</div>

Answer 3

はabsoluteへ.bottom div要素のpositionプロパティを変更し、いくつかの基本的なCSSブラウザを追加.middle divの内側にうまくtextareaに合った* {margin:0;padding:0;box-sizing:border-box}をリセットします。

* {margin:0;padding:0;box-sizing:border-box} 
 

 
html,body { 
 
    height: 90%; 
 
} 
 

 
.container { 
 
    position: relative; 
 
    margin-left: 100px; 
 
    width: 500px; 
 
    height: 100%; 
 
    border: 1px solid red; 
 
} 
 

 
.middle { 
 
    position: absolute; 
 
    top: 20px; 
 
    left: 20px; 
 
    width: 100%; 
 
    height: 100%; 
 
    border: 1px solid blue; 
 
} 
 

 
.bottom { 
 
    position: absolute; 
 
    bottom: 0; 
 
    width: 100%; 
 
}

<div class="container"> 
 
    <div class="middle"> 
 
    <p> 
 
     Textarea should be placed at bottom of the 'blue' div, with the same width 
 
    </p> 
 
    <textarea class="bottom" placeholder="Textarea..."></textarea> 
 
    </div> 
 
</div>

Answer 4

position: fixed;は、ビューポートに関連しているため、テキストエリアの結果が表示されています。

html,body { 
 
    height: 90%; 
 
} 
 
.container { 
 
    position: relative; 
 
    margin-left: 100px; 
 
    width: 500px; 
 
    height: 100%; 
 
    border: 1px solid red; 
 
} 
 
.middle { 
 
    position: absolute; 
 
    top: 20px; 
 
    left: 20px; 
 
    width: 100%; 
 
    height: 100%; 
 
    border: 1px solid blue; 
 
} 
 
.bottom { 
 
    /*fixed to absolute*/ 
 
    position: absolute; 
 
    bottom: 0; 
 
    width: 100%; 
 
}

<div class="container"> 
 
    <div class="middle"> 
 
    <p> 
 
     Textarea should be placed at bottom of the 'blue' div, with the same width 
 
    </p> 
 
    <textarea class="bottom" placeholder="Textarea..."></textarea> 
 
    </div> 
 
</div>