blocks|key|1140974|text|我不认为只使用CSS是一个合适的解决方案，但是你可以试着给你的主内容区域一个min-height。将其设置为安全高度，如果内容占用更多空间，它将相应地扩展。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1140975|试试这个，看看你是否在寻找类似的东西|1140976|http://jsfiddle.net/blackpla9ue/wCM7v/1/|1140977|这样做的目的是，如果内容区域比你的视区小，它会将页脚定位到视区的底部，如果它比视区大，它就会像预期的那样停留在内容的底部。一个事件被添加到resize事件中，因此即使您调整了浏览器的大小，它也会适当地定位自己。|1140978|entityMap|0|LINK|mutability|MUTABLE|url^0|12|A|0|0|0|14|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@$9|T|A|U|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|V|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|W|8|@]|D|@$9|X|A|Y|1|Z]]|E|$]]|$1|J|3|K|5|6|7|10|8|@]|D|@]|E|$]]|$1|L|3|-4|5|6|7|11|8|@]|D|@]|E|$]]]|M|$N|$5|O|P|Q|E|$R|I]]]]

I dont think there is a proper solution using only CSS, however you can try giving your main content area a <code>min-height</code>. Set it to a safe height and if the content takes more space, it would expand accordingly.

Try this and see whether you are looking for something similar 

<a href="http://jsfiddle.net/blackpla9ue/wCM7v/1/" rel="nofollow">http://jsfiddle.net/blackpla9ue/wCM7v/1/</a>

What this does is, if the content area is smaller than your viewport, it positions the footer to the bottom of the viewport, and if its larger than the viewport it just stays at the bottom of the content like it is supposed to. An event is added to the resize event so even once you resize your browser, it would position itself appropriately.

blocks|key|5179679|text|有一种CSS方法可以做到这一点。或者至少有一个可以在我支持的所有浏览器上运行的浏览器(回到IE7)。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|5179680|我使用负边距-顶部技巧将页脚粘贴到页面的底部。DIV包含整个页面内容，而不仅仅是页眉，这对大多数人来说已经足够了。假设DIV有一个类“除了脚注之外的所有东西”。然后，我强制页面至少为窗口高度。适用于大多数浏览器的完整版本：|5179681|html,+body,+.everything-but-the-footer+{
++++height:+100%25;
}

.everything-but-the-footer+{
++++margin-top:+-21px;+//+footer+height+%2B+border+*+-1
++++min-height:+100%25
}

.footer+{
++++height:+20px;
++++border-top-width:+1px;
}

.header+{
++++padding-top:+21px;+//+footer+height+%2B+border
}|code-block|syntax|javascript|5179682|请注意，评论中列出的JSFiddle技术在IE上根本不起作用，在Chrome上也不能解决所述的问题(页脚和内容重叠)。|5179683|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|O|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

There's a CSS way to do this. Or at least there's one that works for all the browsers I support (back to IE7). 

I use the negative margin-top trick to stick the footer to the bottom of the page. That DIV is wrapped around the entire page contents instead of just the header, which suffices for most people. Let's say that DIV has a class "everything-but-the-footer". I then force the page to be at least window height. Full version that works on most browsers:

<pre><code>html, body, .everything-but-the-footer {
 height: 100%;
}

.everything-but-the-footer {
 margin-top: -21px; // footer height + border * -1
 min-height: 100%
}

.footer {
 height: 20px;
 border-top-width: 1px;
}

.header {
 padding-top: 21px; // footer height + border
}
</code></pre>

Note that the JSFiddle technique listed in the comments doesn't work on IE at all and on Chrome doesn't solve the stated problem (footer and contents overlapping).

blocks|key|1141105|text|为此，您可以使用技术。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1141106|检查这个：http://jsfiddle.net/tM445/5/|offset|length|1141107|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/tM445/5/^0|0|5|S|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@$D|P|E|Q|1|R]]|A|$]]|$1|F|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|G|$H|$5|I|J|K|A|$L|M]]]]

For this you can use <a href="http://ryanfait.com/sticky-footer/" rel="nofollow">sticky footer</a> technique for this. 

Check this:
<a href="http://jsfiddle.net/tM445/5/" rel="nofollow">http://jsfiddle.net/tM445/5/</a>

blocks|key|802086|text|我可能会做这样的事...再加上一点jQuery。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|802087|var+a+=+$('#floatdiv').height();+//get+the+height+of+the+content
var+b+=+$(window).height();++++++//get+the+height+of+the+window
var+c+=+$('footer').height();++++//get+the+height+of+the+footer
var+d+=+b+-+c;+++++++++++++++++++//subtract+the+footer+height+from+window+height

if(a+<+b){+++++++++++++++++++++++//if+the+content+is+smaller+than+the+window+
++++$('#floatdiv').css('height',+d+%2B+'px');++//set+the+content+height+to+the++++
}++++++++++++++++++++++++++++++++++++++++++++//window+minus+the+footer|code-block|syntax|javascript|802088|示例：+http://jsfiddle.net/tM445/6/|offset|length|style|BOLD|802089|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/tM445/6/^0|0|0|0|3|4|S|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|W|8|@$I|X|J|Y|K|L]]|9|@$I|Z|J|10|1|11]]|A|$]]|$1|M|3|-4|5|6|7|12|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|T]]]]

I might do something like this... with a little jQuery.

<pre><code>var a = $('#floatdiv').height(); //get the height of the content
var b = $(window).height(); //get the height of the window
var c = $('footer').height(); //get the height of the footer
var d = b - c; //subtract the footer height from window height

if(a &lt; b){ //if the content is smaller than the window 
 $('#floatdiv').css('height', d + 'px'); //set the content height to the 
} //window minus the footer
</code></pre>

Example: <a href="http://jsfiddle.net/tM445/6/" rel="nofollow">http://jsfiddle.net/tM445/6/</a>

I have a fluid layout but as a consequence, when there is no enough content in the page, my footer keeps moving up as in <a href="http://jsfiddle.net/tM445/" rel="noreferrer">this example</a>. 

<img src="https://i.stack.imgur.com/UsJHA.png" alt="enter image description here">

A popular solution to keep the footer at the bottom of the page is using <code>position: fixed</code> or <code>position: absolute</code>, however, when I do that, the content can collide with the footer on resizing (you can see what I mean <a href="http://jsfiddle.net/q6kLE/1/" rel="noreferrer">here</a>. Try to resize your window to the point in which the text is hiding behind the footer).

<img src="https://i.stack.imgur.com/i73aJ.png" alt="enter image description here">

So how can I get a footer at the bottom but moving accordingly with the rest of the page in a fluid layout?

Thanks!

Footer at the bottom in fluid layout

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我有一个流畅的布局，但结果是，当页面中没有足够的内容时，我的页脚会像在中一样向上移动。​​将页脚保留在页面底部的一个流行的解决方案是使用position: fixed或position: absolute，然而，当我这样做时，内容可能会在调整大小时与页脚发生冲突(你可以看到我所说的。尝试将窗口大小调整到文本隐藏在页脚后...

问fluid布局中底部的页脚
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问fluid布局中底部的页脚EN