Search code examples
htmlcssheightscrollable

CSS div not adapting to the content

If there are so much text in a div (e.g. conversationList or conversation), I want that I can scroll down to read more. My problem is that div's wont resize themself. It's like they are all fixed. Please see my JSFiddle.

HTML

<body>
   <header>
        Text
   </header>
   <main>
        <nav>
            <a href="#">LINK 1</a><br>
            <a href="#">LINK 2</a><br>
            <a href="#">LINK 3</a><br>
            <a href="#">LINK 4</a><br>
        </nav>

        <section id="pageTitle">
          Title
         </section>

         <section id="conversationList">
           List of Items
         </section>

         <section id="conversation">
           Conversation
         </section>
    </main>
</body>
Solution

  • As was said in the comments, if you remove the position: fixed from your css for the "main" element it will let the section expand with its content.

    Edit: Only remove it from main, not from header and you'll still have a fixed header.