我的页脚浮动 [英] My Footer Floats
问题描述
我一直在尝试各种粘性页脚解决方案三天的更好的部分没有成功。在没有足够的内容来跨越窗口的全高时，我试图将页脚放在浏览器窗口的底部。请。帮助。
这是基本的网站结构：
< div id =siteWrapper>
< header>
< div id =header>
< div id =headerWrapper>< / div>
< / div>
< / header>
< div id =content>
< div id =innerWrapper>
< div id =columnLeft>< / div>
< aside>
< div id =aside>
< div id =asideWrapper>< / div>
< / div>
< / aside>
< / div>
< / div>
< footer>
< div id =footer>
< div id =footerWrapper>< / div>
< / div>
< / footer>
< / div>
和相关的CSS，为简洁起见，也没有反映我试过的任何解决方案（见下文）：
* {
margin：0;
padding：0;
}
#header {
width：100％;
display：inline-block;
}
#headerWrapper {
width：90％;
max-width：980px;
}
#sitewrapper {
width：100％;
min-height：100％;
}
#content {
padding：2％;
width：90％;
max-width：980px;
}
#innerWrapper {
display：inline-block;
}
#columnLeft {
display：inline-block;
width：70％;
float：left;
}
#aside {
width：30％;
float：right;
}
#footer {
background-color：＃f5f5f5;
width：100％;
}
我试过下面的解决方案（我只能列出两个，我缺乏信誉点），包括Ryan Fait的...：
http://www.cssstickyfooter.com/
http://css-tricks.com/snippets/css/sticky-footer/
我不是开发人员，只是使用Google的人。这是我开发的第一个响应式网站，第一次使用HTML5 / CSS3。
我观察到的一件事是人（Ryan Fait包括）应用样式到我理解的HTML5的语义元素（< header> ，< article> ，< aside> ，< footer> ）。这是常见的做法吗？如果是这样，我可以减少我使用的结构div的数量，这将很好。
此外，我已经尝试关闭 siteWrapper div在页脚的上方和下方，坚持在上面列出的每个解决方案中演示的变化的方法。我已在Chrome，Firefox和Safari中查看过这些各种解决方案。
非常感谢您提供的任何帮助。
在我最初的帖子之后，我想出了为什么不把那些方便的JS Fiddles，所以这里你去： http://jsfiddle.net/8uHF6/
忘记所有令人沮丧的尝试使用包装器的业务，并将其他元素设置为100％高度，以便在布局中挤出额外的垂直空间，等等。你刚刚结束在一个你在这里戳的情况，一些东西喷出那里，所以你戳在那里，一些东西喷出其他地方。
对您的主要布局元素使用绝对定位。基本上，你通过指定它们的顶部和/或底部值，包括你的主要内容元素，它会自动缩放，以适应可用空间，因为你的窗口垂直变化的大小，你确定你想要的元素。
告诉您的主要内容元素使用自动溢出，所以内容将显示为在页脚下滑动，看不见。如果需要，滚动条会自动出现。浮动主要的内容元素，如果你想要一个浮动的布局里面（否则，不要打扰）。
此外，请注意，没有整体的网站包装器或网页 div，这是一种很好，因为语义网的真正目标是你的HTML包含内容，只有内容（HTML是数据，而不是布局）。在HTML中添加诸如包装器之类的东西来控制布局是不幸的。如果可能，布局逻辑的每一个最后一位都应该在你的CSS中。
祝你好运！
< html> ;
< head>
< style>
html {
height：100％;
min-height：100％;
font-size：100％;
}
body {
margin：0;
height：100％;
min-height：100％;
}
header {
background-color：＃FF0000;
float：left; / *如果你想要一个带有浮动后代的布局... * /
position：absolute;
width：100％;
top：0;
overflow：hidden;
height：4.6em;
border-bottom：0.15em solid yellow;
}
article {
background-color：#CCCCCC;
float：left;
position：absolute;
width：100％;
top：4.75em;
bottom：2.75em;
overflow：auto;
}
footer {
background-color：#AACCFF;
float：left;
position：absolute;
width：100％;
height：2.75em;
bottom：0;
border-top：0.15em solid blue;
}
< / style>
< / head>
< body>
< header>
Header Stuff ...
< / header>
< article>
垂直调整大小以查看内容溢出时会发生什么。< br />
1< br />
2< br />
3< br />
4< br />
5< br />
6< Br />
7< br />
8< br />
9< br />
10< br />
11< br />
12< br />
13< br />
14< br />
< / article>
< footer>
Footer stuff ...
< / footer>
< / body>
< / html>
I have been trying various "sticky" footer solutions for the better part of three days with no success. I seek to place the footer at the bottom of the browser window in instances when not enough content is present to span the window's full height. Please. Help.
Here's the basic site structure:
<div id="siteWrapper">
<header>
<div id="header">
<div id="headerWrapper"></div>
</div>
</header>
<div id="content">
<div id="innerWrapper">
<div id="columnLeft"></div>
<aside>
<div id="aside">
<div id="asideWrapper"></div>
</div>
</aside>
</div>
</div>
<footer>
<div id="footer">
<div id="footerWrapper"></div>
</div>
</footer>
</div>
And the associated CSS, edited for brevity, and also not reflecting any of the solutions I've tried (see below):
* {
margin: 0;
padding: 0;
}
#header {
width: 100%;
display:inline-block;
}
#headerWrapper {
width: 90%;
max-width:980px;
}
#sitewrapper {
width: 100%;
min-height: 100%;
}
#content {
padding: 2%;
width:90%;
max-width: 980px;
}
#innerWrapper {
display:inline-block;
}
#columnLeft {
display: inline-block;
width: 70%;
float: left;
}
#aside {
width: 30%;
float: right;
}
#footer {
background-color: #f5f5f5;
width: 100%;
}
I have tried the following solutions (I can only list two, evidently, because I lack reputation points), including Ryan Fait's...:
http://www.cssstickyfooter.com/
http://css-tricks.com/snippets/css/sticky-footer/
I'm not a developer, just someone who uses Google. This is the first "responsive" site I've developed, and the first time using HTML5 / CSS3.
One thing I've observed is people (Ryan Fait included) applying styles to what I understand to be HTML5's semantic elements (<header>, <article>, <aside>, <footer>). Is this common practice? If so, I can reduce the number of structural div's I'm using, which would nice.
Also, I have tried closing the siteWrapper div both above and below the footer, adhering the varying methods demonstrated in each solution listed above. I have viewed these various solutions in Chrome, Firefox, and Safari.
Any help you can provide is greatly appreciated.
Here's your solution.
After my initial post, I figured why not slap together one of those handy JS Fiddles, so here you go: http://jsfiddle.net/8uHF6/
Forget all that frustrating business of trying to use wrappers and set other elements to 100% height to squeeze the extra vertical space out of the layout, and so on. You just end up in a situation where you poke over here, and something squirts out over there, so you poke over there, and something squirts out somewhere else. Ugh.
Use absolute positioning for your main layout elements. Basically, you nail the elements down exactly where you want them by specifying their top and/or bottom values, including your main content element, which will automatically scale to fit the available space as your window changes size vertically.
Tell your main content element to use automatic overflow, so the content will appear to slide under the footer, out of sight. A scrollbar will appear automatically if it's needed. Float the main content elements if you want a floated layout inside of them (otherwise, don't bother). You can use a fluid or elastic grid layout inside of something like this, and so on.
Also, note that there is no overall "site-wrapper" or "page" div, which is kind of nice since the real goal of the semantic web is that your HTML contains content, and only content (HTML is data, not layout). Adding things like wrappers to your HTML to control layout is unfortunate. If possible, every last bit of layout logic should be in your CSS.
Good luck!
<html>
<head>
<style>
html {
height: 100%;
min-height: 100%;
font-size: 100%;
}
body {
margin: 0;
height: 100%;
min-height: 100%;
}
header {
background-color: #FF0000;
float: left; /* if you want a layout with floated descendants... */
position: absolute;
width: 100%;
top: 0;
overflow: hidden;
height: 4.6em;
border-bottom: 0.15em solid yellow;
}
article {
background-color: #CCCCCC;
float: left;
position: absolute;
width: 100%;
top: 4.75em;
bottom: 2.75em;
overflow: auto;
}
footer {
background-color: #AACCFF;
float: left;
position: absolute;
width: 100%;
height: 2.75em;
bottom: 0;
border-top: 0.15em solid blue;
}
</style>
</head>
<body>
<header>
Header Stuff...
</header>
<article>
Resize shorter vertically to see what happens when the content overflows.<br/>
1<br/>
2<br/>
3<br/>
4<br/>
5<br/>
6<br/>
7<br/>
8<br/>
9<br/>
10<br/>
11<br/>
12<br/>
13<br/>
14<br/>
</article>
<footer>
Footer stuff...
</footer>
</body>
</html>
这篇关于我的页脚浮动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
