New Front JP › Support Forums › Kabuki Theme Support › Stopping footer "float"?
- このトピックには4件の返信、2人の参加者があり、最後に
CrackleFactoryにより8年、 7ヶ月前に更新されました。
-
投稿者投稿
-
10月 27, 2016 12:56 am #11120
CrackleFactory
メンバーOn my front page (template = Page: background slider), the footer hangs out at the bottom of the page, and stays there when the browser window is resized.
Is there any way to replicate that behavior on other page templates (in particular, Page: full-width and Page: right sidebar)? If the content area doesn’t have much content in it, the footer “rides up” and forms a stripe across the page, instead of tucking itself neatly at the bottom.
Many thanks,
~IW
10月 27, 2016 3:00 am #11121satori
キーマスターHey Ian,
you can use
#footer { margin-top: 0px; position: fixed; bottom: 0px; }
to force it to stick to the bottom on all pages, yet the catch here is that the “bottom” will be defined as the bottom of the browser window – i.e. if the page’s content exceeds the window height, the footer will overlap it. Without resorting to hacky solutions, it’s possible to either tell the footer to consider the bottom of the screen as its starting point, or the bottom of content, not both. This is why there’s no content block on the “Page with Background Slider” page template.
Sincerely,
Andrii / Satori Studio10月 27, 2016 8:24 am #11125CrackleFactory
メンバーFound this, which seems to be working nicely:
html {
position: relative;
min-height: 100%;
}
body {
margin: 0 0 100px; /* bottom = footer height */
}
footer {
position: absolute;
left: 0;
bottom: 0;
height: 35px;
width: 100%;
}-
この返信は8年、 8ヶ月前に
CrackleFactoryが編集しました。
10月 27, 2016 11:27 am #11129satori
キーマスターThanks for sharing, Ian! Yes, this snippet should do the job; I’m calling the likes of it “hacky” because it assumes we know the footer height in advance, which is usually not the case when developing themes that will potentially be used by thousands of people – who might put different amounts of content into the footer (in addition to that, on smaller screens that content will pack into a larger number of lines and therefore further change its height quite unpredictably, complicating this even further). However, for a specific website, where you do know the desired height of the footer, that can indeed be a neat solution.
Sincerely,
Andrii / Satori Studio10月 27, 2016 8:19 pm #11142CrackleFactory
メンバーOh, I don’t think of “hacky” as a bad thing at all! I’m no expert – my version of hacky is “Let’s stick this code in there and see if it does something.” That snippet was the second thing I tried, so I’m happy with the outcome.
-
この返信は8年、 8ヶ月前に
-
投稿者投稿
- このトピックに返信するにはログインが必要です。