Question

已找到解决方案。代码如下。感谢所有帮助过的人。

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

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

再次感谢。

原始问题

我有2个Div，其中一个是“内容”，我的网站的所有内容都在其中。另一个div名为“updates”。我希望div“content”调整其高度，以便所有div内部适合。这是一个更容易解释我的问题的图像Imgur Link, Not high enough rep to post image directly.

这是我的完整源代码（html）（以及内容div的css和更新div。

<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>

和CSS;

div#content {
width: 900px;
margin-left: auto;
margin-right: auto;
background-color: #fff;
height: auto;
border-radius: 2px;
min-height: 100%;
position: relative;
}

div#updates {
float: left;
margin-left: 2.6%;
}

感谢您的帮助。

Answer 1

您应该清除float。

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

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

Answer 2

您必须清除浮动内容：

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

在关闭你div.content之前

。

Div不会自动调整另一个div内的高度

已找到解决方案。代码如下。感谢所有帮助过的人。

原始问题

2 个答案: