gpt4 book ai didi

html - 使页面内容不固定

转载 作者:行者123 更新时间:2023-11-28 17:42:33 24 4
gpt4 key购买 nike

我有http://jsfiddle.net/EN8CX/

我首先要做的是将默认页面设置为底部有页脚。有没有比修改内容的高度更好的方法?

#content {
min-height:200px;}

我问这个是因为我无法为内容设置固定高度。稍后我将添加一个搜索功能,它可能需要显示比页面更多的结果,所以我需要一个滚动条。当然,这会将页脚向下推。我该怎么做?

最佳答案

我自己也遇到过同样的困境,我花了一段时间才弄明白。但我想我明白了!所以你必须稍微修改你的 HTML。您需要取出页脚并将其放置在与容器相同的级别。所以它看起来像这样:

<body>
<div id="container">
...
</div>
<div id="footer">
...
</div>
</body>

在 CSS 中,使用“vh”单位制作具有整个视口(viewport)最小高度的“容器”。然后获取页脚高度并用它来填充内容的底部。取出页脚并将边距向上反转,通过再次使用页脚的高度使其达到峰值:

#container {
...
min-height: 100vh;
}

#content {
...
padding-bottom: 70px; // if footer height = 70px;
}

#footer {
...
margin-top: -70px;
}

我有一个 fiddle 在这里运行:http://jsfiddle.net/EN8CX/5/ .我还添加了一个按钮来增加内容,这样您就可以看到页脚被压下了。

关于html - 使页面内容不固定,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23843763/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com