当前位置：文江博客话题详情

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

发布于 2024-12-04 12:16:15 字数 375 浏览 2 评论 0原文

根据所附屏幕截图：

我想创建一个

位于距离顶部“x”像素的位置，但本质上是垂直“扩展”以适应给定选项卡中的任何内容，以及水平方向纯色整个页面的宽度。本质上是一个忽略其他

的

。屏幕截图更好地解释了我的意思。如何制作这样的

布局？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

信仰 2024-12-11 12:16:15

粘性页脚向我显示您正在寻找的内容。这意味着您的内容区域可以是整个屏幕，或者如果有更多内容，则适合内容。页脚位于屏幕底部或内容底部

http://www.cssstickyfooter.com/< /a>

或在 Stack Overflow 上搜索 Stickyfooter

和 abit of html 来帮助您入门

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

回复收藏 0 原文

神妖 2024-12-11 12:16:15

标准 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 etc”内容替换为您想要看到的包含 div 更改大小的内容即可。

祝你好运。

Standard CSS should do the job for you as if you don't set a height for a div, it will automatically expand to fit its content. Here is some code I knocked up quickly which will display the idea:

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

Just replace the 'lorerm ipsum etc' content with whatever you want to see the containing div change size.

Good Luck.

回复收藏 0 原文

~没有更多了~