Question

我是新手，我正在尝试构建一个简单的div布局。我想要3个容器div：标题，内容，页脚。内容div我不希望高度固定，我希望它根据它内部的任何内容进行拉伸。另外我不知道javascript所以我只想用HTML / CSS来做。

我在这个网站上寻找答案，但它们似乎没有用。这是HTML：

<body>
    <div id="header" style="background:beige;">
        <div id="logo" style="background:gray;">
          put logo here 
        </div>
        <div id="navigation" style="background:grey">
          About Us, Contact Us, Etc....
        </div>
    <div id="content" style="background:beige;">
        <div id="bigbox" style="background:black; color:white;">
          big box would have some slide show here
        </div>
        <div class="smallbox" id="smallboxleft" style="background:green;">
          smallboxleft
        </div>
        <div class="smallbox" id="smallboxmiddle" style="background:green;">
          smallboxmiddle
        </div>
        <div class="smallbox" id="smallboxright" style="background:green;">
          smallboxright
        </div>
    </div>    


        <div id="footer" style="background:navy; color:white;">
          This is the footer
        </div>

这是CSS：

  #header{margin:0 auto; height:100px; width:960px; position:relative; }

  #logo{height:100px; width:200px;}

  #navigation{height:50px; width:400px; position:absolute; left:560px; top:50px;}

  #content{margin:0 auto; width:960px; height:100%; position:relative; top:25px;}

  #bigbox{position:absolute; height:300px; width:860px; position:absolute; left:50px; top:125px;}

  .smallbox{position:absolute; height:150px; width:300px; top:450px;}
  #smallboxmiddle{left:320px;}
  #smallboxright{left:640px; }

  #footer{position:absolute; height:100px; width:960px; top:625px;}

Answer 1

当我想要一个元素“收缩”到其内容时，我通常最终会使用display: inline-block。

inline-block使元素生成一个块状框，其布局就像是一个内联框。

Answer 2

一位朋友（mrlostman）给了我答案：

不指定身高   并制作#content {overflow：hidden}

当你浮动元素时，他们会停止向下推动他们的容器。或许你觉得＆gt;需要指定高度因为这个（#content总是会停止）。

溢出：隐藏是一种可以接受的方式

还在容器结束之前创建一个空div，其中{clear：both; ＆GT;浮动：无;会做的伎俩;但这种方式不是首选

所以，对于#content，我只是修改为：height：auto;溢出：隐藏;

Answer 3

只需将内容div的宽度设置为自动。宽度：自动;并解决其他问题，添加“clearfix”作为您的内容div的类，并将其添加到您的CSS内..

 .clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

.clearfix {
    display: inline-block;
}

html[xmlns] .clearfix {
    display: block;
}

* html .clearfix {
    height: 1%;
}

任何时候你想要同样的想法应用到你的div只需添加clearfix类。

如何制作一个可以根据内部元素垂直拉伸的居中div容器？

3 个答案: