将一个粘滞的页脚放在粘滞标题下的固定左列旁边 [英] Position a sticky footer next to a fixed left column under a sticky header
本文介绍了将一个粘滞的页脚放在粘滞标题下的固定左列旁边的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
1。顶部粘性标题，完全伸展100％
2。左侧菜单位于标题下方，完全拉伸至页面底部的高度，如果您调整
的大小页面宽度（媒体最小宽度为845px）
$ b <3> 一个粘滞的页脚，即位于左侧菜单旁边的位置，但拉长了
到目前为止，这是我的布局： p>
更新2：现在还有一个问题，我没有注意到左侧菜单的底部箭头消失了resize，底部的内容也消失了。
解决方案
技巧：
<！DOCTYPE html>
< html>
< head>
< title>如此多的贴图！< / title>
< style type =text / css>
/ *我的屏幕分辨率是1280x1024。我正在调整相对于该元素* /
body {
margin：0px;
overflow：hidden;
}
#header {
background-color：yellow;
宽度：100％;
位置：固定;
top：0px;
height：50px;
}
#left {
background-color：blue;
height：auto;
位置：绝对;
top：50px;
left：0px;
width：280px;
最大高度：974px;
溢出：auto;
}
#right {
height：974px;
width：1000px;
位置：绝对;
top：50px;
left：280px;
}
#bodyContent {
width：100％;
溢出：auto;
height：auto;
最大高度：874px;
职位：亲属;
top：0px;
}
#footer {
width：100％;
背景颜色：红色;
height：100px;
位置：固定;
bottom：0px;
}
< / style>
< / head>
< body>
< div id =header>
您的标题。
< / div>
< div id =content>
< div id =left>
< p>这是一段< / p>
< p>这是一段< / p>
< p>这是一段< / p>
< p>这是一段< / p>
< p>这是一段< / p>
< p>这是一段< / p>
< p>这是一段< / p>
< p>这是一段< / p>
< p>这是一段< / p>
< p>这是一段< / p>
< p>这是一段< / p>
< p>这是一段< / p>
< p>这是一段< / p>
< p>这是一段< / p>
< p>这是一段< / p>
< p>这是一段< / p>
< p>这是一段< / p>
< p>这是一段< / p>
< p>这是一段< / p>
< p>这是一段< / p>
< p>这是一段< / p>
< p>这是一段< / p>
< p>这是一段< / p>
< p>这是一段< / p>
< p>这是一段< / p>
< p>这是一段< / p>
< p>这是一段< / p>
< p>这是一段< / p>
< p>这是一段< / p>
< p>这是一段< / p>
< p>这是一段< / p>
< p>这是一段< / p>
< p>这是一段< / p>
< p>这是一段< / p>
< p>这是一段< / p>
< p>这是一段< / p>
< p>这是一段< / p>
< p>这是一段< / p>
< p>这是一段< / p>
< p>这是一段< / p>
< p>这是一段< / p>
< p>这是一段< / p>
< p>这是一段< / p>
< p>这是一段< / p>
< p>这是一段< / p>
< p>这是一段< / p>
< p>这是一段< / p>
< p>这是一段< / p>
< p>这是一段< / p>
< p>这是一段< / p>
< p>这是一段< / p>
< p>这是一段< / p>
< p>这是一段< / p>
< p>这是一段< / p>
< p>这是一段< / p>
< p>这是一段< / p>
< p>这是一段< / p>
< p>这是一段< / p>
< p>这是一段< / p>
< p>这是一段< / p>
< p>这是一段< / p>
< p>这是一段< / p>
< p>这是一段< / p>
< p>这是一段< / p>
< p>这是一段< / p>
< p>这是一段< / p>
< / div>
< div id =right>
< div id =bodyContent>
正文
< / div>
< div id =footer>
页脚
< / div>
< / div>
< / div>
< / body>
< / html>
Happy New Year everyone! I need help from a more experienced html/css architect. I'm having trouble creating a CSS and Html only(No Javascript) custom layout. That includes:
1. Top sticky header, fully stretched 100% width of the page
2. Left menu that sits under the header and is fully stretched to the bottom of the page in height, and dissapears if you resize the width of the page (media min-width of 845px)
3. a sticky footer that is position next to the left menu but stretched the full remaining width of the page.
This is my layout so far: http://jsfiddle.net/fksxb09y/
My HTML:
<div class="wrap">
<div class="header">STICKY HEADER</div>
<!-- Sidebar -->
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li class="sidebar-brand">
<a href="#">
Start Bootstrap
</a>
</li>
<li>
<a href="#">Dashboard</a>
</li>
<li>
<a href="#">Shortcuts</a>
</li>
<li>
<a href="#">Overview</a>
</li>
<li>
<a href="#">Events</a>
</li>
<li>
<a href="#">About</a>
</li>
<li>
<a href="#">Services</a>
</li>
<li>
<a href="#">Contact</a>
</li>
</ul>
</div>
<!-- /#sidebar-wrapper -->
<div class="content">CONTENT
<br />CONTENT
<br />CONTENT
<br />CONTENT
<br />CONTENT
<br />CONTENT
<br />CONTENT
<br />CONTENT
<br />CONTENT
<br />CONTENT
<br />CONTENT
<br />CONTENT
<br />CONTENT
<br />
<br />CONTENT
<br />CONTENT
<br />CONTENT
<br />CONTENT
<br />CONTENT
<br />CONTENT
<br />CONTENT
<br />CONTENT
<br />CONTENT
<br />CONTENT
<br />CONTENT
<br />CONTENT
</div>
<div class="push"></div>
</div>
<div class="footer">STICKY FOOTER</div>
My CSS:
> html, body, .wrap { height: 100%; } .wrap { box-sizing:border-box; }
>
> form {height:100%} .wrap { min-height: 100%; height: auto
> !important; height: 100%; margin-bottom: -60px; /* for sticky
> footer to not go below page */ /* for sticky header to not overlap
> content */ } .push, .footer { height: 60px; } .footer {
> background-color: green; height: 60px; width: 100%; position:
> fixed; bottom: 0; } .content { padding-top: 60px; height:100%
> !important; background-color: yellow; } .header {
> background-color: blue; height: 60px; width: 100%; position:
> fixed; top: 0; }
>
>
> #sidebar-wrapper {
> z-index: 1000;
> position: fixed;
> left: 250px;
> width: 0;
> height: 100%;
> margin-left: -250px;
> overflow-y: auto;
> background: #000;
> -webkit-transition: all 0.5s ease;
> -moz-transition: all 0.5s ease;
> -o-transition: all 0.5s ease;
> transition: all 0.5s ease; }
>
> #wrapper.toggled #sidebar-wrapper {
> width: 250px; }
>
> #page-content-wrapper {
> width: 100%;
> position: absolute;
> padding: 15px; }
>
> #wrapper.toggled #page-content-wrapper {
> position: absolute;
> margin-right: -250px; }
>
> /* Sidebar Styles */
>
> .sidebar-nav {
> position: absolute;
> top: 0;
> width: 250px;
> margin: 0;
> padding: 0;
> list-style: none; }
>
> .sidebar-nav li {
> text-indent: 20px;
> line-height: 40px; }
>
> .sidebar-nav li a {
> display: block;
> text-decoration: none;
> color: #999999; }
>
> .sidebar-nav li a:hover {
> text-decoration: none;
> color: #fff;
> background: rgba(255,255,255,0.2); }
>
> .sidebar-nav li a:active, .sidebar-nav li a:focus {
> text-decoration: none; }
>
> .sidebar-nav > .sidebar-brand {
> height: 65px;
> font-size: 18px;
> line-height: 60px; }
>
> .sidebar-nav > .sidebar-brand a {
> color: #999999; }
>
> .sidebar-nav > .sidebar-brand a:hover {
> color: #fff;
> background: none; }
>
> @media(min-width:768px) {
> #wrapper {
> padding-left: 250px;
> }
>
> #wrapper.toggled {
> padding-left: 0;
> }
>
> #sidebar-wrapper {
> width: 250px;
> }
>
> #wrapper.toggled #sidebar-wrapper {
> width: 0;
> }
>
> #page-content-wrapper {
> padding: 20px;
> position: relative;
> }
>
> #wrapper.toggled #page-content-wrapper {
> position: relative;
> margin-right: 0;
> } }
As you see I'm having problems filling up the entire height of the content section without the white space at the bottom when I stretch it.
The left column layout covers the header and footer instead of the header being placed on top and the footer to the side of the left column.
I'm hopelessly stuck right now, and need help in figuring out this layout. Any help or tips in the right direction will be greatly appreciated. Thank You!
UPDATE 1: Almost solved the problem thanks to @DaMaGeX http://jsfiddle.net/fksxb09y/9/
Now I just need to figure out:
1. Why the body leaves a white space at the bottom when resizing.
2. When reisizing the height of the browser window the sticky footer overlaps the header, and the min-height of the content section dissapears. There should be a big enough space for the content when resizing.
UPDATE 2: Now there's another problem that I didn't notice the bottom arrow on the left menu dissapears on resize, and the content on the bottom also dissapears. http://jsfiddle.net/fksxb09y/9/
解决方案
Here's a skeleton that should do the trick:
<!DOCTYPE html>
<html>
<head>
<title>So many stickies!</title>
<style type="text/css">
/* My screen resolution is 1280x1024. I'm sizing elements relative to that */
body {
margin: 0px;
overflow: hidden;
}
#header {
background-color: yellow;
width: 100%;
position: fixed;
top: 0px;
height: 50px;
}
#left {
background-color: blue;
height: auto;
position: absolute;
top: 50px;
left: 0px;
width: 280px;
max-height: 974px;
overflow: auto;
}
#right {
height: 974px;
width: 1000px;
position: absolute;
top: 50px;
left: 280px;
}
#bodyContent {
width: 100%;
overflow: auto;
height: auto;
max-height: 874px;
position: relative;
top: 0px;
}
#footer {
width: 100%;
background-color: red;
height: 100px;
position: fixed;
bottom: 0px;
}
</style>
</head>
<body>
<div id="header">
Your header.
</div>
<div id="content">
<div id="left">
<p>This is a paragraph</p>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
</div>
<div id="right">
<div id="bodyContent">
The body
</div>
<div id="footer">
The footer
</div>
</div>
</div>
</body>
</html>
这篇关于将一个粘滞的页脚放在粘滞标题下的固定左列旁边的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
