父母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>