I'm trying to understand the trick in https://www.google.com/.
The bottom bar has position: absolute; bottom: 0; but if you minimize window's height it stays ("stacks") under the logo/input.
Of course this is something doable with js but is it with pure CSS?
My question is is there any CSS trick that can create this "stack effect", if so how can this be done?
I tried to understand if the <span>Google Logo</span> <div>Bottom bar</div> does the trick but I guess no.
A clean way of doing this is to set a bottom margin on the body that is equal to the footer height.
Here's your css:
html {
position: relative;
min-height: 100%;
}
body {
margin: 0 0 100px; /* bottom = footer height */
}
footer {
position: absolute;
left: 0;
bottom: 0;
height: 100px;
width: 100%;
}
And the HTML:
<html>
<head>
<title></title>
</head>
<body>
<nav></nav>
<article>Lorem ipsum...</article>
<footer></footer>
</body>
</html>
Here's an example of this approach: http://mystrd.at/data/sticky_footer.html
It's because they set a padding-bottom value equal to the height of the footer in order to displace it.
.content {
padding-bottom: 35px;
}
See.. padding-bottom:35px = height:35px
#footer {
bottom: 0;
font-size: 10pt;
height: 35px;
position: absolute;
width: 100%;
}
Related
When I position a fixed div inside of a relative div, and align the fixed div to the bottom of the viewport, then attempt to scroll past the bottom in mobile Safari (iOS 13) I get a strange effect. It looks as though the div becomes obscured by a white rectangle. Is there any way to prevent this behavior without changing the position of the outer or inner divs?
.outer {
position: relative;
z-index: 1;
display: block;
height: 100%;
overflow: auto;
padding: 5px;
}
.inner {
color: white;
position: fixed;
right: 0;
bottom: 0;
left: 0;
z-index: 1030;
width: 100%;
background: blue;
}
<html>
<head>
</head>
<body>
<div class="outer">
<div class="inner">
test test test <br/> test test test
</div>
</div>
</body>
</html>
The .inner content goes outside the boundaries of the .outer wrapper.
You'd need to set overflow to visible on the .outer parent to make its content visible outside of its relative parent.
See the result : https://codepen.io/romainpetit/pen/BaNLaZr
Tested.
.outer {
position: relative;
z-index: 1;
display: block;
height: 100%;
overflow: auto;
padding: 5px;
}
.inner {
color: white;
position: fixed;
right: 0;
bottom: 0;
left: 0;
z-index: 1030;
width: 100%;
background: blue;
}
I am trying to get my footer to be at bottom of page, header at top of page and section in the middle of page. But all I get is the red footer displayed on top of page. The background wrapper should be gray but that doesn't work either. Please help. Thank you.
Here is the css:
body {
margin: 0 auto;
}
#wrapper {
position: relative;
background-color: gray;
height: 100%;
width: 100%;
}
header {
position: absolute;
top:0;
width: 100%;
height: 20px;
background-color: red;
}
section {
position: absolute;
width: 100%;
height: 100px;
margin-top: auto;
margin-bottom: auto;
}
footer {
position: absolute;
bottom: 0;
width: 100%;
height: 20px;
background-color: blue;
}
below is the body of the html:
<body>
<div id="wrapper">
<header>
</header>
<section>
</section>
<footer>
</footer>
</div>
</body>
Just add this to html/body:
html, body {
height: 100%;
}
You should have to use position: absolute;. It tends to mess up all of your spacing when used in parent elements like that. The section section will be placed right over the header section because it hasn't been positioned at all.
Try just giving the section a min height and removing the position attributes.
Hope this helps.
You were close. Replace the CSS definition for <body>:
html, body{
margin: 0 auto;
width: 100%;
height: 100%;
}
make this in following class in your code :
html {
height: 100%;
}
body{
margin: 0 auto;
height: 100%;
}
section{
position: absolute;
width: 100%;
height: 100px;
top:20px;
}
DEMO
Remove the position absolute from the header, footer and section. I think it might be it.
I have what is a fairly common page layout where the content div is centralised on the page using margin:auto 0. The width of the div itself varies depending on available page width.
I want another div featuring a logo to 'stick' to the outside left hand side of this div (ie no gap or overlap between the two) at a fixed height. What CSS should I use for this?
something like
html:
<html>
<div id='content'>
<div id='stickything'>a</div>
</div>
</html>
css:
html {
width: 100%;
}
#content {
position: relative;
width: 100px;
height: 600px;
margin: auto;
background-color: green;
}
#stickything {
position: fixed;
width: 25px;
height: 30px;
top: 0px;
margin-left: -25px;
background-color: red;
}
http://jsfiddle.net/Kkcnn/
Use position:absolute. It must help:
.container-div{
position: relative
}
.outer-div{
position:absolute;
top: 0 (your choice)
left: -/outer div's width/
}
I want:
<div style="height:100%">
<div style="height:70px;">header</div>
<div style="overflow-y:scroll;">main</div>
<div style="height:60px;">footer, alw. at bottom parent-div</div>
</div>
The real (px) container height may change dep on client window-size,
height of footer and header set in css-theme.
All positioning should be relative. Is JS required to solve this?
(Tried height:auto on main, seem to have no effect.)
You can use absolute positioning to achieve this quite easily, why should it be positioned relative?.
#header, #main, #footer {
left: 0;
right: 0;
position: absolute;
}
#header {
top: 0;
height: 70px;
background-color: yellow;
}
#main {
top: 70px;
bottom: 60px;
background-color: lime;
overflow: auto;
}
#footer {
bottom: 0;
height: 60px;
background-color: red;
}
JSFiddle: http://jsfiddle.net/Tg8g5/
I'm trying to figure out how to have a floating navigation bar to the left of the content, that is fixed width but has a container around it that extends to the edge of the viewport while keeping the content centered on the page.
And here's what I got going so far and an image of what I mean. http://dl.dropbox.com/u/23132/index.html
Any help or ideas?
Got a solution from Bordingo.
<html>
<head>
<style type="text/css">
html, body { height: 100%; min-width: 960px;}
.container { width: 960px; height: 100%; margin: 0 auto; background: #ddd; }
.nav-fix { position: absolute; left: 0; width: 50%; min-width: 480px; height: 100%;}
.nav { position: absolute; top: 100px; right: 280px; width: 9999px; height: 200px; background: #333; }
.nav-box { position: absolute; top: 10px; right: 10px; width: 180px; height: 180px; background: #eee; }
</style>
</head>
<body>
<div class="nav-fix">
<div class="nav">
<div class="nav-box"></div>
</div>
</div>
<div class="container"></div>
</body>
</html>
If you are willing to use jQuery, you can pretty easily calculate the offset of the main body and adjust the width/padding/margin of the sidebar accordingly.
Simple example
http://dl.dropbox.com/u/1588084/floatmenu.htm