Html Divs不自动调整另一个div内的高度解决办法已经找到。代码如下。感谢所有帮助过你的人。_Html_Css_Resize_Clearfix

Html Divs不自动调整另一个div内的高度解决办法已经找到。代码如下。感谢所有帮助过你的人。

html css

Html Divs不自动调整另一个div内的高度解决办法已经找到。代码如下。感谢所有帮助过你的人。,html,css,resize,clearfix,Html,Css,Resize,Clearfix,解决方法是清除浮动，下面的代码为我修复了它 .div#content:after { content:""; display:table; clear:both; } 再次感谢原始问题我有两个div，一个是“Content”，我的站点的所有内容都在其中。和另一个名为“更新”的部门。我希望div“content”调整其高度，使其内部的所有div都适合。这是一张更容易解释我的问题的图片以下是我的完整源代码（html）（以及content div和updates div的css） <

解决方法是清除浮动，下面的代码为我修复了它

.div#content:after {
content:"";
display:table;
clear:both;
}

再次感谢

原始问题我有两个div，一个是“Content”，我的站点的所有内容都在其中。和另一个名为“更新”的部门。我希望div“content”调整其高度，使其内部的所有div都适合。这是一张更容易解释我的问题的图片

以下是我的完整源代码（html）（以及content div和updates div的css）

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="css/reset.css">
        <link rel="stylesheet" type="text/css" href="css/style.css">
        <title>MCSocial</title>
        <script type="text/javascript" src="src/jquery-1.11.1.min.js"></script>
        <script type="text/javascript" src="src/jquery.tinycircleslider.js"></script>

    </head>
    <body>

      <div id="container">
        <div id="content">
            <nav>
                <ul class="nav">
                    <li class="left">MCFish</li>
                     <li><a href="#">Home</a></li>
                     <li><a href="http://social.minecraft.uk.to/news/">News</a></li>               
                     <li><a href="#">Members</a></li>
                     <li><a href="#">Media</a></li>
                </ul>
            </nav>

            <a href="#"><div id="block">
                <img src="img/mojang.jpg" height="200px" width="850px">
            </div></a>

            <a href="#"><div id="block">
                <img src="img/minecraft.jpg" height="200px" width="850px">
            </div></a>

            <div id="updates">
                <img src="img/update.png" height="48px" width="140px">
                <!--post updates here-->
                <h3 class="sub-title">Update 1.5</h3>
                <p class="list">Added a new homepage! More simple to navigate! Enjoy!<br>Please send me some feedback <a href="#" class="sub-link">here!</a></p>

                <h3 class="sub-title">Update 1.4</h3>
                <p class="list">Cleaned up code!</a></p>

                <h3 class="sub-title">Update 1.3</h3>
                <p class="list">Added new themes! Check them out!</a></p>

                <h3 class="sub-title">Update 1.2</h3>
                <p class="list">Renamed Site: from MinecraftFishing to MCFish!</a></p>

                <h3 class="sub-title">Update 1.0</h3>
                <p class="list">Site goes LIVE!</p>
                <!--end post updates-->
            </div>

            <div id="twitter">
                <img src="img/twitter.png" height="48px" width="140px"><br><br>
                <a class="twitter-timeline" href="https://twitter.com/FluffyRabbitzZ" data-widget-id="544642022154723328">Tweets by @FluffyRabbitzZ</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
            </div>



            <div id="footer">
                <p>&copy;2014. MCSocial. All Rights Reserved.</p>
            </div>
        </div>
      </div>



    </body>
</html>

谢谢您的帮助。

您应该清除

浮动

将
```
overflow
```
CSS属性（例如
```
：auto
```
）添加到
```
div#content
```
现代浏览器的解决方案：

您必须清除浮动内容：

<div style="clear:both"></div>

在关闭您的

div.content

之前，如其他人所述，您需要清除

float

。浮动元素已从文档流中删除，不再向下推送其他元素。有关各种方法，请参阅本文：。@MyNameIsNotSoCool:很高兴为您提供帮助。

    .div#content:after {
       content:"";
       display:table;
       clear:both;
    }

<div style="clear:both"></div>