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

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

css html

Css 如何制作一个居中的div容器，该容器可以根据内部元素垂直拉伸？,css,html,stretch,Css,Html,Stretch,我是个新手，我正在尝试建立一个简单的div布局。我想有3个容器分区：页眉、内容、页脚。内容分区我不想固定高度，我希望它根据内部的内容进行拉伸。另外，我不懂javascript，所以我只想用HTML/CSS 我在这个网站上找到了答案，但它们似乎不起作用。以下是HTML： <body> <div id="header" style="background:beige;"> <div id="logo" style="background:gray

我是个新手，我正在尝试建立一个简单的div布局。我想有3个容器分区：页眉、内容、页脚。内容分区我不想固定高度，我希望它根据内部的内容进行拉伸。另外，我不懂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>

当我希望元素“收缩包装”到其内容时，通常会使用

inline block

使元素生成一个布局像内联框一样的块框

只需将内容div的宽度设置为“自动”。宽度：自动；为了解决这个问题，将“clearfix”作为一个类添加到您的content 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中。

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

不要指定高度并使#content{overflow:hidden}

浮动元素后，它们将停止向下推容器。也许您觉得>因此需要指定高度（#内容总是短停）

溢出：隐藏是一种公认的解决方法

同样，在容器末尾之前用{clear:both；>float:none；}创建一个空div也可以实现这个目的；但这种方式并不可取

因此，对于#content，我简单地修改为：height:auto；溢出：隐藏

你发现的答案到底是如何不起作用的？我不知道它是内涵还是拼写错误，为什么你要把内容放在标题中。标题应该先关闭，然后内容应该开始。aaamos，我记得的一个是将高度设置为100%。这是行不通的。谢谢，但通过将代码添加到内容中，它并没有起到任何作用#内容现在不见了，下面的所有内容现在都在左边。很抱歉，我对实际发生的事情缺乏了解，这正是我所看到的。谢谢Michael，但它所做的事情与上面的答案所做的相同。那么你没有正确地应用它。这将解决您的问题您的标题上也没有结束正文标记和结束div标记。。。不确定这是否只是一个粘贴错误。一旦您更正了代码中的这些错误，您的代码就会严重损坏。也许我的代码已损坏，谢谢您的帮助。我会继续努力的。

 .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%;
}