父母div的底部有相同父寬度的位置固定元素

Question

我如何在父div的底部放置一個textarea並使textarea的寬度相同？

我現在面臨的問題是textarea一直擴展到頁面的右側。

的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>

這裏是我有問題的一個簡單的例子：https://jsfiddle.net/hu45v46p/1/

怎麼可以這樣用HTML和CSS來解決？

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

改變了.bottom div的position屬性absolute並增加了一些基本的CSS瀏覽器復位* {margin:0;padding:0;box-sizing:border-box}符合該textarea很好的.middle DIV中：

* {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;是相對於你的視口這就是爲什麼你會得到這些textarea的結果。

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>