definir o tamanho de uma input do tipo botão em %

[programador_09 1]

Tenho uma input do tipo botão, ela se encontra em uma div com height = 5% , gostaria de saber como deixar o botão pegando toda essa área de 5%.

[L. Henrique 179]

Vai ser complicado alinhar, já que o input talvez não possa entender a height que definiu através de um valor "auto".

Você pode tentar ir na base do running horse code mesmo. Veja ai:
HTML:

<div class="box">
    <input type="text" class="input">
</div>

CSS:

.box{
    background: black;
    width: 100%;
    height: 5%;
}

.input{
    width: 33.3%;
    height: 80%;
}

Lembrando que alguns estilos são meramente ilustrativos. Caso queira ver isso funcionando, segue aqui uma DEMO.

[programador_09 1]

Vai ser complicado alinhar, já que o input talvez não possa entender a height que definiu através de um valor "auto".

 

Você pode tentar ir na base do running horse code mesmo. Veja ai:

HTML:

<div class="box">
    <input type="text" class="input">
</div>

CSS:

.box{
    background: black;
    width: 100%;
    height: 5%;
}

.input{
    width: 33.3%;
    height: 80%;
}

Lembrando que alguns estilos são meramente ilustrativos. Caso queira ver isso funcionando, segue aqui uma DEMO.

 

 

Está desta forma:

.div{ /*div onde está o botao/

width:100%;

height:5%;

border-radius: 10px;

background-color: rgb(254,113,0);

 

.botaohorizontal{ /*estilo dos botões horizontais*/

font:bold 24px Tahoma, Geneva, sans-serif;

font-style:normal;

color:#ffffff;

background:#1568db;

border:0px solid #ffffff;

text-shadow:0px -1px 1px #222222;

box-shadow:2px 2px 5px #000000;

-moz-box-shadow:2px 2px 5px #000000;

-webkit-box-shadow:2px 2px 5px #000000;

border-radius:10px 10px 10px 10px;

-moz-border-radius:10px 10px 10px 10px;

-webkit-border-radius:10px 10px 10px 10px;

width:15%;

height:100%;

}

Mas não funciona, ele segue o tamanho da fonte de 24px, só aumenta se aumentar ela, e nunca fica 100% da altura da div

[leonardo de andrade baessa 16]

por favor poderia colocar o codigo html do imput e tbm o css.

 

Não estou entendo esse .div no css.

[programador_09 1]

por favor poderia colocar o codigo html do imput e tbm o css.

 

Não estou entendo esse .div no css.

 

HTML:

 

<div class="menuestilo"> (Esse é o html da div e do input dentro dela)

<center>

<a href="Index.html"><input class="botaohorizontal" type="submit" value="Home" /></a>

</center>

</div>

CSS:

(estilo da div onde está a input botão)

.menuestilo {

height:5%;

border-radius: 10px;

background-color: rgb(254,113,0);

}

(ABAIXO ESTÁ O ESTILO DO BOTÃO INPUT)

.botaohorizontal{

font:bold 24pxTahoma, Geneva, sans-serif;

font-style:normal;

color:#ffffff;

background:#1568db;

border:0px solid #ffffff;

text-shadow:0px -1px 1px #222222;

box-shadow:2px 2px 5px #000000;

-moz-box-shadow:2px 2px 5px #000000;

-webkit-box-shadow:2px 2px 5px #000000;

border-radius:10px 10px 10px 10px;

-moz-border-radius:10px 10px 10px 10px;

-webkit-border-radius:10px 10px 10px 10px;

width:15%;

height:100%;

}

Gostaria que esse botão pegasse toda a altura da div.

[L. Henrique 179]

Programador_09, tente adicionar a propriedade de box-sizing que o input vai se ajustar a altura da div.

Segue como exemplo:
HTML:

<div class="conjunto">
    <input type="text" class="input" placeholder="Digite aqui"/>
</div>

CSS:

.conjunto{
    width: 100%;
    height: 5%;
    float: left;
    background: #C1C1C1;
    padding: 0;
    margin: 0;
}

.input{
    width: 50%;
    height: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

Quando você define que um input possui border-box, você passa a dizer a ele que o padding e o border que existem nele passam a NÃO somar na width e height total. Já que naturalmente quando você define um width e height, o html define uma soma de padding e border ao conjunto.

Se quiser saber mais sobre isso: DICA.

Se quiser ver como ficou o resultado do código acima: DEMO.

[Maujor 144]

Olá,
Algumas observações sobre a HTML e as CSS que você está usando:

 

1. Quem está determinando a altura do DIV é o elemento INPUT e a altura do INPUT é determinada pelo tamanho de fonte (no seu caso 24px); (mude para 50px e observe a alteração)
2. Assim, as declarações height: 5% para o DIV e 100% para o INPUT não causam nenhum efeito e podem ser retiradas;
3. Como você definiu 2px de sombra inferior no INPUT, a sombra extrapolou a borda inferior do DIV e o INPUT ficou com altura maior igual a 2px em relação ao DIV;
4. Para corrigir, defina um padding-bottom: 2px para o DIV;
5. A sombra para o texto do INPUT está definida de modo equivocado, por essa razão ela não aparece;
6. Pode retirar as definições de sombra com uso de prefixos proprietários.

Essas correções resolvem o problema da altura. Corrija e poste o resultado, pois há outras observações sobre o código como o tipo do INPUT e o elemento a (link) no código.

[programador_09 1]

Programador_09, tente adicionar a propriedade de box-sizing que o input vai se ajustar a altura da div.

 

Segue como exemplo:

HTML:

<div class="conjunto">
    <input type="text" class="input" placeholder="Digite aqui"/>
</div>

CSS:

.conjunto{
    width: 100%;
    height: 5%;
    float: left;
    background: #C1C1C1;
    padding: 0;
    margin: 0;
}

.input{
    width: 50%;
    height: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

Quando você define que um input possui border-box, você passa a dizer a ele que o padding e o border que existem nele passam a NÃO somar na width e height total. Já que naturalmente quando você define um width e height, o html define uma soma de padding e border ao conjunto.

 

Se quiser saber mais sobre isso: DICA.

 

Se quiser ver como ficou o resultado do código acima: DEMO.

Não funcionou, minha input é type="submit".

Tem alguma relação isso?

A DIV ainda ficou maior que o input botão, gostaria que o botão ocupasse toda a área da div

[programador_09 1]

Olá,

Algumas observações sobre a HTML e as CSS que você está usando:

 

1. Quem está determinando a altura do DIV é o elemento INPUT e a altura do INPUT é determinada pelo tamanho de fonte (no seu caso 24px); (mude para 50px e observe a alteração)
2. Assim, as declarações height: 5% para o DIV e 100% para o INPUT não causam nenhum efeito e podem ser retiradas;
3. Como você definiu 2px de sombra inferior no INPUT, a sombra extrapolou a borda inferior do DIV e o INPUT ficou com altura maior igual a 2px em relação ao DIV;
4. Para corrigir, defina um padding-bottom: 2px para o DIV;
5. A sombra para o texto do INPUT está definida de modo equivocado, por essa razão ela não aparece;
6. Pode retirar as definições de sombra com uso de prefixos proprietários.

Essas correções resolvem o problema da altura. Corrija e poste o resultado, pois há outras observações sobre o código como o tipo do INPUT e o elemento a (link) no código.

 

A div ainda ficou maior do que o input, se eu aumento a % do tamanho da div ela aumenta, ela segue a porcentagem colocada, porem o input nao, nao consigo fazer ela ocupar toda a altura da div, sendo que em monitores maiores fica uma div bem maior que a input.

[Maujor 144]

Uma regra simples para novatos em fóruns:

Não é necessário citar a postagem anterior antes de responder, a menos que você queira fazer referência a algo que foi postado e mesmo assim basta citar somente o trecho a fazer referência.
Na maioria das vezes basta você escrever o nome de quem respondeu.

 

@programador_09

O trecho HTML com as CSS que você diz estar usando deve servir de base para responder sua pergunta.
O ideal é hospedar o código que causa o erro e fornecer o link.

Com os dados que você passou o DIV se comporta exatamente como eu disse anteriormente. Ele não aumenta a altura e a porcentagem não tem qualquer influência nela.

 

Aparentemente há outros elementos ancestrais na marcação que você não informou e que estão fazendo a altura aumentar com aumento do valor da porcentagem. Assim, só é possível analisar se você hospedar a página e fornecer o link.