Como mover apenas uma parte da minha página

[leonit 0]

Boa tarde a todos e muito obrigado pela ajuda desde já. Sou novo aqui no fórum e caso esteja postando no lugar errado por favor me avisem.

Criei uma página para busca em uma determinada base de dados e quero que apenas uma parte da página onde são exibidos os resultados se movam enquanto a área onde estão os campos ultilizados na pesquisa permaneçam parados, para que dessa forma quem faz a busca possa ver seu resultado e verificar os atributos que foram utilizados sem ter que ficar subindo a página. Gostaria de saber o que devo procurar exatamente.

 

 

 

Só uma observação: essa aba da minha página já está pronta porque o atributo utilizado ja aparece no resultado no campo objeto. Eu quero utilizar esse recurso na outra aba que estou desenvolvendo.

[reebr 94]

A parte superior (onde está o formulário) é uma <div> e onde são exibido os resultados é outra? Se sim, eu faria de duas formas:

 

1) Usando "position: fixed" na parte superior.

Resultado: http://jsfiddle.net/rnxn/33HfP/1/embedded/result/

 

2) Setando uma altura máxima para a div inferior e em caso de "overflow-y", mostrar a barra de scroll.

Resultado: http://jsfiddle.net/rnxn/89Va8/embedded/result/

 

Tendo:

<header>
    <!-- Formulário -->
</header>
<section>
    <!-- Resultados -->
</section>

1)

* {
    margin: 0;
}

header,
section {
    display: block;
    text-align: center;
    width: 100%;
}

header {
    position: fixed; /* Posição Fixa */
    top: 0; /* Em relação ao Topo */
    background: #1ABC9C;
    color: #fff;
    padding: 40px 0;
}
section {
    margin-top: 100px; /* Para que o 'header' não sobreponha o 'section' */
    line-height: 2em;
}

2)

* {
    margin: 0;    
}

header, section {
    display: block;
    text-align: center;
    width: 100%;
}

header {
    background: #1ABC9C;
    color: #fff;
    padding: 40px 0;
}

section {
    height: 200px; /* Define a altura Máxima */
    overflow-y: scroll; /* Em caso de overflow... */
}