動態設置Button的高度爲Textarea的高度

這是一件小事，但我無法找到任何關於如何去做的事情！動態設置Button的高度爲Textarea的高度

在下面的圖片中，有一個textarea與風格的（和禁用）純粹是爲了美觀的目的button：

但是，當你調整textarea，出現這種情況：

這看起來不太好。

我想將textarea的高度與button的高度聯繫起來，以便它們保持在任何高度，但是我找不到這樣的東西。

你如何將元素造型與另一個元素相聯繫？

注意 - 對PHP比jQuery/javascript更有信心，但顯然不會拒絕這些語言的答案。

來源

2016-04-26 MLMLTL

把兩個都放在一個外部容器左浮動（爲textarea），並給予高度等於兩個.container高度將自動。我不是設計師，但我會這樣做 –

您是否使用引導程序？ –

或者使用以下禁用textarea的resise：

textarea { 
    resize: none; 
}

或作出必要的變更使用這個小提琴（我沒有創建它）。

http://jsfiddle.net/gbouthenot/D2bZd/

來源

2016-04-26 15:15:40

這個作品，謝謝 - 是的 – MLMLTL

jsfiddle太棒了。樂於幫助。 –

對於用CSS輕鬆實現的東西，這是很多不必要的JS。此外，由JS調整大小的元素有很多閃爍。 – Shaggy

最簡單的方法是將包裝其他元素中的文本區域和家長的display屬性設置爲flex，像這樣：

div{ 
 
    display:flex; 
 
} 
 
textarea{ 
 
    resize:vertical; 
 
}

<div> 
 
<textarea></textarea> 
 
<button>text</button> 
 
</div>

根據您的要求和其他樣式，您可能需要調整其他一些flexbox屬性。有關瀏覽器支持和前綴的詳細信息，請參閱caniuse.com。

來源

2016-04-26 15:20:50 Shaggy

Flexbox，就可以做到這一點

div { 
 
    display: inline-flex; 
 
    margin: 1em; 
 
} 
 
textarea, 
 
botton { 
 
    flex: 1; 
 
}

<div> 
 
    <textarea id="output">My size will be matched by the button</textarea> 
 
    <button>Click</button> 
 
</div>

來源

2016-04-26 15:22:52

這裏，沒有JavaScript或PHP代碼需要一種方法使用HTML和CSS來做到這一點：

<div class="container"> 
<textarea rows="4" cols="50"></textarea> 
<button type="button">Click Me!</button> 
</div> 

.container{ 
    overflow: auto; 
    position: relative; 
} 

textarea, button{ 
    float: left; 
} 

button{ 
    position:absolute; 
    height:100%; 
    width:150px; 
}

這裏是一個JsFiddle：https://jsfiddle.net/83uuk6gx/1/

編輯：

你可以刪除最小高度，它將工作沒有它（我從上面的代碼中刪除它，並更新jsfiddle）。我也不會使用flex，因爲它會對早期版本的瀏覽器施加限制。 IE9不支持它我相信，這裏是更多的細節：http://www.w3schools.com/cssref/css3_pr_flex.asp

來源

2016-04-26 15:24:44 Bojan

看到這是我的，但它打破了我無法修復的方式。很好的答案，在大多數情況下是正確的，所以我會鼓勵它，但被勾號的答案將保持打勾，因爲它對我來說是特定的 - 只是爲其他人留下一個便條。 – MLMLTL

動態設置Button的高度爲Textarea的高度

回答

相關問題