网页的CSS布局？

2018-07-01 15:33:02

这个问题在这里已经有了答案：

让div填充剩余屏幕空间的高度31个答案

如何改变立场到亲戚？我摆弄了一下：

.footer
{   
    height: 500px;
    width: 100%;
    background-color: green;
    position: relative;
    bottom: 0px;
}

JsFiddle的例子。看到它，告诉我这是你想要的。

你可以在这里看看Ryan Fait的“粘性页脚”：http://ryanfait.com/sticky-footer/

它完全符合你所描述的内容（即，即使内容div不够长，页脚始终至少位于页面的底部）。

它确实需要您对标记进行小改动。你会结束

<body>
    <div class="container">
        <div class="header"></div>
        <!-- this is where you put your content -->
        <div class="push"></div>
    </div>
    <div class="footer"></div>
</body>

而不是你已经拥有的东西。 “推”div是当内容长度不足以填充页面时填充空间的空白div。

编辑：我用我想到的解决方案创建了一个小提琴。正如我所说我改变了你的标记，但希望这对你来说不是问题。

我还会将页眉和页脚缩小一点，只是为了让它更容易在jsfiddle上播放。

您正在使用height: 100%; 你不能使用％try来设置高度： min-height:450px; 当内容增加时，这将会设置一个最小高度并增加

链接地址: http://www.djcxy.com/p/88243.html

上一篇: CSS layouting for web page?

下一篇: Two divs bottom div to height adjust with browser window