css - 关键包装问题

Question

我知道这一定是一个非常简单且易于解决的问题，但我不知道，因为我是编程新手。

我使用的是 300 像素的默认高度，但随着越来越多的内容被添加，而不是包装器扩展以适应内容，内容正在超出内容。然后我在这个包装器的右侧有第二个容器，如果包装器将扩展以适合内容，它也会向下拖动。我该如何解决这个问题？

包装器:

     background-color: #FFFFFF;
      margin:0 auto; 
       height: 300px;
        width:60%;
     font-family: "Lucida Grande", Verdana, "Lucida Sans Unicode", Arial, Helvetica, sans-serif;
      border:0px solid #FFFFFF;
       margin-top:25px;
       font-size:15px;
      color: #222222;
      margin-left:60px;

容器 1:

         background-color: #000000;
                margin:0 auto; 
                  height: 80px;
             width:20%;
                   border:0px solid #FFFFFF;
                  margin-top:25px;
                  font-size:15px;
                color: #FFFFFF;
                margin-left: 70%;
               margin-top:-317px;

div#wrapper:

                   <?php echo $userposts;?>

div#container1: 添加帖子 添加图片

更新:

我通过替换 html 中 div 的位置来修复它

Answer 1

好吧，如果你设置了一个元素的高度，那么这个元素将永远有这个高度。您可以通过添加 overflow:hidden 或 overflow:hide 来更改元素溢出时的行为。但是据我了解你真正想要的是设置一个最小高度。所以将 height:300px 改为 min-height:300px 这将确保当 wrapper 的内容超过 300px 时，wrapper 将与其内容一起增长。