Question

根据截图附件：

我想创建一个<div>，它从顶部定位“x”像素，但基本上是“展开”以适应给定标签中的任何内容以及水平整个页面的宽度纯色。基本上是一个忽略其他<div>的{{1}}。截图解释了我的意思更好。如何制作这样的<div>布局？

Answer 1

粘性页脚看起来像你在寻找什么。这意味着您的内容区域可以是整个屏幕，也可以是内容更多的内容区域。页脚位于屏幕底部或内容底部

http://www.cssstickyfooter.com/

或在Stack Overflow上搜索stickyfooter

升级html让你入门

http://jsbin.com/emufot/8/

Answer 2

标准CSS应该为您完成工作，就像您没有为div设置高度一样，它会自动扩展以适合其内容。这是一些我快速敲响的代码，它将显示出这个想法：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title></title>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
<link rel="stylesheet" type="text/css" href=".css"/>
<style>
body {
    margin: 0 auto;
    padding: 0;
}

p {
    margin: 0 auto;
    padding: 0;
}

.topstuff {
    height: 200px;
    background-color: #333333;
    margin: 0 auto;
    padding: 0;
}

.contentContainer {
    width: 100%;
    background-color: #ff0000;
    margin: 0 auto;
    padding: 0;
}

.content {
    width: 1000px;
    margin: 0 auto;
    padding: 0;
}

.footer {
    height: 200px;
    background-color: #00ff00;
    margin: 0 auto;
    padding: 0;
}

</style>

</head>
<body>
<div class="topstuff"></div>
<div class="contentContainer">
    <div class="content">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent semper placerat ligula volutpat aliquam. Maecenas vulputate, nibh at iaculis placerat, ligula nisl sodales odio, quis adipiscing purus dolor venenatis nunc. Proin vehicula rhoncus eros tristique aliquet. Vivamus faucibus hendrerit orci eget egestas. Nulla commodo lectus vitae nunc condimentum pharetra. Donec mattis nulla orci. Proin tortor nulla, varius at mollis ac, vestibulum vel leo. Cras ut rutrum sem. Sed vulputate nisi sed leo aliquam ac fermentum tellus porta. Phasellus quis purus et purus sollicitudin tristique a quis sem. Nunc malesuada, eros ac venenatis consequat, erat elit viverra sem, vitae commodo justo orci nec neque. Proin sed aliquam tellus. In tincidunt urna sit amet felis lobortis fringilla elementum massa egestas.</p>

    </div>
</div>

<div class="footer"></div>
</body>
</html>

只需将“lorerm ipsum等”内容替换为您想要查看包含div更改大小的内容。

祝你好运。

创建具有可变垂直高度的div

2 个答案: