CSS div 不适应内容答案

【问题标题】：CSS div not adapting to the contentCSS div 不适应内容
【发布时间】：2014-08-13 10:23:19
【问题描述】：

如果 div 中有这么多文本（例如 conversationList 或对话），我希望我可以向下滚动以阅读更多内容。我的问题是 div 不会自行调整大小。就好像他们都是固定的一样。请看我的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>

【问题讨论】：

你的演示中div在哪里？
问题是你的position:fixed 在你的main 标签中。
哦，我忽略了这个错误：/
因为 div 本身就有这种行为，所以你用自己的 CSS 破坏了它。解决此问题的一种建设性方法是分解您的 CSS 以查看哪种样式破坏了默认行为。这将使您和其他人更容易找到解决方案，并且您将对某些属性的副作用有更深入的了解。

标签： html css height scrollable

【解决方案1】：

正如 cmets 中所说，如果您从 CSS 中删除 position: fixed 的“main”元素，它将让该部分随内容一起扩展。

编辑：仅将其从主目录中删除，而不是从标题中删除，您仍然会有一个固定的标题。

【讨论】：

哦，我忽略了这个错误：/

【解决方案2】：

尝试为滚动 div 添加这种样式：

overflow-y: scroll; 
height:400px;

【讨论】：

抱歉，我不想在我的 div 中添加滚动条。它只会变大（增加高度）
高度增加到哪个部分？您的演示中没有 div