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

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.

>
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

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

Não estou entendo esse .div no css.

>
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.

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.

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

• 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)

- Assim, as declarações height: 5% para o DIV e 100% para o INPUT não causam nenhum efeito e podem ser retiradas;

- 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;

- Para corrigir, defina um padding-bottom: 2px para o DIV;

- A sombra para o texto do INPUT está definida de modo equivocado, por essa razão ela não aparece;

• 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, 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

>
Olá,

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

• 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)

- Assim, as declarações height: 5% para o DIV e 100% para o INPUT não causam nenhum efeito e podem ser retiradas;

- 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;

- Para corrigir, defina um padding-bottom: 2px para o DIV;

- A sombra para o texto do INPUT está definida de modo equivocado, por essa razão ela não aparece;

• 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.

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.