Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

KMRodrigo

[Resolvido] CSS ajustar com o conteúdo

Por , em Desenvolvimento frontend

Recommended Posts

KMRodrigo    1

KMRodrigo
Postado

Galera tenho o seguinte código

 

<code>

body {

 

 

 

 

-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=BLUE, endColorstr=#ffffff)"; // efeito Degradee

 

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=BLUE, endColorstr=#ffffff);

 

 

background: -moz-linear-gradient(top, BLUE, #ffffff) repeat-X;

 

 

background: -webkit-gradient(linear, left top, left bottom, from(BLUE), to(silver)) repeat-X;

 

 

 

}

 

 

 

#center2 {

width:100%;

height:100%;

border-width: medium;

border-style: solid;

border-color: silver;

 

 

 

 

 

 

-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#6495ED, endColorstr=#ffffff)";

 

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#6495ED, endColorstr=#ffffff);

 

 

background: -moz-linear-gradient(top, #6495ED, #8968CD) repeat-X;

 

 

background: -webkit-gradient(linear, left top, left bottom, from(#6495ED), to(#ffffff)) repeat-X;

 

 

float:right;

 

}

 

 

 

 

NO HTML FICA ASSIM (meio óbvio)

 

<body>

<div id='center2'>

Conteúdo

</div>

 

 

 

</body>

 

 

 

 

<\code>

 

 

Se o Conteúdo fosse maior que 100% da tela o Scroll ativa mas quando rola passa a ficar fora da Div.... Como faço pra div estender?

 

tentei colocar relative no body e absolute no Center2 mas n funcionou... sei q deve ser algo bobo mas o relative e absolute foi unica coisa q consegui encontrar a respeito, se puderem me dar uma explicação de como fazer agradeço desde já.

Compartilhar este post

Link para o post
Compartilhar em outros sites

crf_h0m3r    5

crf_h0m3r
Postado

Cara, vai aqui, apaga o que tem e coloca esse código e clica em Edit and click me:

<html>
<style>
body {
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=BLUE, endColorstr=#ffffff)"; // efeito Degradee
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=BLUE, endColorstr=#ffffff);
background: -moz-linear-gradient(top, BLUE, #ffffff) repeat-X;
background: -webkit-gradient(linear, left top, left bottom, from(BLUE), to(silver)) repeat-X;
}

#center2 {
width:100%;
height:100%;
border-width: medium;
border-style: solid;
border-color: silver;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#6495ED, endColorstr=#ffffff)";
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#6495ED, endColorstr=#ffffff);
background: -moz-linear-gradient(top, #6495ED, #8968CD) repeat-X;
background: -webkit-gradient(linear, left top, left bottom, from(#6495ED), to(#ffffff)) repeat-X;
float:right;
}
</style>

<body>
<div id='center2'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris consectetur urna sit amet neque ullamcorper vestibulum. Pellentesque rhoncus convallis ante. Vivamus mattis lobortis fermentum. Cras tincidunt, sapien vitae lobortis facilisis, orci ante tempus augue, vel sodales sem metus id est. Praesent risus nunc, iaculis vitae blandit sed, porta ut ligula. Phasellus interdum tempor nunc ut aliquet. Etiam suscipit eros et ligula commodo scelerisque. Cras eu euismod eros. Curabitur sollicitudin risus id magna lacinia ac porttitor mauris laoreet. Phasellus sed leo quis odio hendrerit convallis eu venenatis purus. Donec posuere commodo ante vel fermentum.

Curabitur porttitor purus non tortor convallis fringilla. Cras tempus diam eget sapien ullamcorper malesuada. Curabitur in ante ac nisi varius dignissim. Quisque et odio eu ligula vestibulum viverra. Integer ut orci dui, sit amet aliquet diam. Pellentesque ut turpis nec augue rutrum aliquet et vitae mauris. Nullam ac nisl libero, a ultricies dui. Mauris molestie pretium ante, non gravida nisi accumsan ac. Suspendisse volutpat, nisl ut vestibulum facilisis, augue nibh bibendum ante, ut facilisis nisl nibh vel quam. Vivamus rutrum volutpat nisl eu pretium. Sed varius enim in erat sollicitudin tristique. Fusce posuere sapien sit amet ante malesuada a tempor risus facilisis. Pellentesque sed odio dui, et accumsan velit. Aenean odio lectus, imperdiet eget mollis vel, tempor ac neque. Phasellus luctus blandit turpis, non interdum orci rhoncus eu. Nulla tempor vulputate tempor.

Nam est orci, viverra sit amet porta et, tempor a dui. Proin iaculis lacinia mauris congue consectetur. Morbi at volutpat nisi. Pellentesque cursus mi et magna volutpat volutpat. Ut sagittis euismod vestibulum. Suspendisse risus arcu, hendrerit at sollicitudin ut, porttitor eget turpis. Quisque eu mi non purus ultrices tempor nec non metus. Nam odio augue, pharetra sit amet aliquet sit amet, facilisis ac nibh.

Quisque egestas eros eu enim consequat id aliquet dolor tempus. Integer dictum turpis a dui eleifend eu mollis leo semper. Pellentesque pharetra ante quis quam semper viverra. Suspendisse potenti. Sed tincidunt ante ut mauris venenatis mattis. Nullam sollicitudin leo eu turpis feugiat vitae rhoncus nisi eleifend. Donec erat ligula, rhoncus a ullamcorper quis, auctor in dolor. Sed eget nunc dui. Ut laoreet bibendum orci, eget malesuada purus pretium eu. Morbi bibendum auctor augue, et feugiat quam adipiscing sit amet. Nulla fringilla lacinia felis non bibendum. Ut sed commodo tellus.

Proin tristique tellus ut odio tempus bibendum. Nunc sed vestibulum sapien. Quisque vel leo eu est suscipit lobortis aliquam eget risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc ac tortor nec urna ultrices placerat eget in neque. Morbi tincidunt tempus ligula quis rhoncus. Donec arcu neque, luctus ut sollicitudin vitae, sollicitudin at ipsum. Aenean eget lacus sed nulla aliquam pharetra. Donec at arcu sit amet erat faucibus porta id a arcu. Nulla sed elit ante, a lacinia odio. Morbi a libero vitae ligula ultricies laoreet. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. 
</div>
</body>

</html>

 

O resultado é a div sem o gradiente completo, agora se você mudar para height:100% auto;, o gradiente fica completo.

Compartilhar este post

Link para o post
Compartilhar em outros sites

KMRodrigo    1

KMRodrigo
Postado

funcionou, mas eu fiz exatamente isso ontem ¬¬ e n foi ....

 

Obrigado e desculpe.

 

 

Opa me enganei realmente n funciona o código amigo, repare q se você deixar apenas o 100% a div center2 oculpa toda a página msm que não haja conteúdo dentro dela. Se você colocar o Auto e n houver conteúdo a div diminui toda a div...

 

Usar o Auto é a msm coisa que retirar o parametro height (pelo menos no google chrome)

 

faça o teste:

<html>
<style>
body {
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=BLUE, endColorstr=#ffffff)"; // efeito Degradee
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=BLUE, endColorstr=#ffffff);
background: -moz-linear-gradient(top, BLUE, #ffffff) repeat-X;
background: -webkit-gradient(linear, left top, left bottom, from(BLUE), to(silver)) repeat-X;
}

#center2 {
width:100%;
height:100% auto;
border-width: medium;
border-style: solid;
border-color: silver;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#6495ED, endColorstr=#ffffff)";
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#6495ED, endColorstr=#ffffff);
background: -moz-linear-gradient(top, #6495ED, #8968CD) repeat-X;
background: -webkit-gradient(linear, left top, left bottom, from(#6495ED), to(#ffffff)) repeat-X;
float:right;
}
</style>

<body>
<div id='center2'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris consectetur urna sit amet neque ullamcorper vestibulum. Pellentesque rhoncus convallis ante. Vivamus mattis lobortis fermentum. Cras tincidunt, sapien vitae lobortis facilisis, orci ante tempus augue, vel sodales sem metus id est. Praesent risus nunc, iaculis vitae blandit sed, porta ut ligula. Phasellus interdum tempor nunc ut aliquet. Etiam suscipit eros et ligula commodo scelerisque. Cras eu euismod eros. Curabitur sollicitudin risus id magna lacinia ac porttitor mauris laoreet. Phasellus sed leo quis odio hendrerit convallis eu venenatis purus. Donec posuere commodo ante vel fermentum.


</div>
</body>

</html>

 

Pesquisando encontrei a solução, de qqr forma você me ajudou com o que pesquisar Obrigado

 

o correto é usar assim

 

min-height:100%;

height:auto;

 

o min-height define que n pode ser menor q 100%

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito