CSS: Altura do textarea como uma porcentagem da altura viewport

StackOverflow https://stackoverflow.com/questions/632983

  •  08-07-2019
  •  | 
  •  

Pergunta

Eu gostaria de dizer que a altura de uma área de texto é igual a, digamos, 50% da altura da janela. Como eu posso fazer isso? Um simples height: 50% não fazer o truque.

Foi útil?

Solução

A altura simples:. 50% não fazer o truque

Não, porque seu pai não tem uma altura explícita. Assim, 50% do que? Pai diz ‘auto’, que significa baseá-lo na altura do conteúdo filho. Que depende da altura do pai. Argh! etc.

Então você tem que dar o seu pai uma altura percentual. E pai do pai, todo o caminho até a raiz. Exemplo doc: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
    <style type="text/css">
        html, body { margin: 0; padding: 0; }
        html, body, #mything, #mything textarea { height: 100%; }
    </style>
</head><body>
    <div id="mything">
        <textarea rows="10" cols="40">x</textarea>
    </div>
</body></html>

A outra possibilidade, se você não quer ter de altura set em tudo é usar o posicionamento absoluto. Isso muda o elemento que dimensões são baseadas a partir da controladora direta para o ancestral mais próximo com uma ‘posição’ definição diferente de padrão ‘estática’. Se não existem elementos antepassado com o posicionamento, em seguida, dimensões baseiam-se no “bloco contendo inicial”, que é do mesmo tamanho que a janela de visualização.

Finalmente, há o problema trivial de ‘100%’ ser um pouco grande demais por causa do preenchimento adicional e borda que será aplicada textareas. Você pode contornar isso:

  • comprometer a algo como 95% ou
  • configuração estofamento e fronteira para 0 / nenhum no textarea, ou
  • usando “caixa-sizing: Beira-box”; Para alterar o que significa ‘altura’. Esta é uma característica sopa futuro CSS que requer muitas atualizações específicas do navegador adicionais (como ‘-moz-the-box dimensionamento’).

Outras dicas

Aqui está um pequeno exemplo de um textarea que leva exatamente 50% da altura janela usando o vh CSS3 unidade de exibição que é

igual a 1% da altura do bloco contendo inicial.

Então, se nós definir a altura do textarea para 50vh, ele vai ficar metade da altura body: 

html, body, textarea {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  height: 100%;
}

textarea {
  height: 50vh;
}
<textarea></textarea>

É muito bom suportado pelos diferentes navegadores, com exceção de Opera Mini e suporte parcial em IE .

Eu acho que você precisa usar javascript em alguma maneira de fazer isso. Manipular o evento de redimensionamento, e definir a área de texto para ser que muitos pixels.

Você pode fazer isso se você definir display: block. Mas em HTML 4.01 estrito é necessário definir cols e linhas, mas eu acho que você pode substituí-los com css.

HTML e CSS não são tão bons em fazer esse tipo de coisa com alturas. Eles são definitivamente mais sobre a correr verticalmente através de uma página de escoamento livre. Acho JavaScript é provável que seja a solução mais completa, como diz FryGuy.

Enquanto eu não tenho todos os navegadores para testar isso em, parece que a maioria aceita simplesmente especificando a altura deve funcionar.

Eu testei isso no Internet Explorer 7 e Firefox 3.0.

Basta usar o código a seguir: 

<textarea style="height: 50%; width: 80%;">Your text here</textarea>

O navegador (s) que você estava tendo problemas com?

Este foi, provavelmente, não em torno de quando esta pergunta foi feita, mas os valores CSS e Módulo Unidades Nível 3 inclui janela percentual comprimentos . Parece não ser suportado em navegadores móveis, exceto iOS , no entanto.

Tente remover 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top