絕對定位的文本區域不尊重右側和底部屬性

我試圖絕對放置一個文本區域，該區域將伸展以覆蓋它的父項。不幸的是Chrome似乎忽略了對屬性和Firefox忽略了對和底部屬性。絕對定位的文本區域不尊重右側和底部屬性

這裏是我使用的CSS：

#container { 
 
    position: relative; 
 
} 
 
#my-text-area { 
 
    position: absolute; 
 
    top: 0px; 
 
    bottom: 0px; 
 
    left: 10px; 
 
    right: 10px; 
 
}

這裏是一個的jsfiddle例如：enter link description here

有，我要禁用或textarea的默認屬性這些只是缺陷嗎？有解決方法通過從父項繼承這些屬性來實現父項的完整寬度和高度，但我正在尋找一種方法來爲將來定製右下角和底部的場景創建絕對定位。

來源

2016-01-09 coanda mihai

只需使用頂部和左側，然後設置高度和寬度100％？ –

將textarea包裹在一個元素中，並在該元素上使用相同的CSS。 演示：https://jsfiddle.net/lotusgodkk/csub6b96/2/

HTML：

<div id="container"> 
    <div id="my-text-area"> 

     <textarea></textarea> 
    </div> 

</div>

CSS：

body, 
html, 
#container { 
    width: 100%; 
    height: 100%; 
} 

body { 
    margin: 0px; 
} 

#container { 
    position: relative; 
} 

#my-text-area { 
    position: absolute; 
    top: 0px; 
    bottom: 0px; 
    left: 0px; 
    right: 0px; 
} 

textarea { 
    height: 100%; 
    width: 100%; 
}

參考：http://snook.ca/archives/html_and_css/absolute-position-textarea

來源

2016-01-09 13:50:24

這是一個很好的解決方法....我仍然很好奇，如果有一種方法可以在textarea上啓用正確的行爲。 –

@coandamihai我想現在還沒有辦法。我分享的鏈接描述了這種行爲 –

實現有活力的高度d寬度，您可以在width, height屬性中使用inherit關鍵字。

這裏是工作fiddle玩。

body, 
 
html, 
 
#container { 
 
    width: 100px; 
 
    height: 100px; 
 
} 
 

 
body { 
 
    margin: 0px; 
 
} 
 

 
#container { 
 
    position: relative; 
 
} 
 

 
#my-text-area { 
 
    position: absolute; 
 
    top: 0px; 
 
    bottom: 0px; 
 
    left: 0px; 
 
    right: 0px; 
 
    width: inherit; 
 
    height: inherit; 
 
}

<div id="container"> 
 
    <textarea id="my-text-area"></textarea> 
 
</div>

來源

2016-01-09 13:52:31

這工作很好.... –

這項工作...但如果我想在將來修改右邊或底部的屬性留下空間另一個元素，我將無法。 –

我不明白你的觀點，你想在哪裏添加另一個元素？ –

絕對定位的文本區域不尊重右側和底部屬性

回答

相關問題