Divs HTML + CSS tuning

Asked

Viewed 43 times

0

Well, my doubt is on my page I have the menu and the footer 100% functional but I can not adapt the div of the "body" or "content" wanted as the content is placed it increases, my problem when I try to do that the information "passes" the footer and goes on and I didn’t want it, someone knows how to help?

  • 1

    Edit your question and include the code you have...

2 answers

0

Just leave the body div without setting the height, and it will automatically adjust.

*{
  margin: 0px;
  padding: 0px;
}
#geral{
  width: 700px;
  background-color: lightgrey;
  margin: auto;
}
#cabecalho{
  width: 700px;
  height: 200px;
  background-color: lightsalmon;
}
#conteudo{
  width: 660px;
  background-color: lightblue;
  padding: 20px;
}
#rodape{
  width: 700px;
  height: 200px;
  background-color: lightgreen;
}
<div id="geral">
  <div id="cabecalho">
  </div>
  <div id="conteudo">
    orem ipsum dolor sit amet, consectetur adipiscing elit. Mauris venenatis sem ut ultricies ornare. Aliquam cursus, mi id porta volutpat, massa nibh tincidunt mi, sed lobortis orci urna vel turpis. Mauris ultricies leo in elementum commodo. Mauris enim orci, congue in urna quis, suscipit semper nunc. Phasellus iaculis, erat non finibus aliquet, eros tellus cursus enim, ut ullamcorper urna sapien sed ante. Mauris vitae leo in libero pharetra ornare. Nunc eleifend mi a elementum blandit. Proin massa lacus, pretium sit amet venenatis vitae, pellentesque nec velit. Sed sagittis quis ante a efficitur. Sed laoreet neque dictum purus mollis tempus.

Phasellus rutrum dui eget convallis varius. Fusce massa dui, rhoncus eu massa nec, scelerisque rutrum lorem. Donec eu pellentesque magna. Donec dapibus rhoncus felis. Nam auctor sapien felis, quis faucibus nisi pharetra eu. Duis vel velit nibh. Vivamus varius, risus quis ultrices commodo, urna nisl luctus eros, eget facilisis lectus massa a nisl. Maecenas in volutpat sapien, in consequat est. Pellentesque quis facilisis odio, ac tincidunt libero. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut ultricies mollis nibh id ullamcorper.

Nulla vitae malesuada leo. Aenean ultrices commodo congue. Aenean a ligula mi. Sed fermentum a dui ac bibendum. Proin non fermentum ante. Maecenas posuere eget metus non luctus. Duis viverra risus consequat, dignissim sem at, pharetra nibh. Phasellus vehicula erat sed venenatis porttitor. Curabitur vitae purus ac felis mattis rutrum. Donec neque libero, sodales eu urna at, auctor elementum justo. Quisque sit amet nisl sodales, tempor nibh sit amet, maximus diam. Aliquam et justo tincidunt, pulvinar eros sit amet, vehicula enim. Vestibulum ornare, purus sed convallis dignissim, nunc sapien facilisis ipsum, in faucibus tellus lectus eget nibh. In venenatis pellentesque auctor. 
  </div>
  <div id="rodape">
  </div>
</div>

  • By the CSS so you are to limit a little the width and the height not? I put by percentage, or have no influence by the content div?

  • I’ve got it, thank you!

  • I’m glad you did. When you set measures in percentage, that percentage is taken based on the measure of the parent element. For example: a div wide 50% inside of another div of 300px will have a width of 150px.

0


I don’t think I understand your question very well, put your code here for me to take a look, but I suppose you’re using a fixed value on height, remove this fixed value and the div should grow along with its contents.

Browser other questions tagged

You are not signed in. Login or sign up in order to post.