I am trying to have a webpage with a parallax screen and on the top a navigation bar. I have tried, everything I know and I cant get it to work.
The problem is caused by perspective:1px; in the body. Delete that line and position:fixed works but removing the perspective:1px break your parallax. Any transform css will cause position:fixed to revert to position:relative.
Is this effect on position: fixed necessary? If so, need to go into
more detail here about why fixed positioned objects should do this,
i.e., that it’s much harder to implement otherwise. See Bug 16328. https://www.w3.org/TR/css-transforms-1/#perspective-property
Instead of putting perspective:1px in the body which effects everything, you could put it in a wrapper div like this:
<div style="scrolling-content">
... the bits that scrolls...
</div>
and the css...
.scrolling-content {
width: 100vw;
height: calc(100vh - 70px);
overflow-y: scroll;
overflow-x: hidden;
perspective: 1px;
margin-top: 70px;
}
The 70px is the height (inclusive of padding) of your navigation bar.
Also set the body
body {
scroll-x:hidden;
scroll-y:hidden;
}
The problem is the overflow-y option on the style for body.
You could do the following:
Wrap both divs with class="section" in a seperate div, like this:
<div id="example">
<div id="title" class="section header">
<h1>Test</h1>
</div>
<div id="section1" class="section">
<div class='text'>
<p>test</p>
</div>
</div>
</div>
Then remove the overflow options from body and put them in the style for #example, like this:
#example {
height:100%;
overflow-y: scroll;
overflow-x: hidden;
perspective:1px;
}
Related
I'm building an angular application that frequently uses nested views. Certain views, however, are taller than the other elements on the page and end up extending well beyond the end of the parent view.
I'm using Ryan Fait's Sticky Footer so I have a wrapper around a containing div set to height:100% and I would have expected the page to just adapt and move the footer to the bottom of the nested view however I'm seeing the style elements of the footer border and background-color are remaining at end of the parent div while the content of the footer is being pushed to the end of the nested div.
Including an image as I'm struggling with getting the language exact:
I'm really looking for any solution from fixing the css to something that seems hackier like changing the footer or using ng-if/ng-class on certain pages. I'm imagining I'm misunderstanding something about CSS/UI-Router but I can't really track it.
The code isn't really interesting but here is it?
CODE
.wrapper {
min-height: 100%;
margin-bottom: -50px;
}
.push {
height: 50px;
}
.footer {
display: block;
height: 50px;
}
.nested {
max-height: 500px;
}
<body>
<div class="wrapper">
<div>
<h1>Some text</h1>
<ui-view class="nested"></ui-view>
</div>
<div class="push"></div>
</div>
<footer class="footer">
<span>some copy</span>
</footer>
</body>
If you use percentage values for height (i.e. a relative height), the parent element heights have to be defined too. In your case you also need height: 100% on body and html, like
html, body {
height: 100%;
}
I have been banging my head against the wall trying to figure out this problem and I have looked high and low for the answer and came up with similar results.
Synopsis
The problem is that I am building a website using the 960 grid and have three columns that I want to stretch at 100% at all times. Here is a fiddle for your reference: http://jsfiddle.net/Uec7h/1/
Essentially the html is like so:
<div class="contentWrapper">
<div class="container_12">
<div class="grid_2 leftSide clearfix">
Left sidebar content.
</div>
<div class="grid_7 content">
Lots of content loaded from the server.
</div>
<div class="grid_3 rightSide">
Right sidebar content.
</div>
</div>
</div>
with the CSS being like
html, body {
height: 100%;
}
.content {
height: 100%;
}
.leftSide {
height: 100%;
background-color: #000000;
}
.rightSide {
height: 100%;
background-color: #000000;
}
.contentWrapper {
height: 100%;
}
The fiddle isn't completely accurate to what I am seeing on my local version, but it's close. Seems like the left and right sidebars do not want to expand to 100% no matter what I do.
What I've Tried
Most of the answers I have found on SO have suggested to put height: 100% on the html, body elements and everything should work out fine. Adding this attribute and giving both sidebars height: 100% did work a little bit, but if the content in the middle column gets too big, it stops at a certain point and won't continue to stretch.
I have tried adding the clearfix class that comes with the 960 grid but it didn't seem to help at all.
Question
How do I get the left and right side bars height in the fiddle to be 100% no matter what content is in the middle column?
If you add the following CSS to the sidebar elements it will fill the 100% of the height.
display:block;
height:auto;
position:absolute;
top:0px;
bottom:0px;
If you place the sidebar into a wrapper div with relative positioning, the content section will be again in it's right place...
I would also set padding and margin to 0 for the body.
EDIT:
If you add height: 100% to the .container_12 it will get a real height, and children elements can have a 100% height. Notice that the sidebars will be as height as the window itself, but your content at the middle can be taller than 100%... Fiddle
Dont know the 960 grid, the EDITED solution - using visibility: visible; -
HTML
<div id="box">
<div class="vision"> sdfsdfsd </div>
</div>
CSS
#box {
float: left;
border: 2px solid red;
}
.vision {
width: 300px;
height: 600px;
visibility: visible;
}
So I wanted a sticky footer on a page and got this one to work for me. All is well, but no, not really..
The problem is that I wanted the content above the footer to stretch all the way down to it. Now the box containing the main content end just after the text in the box, and there's a large space between the footer and the content. What I want is the background of the main content to stretch down to the footer!
See my beautiful image!
This is what I have right now in html:
<div id="wrap">
<!-- start header -->
<div id="header">
<div id="header-content">
</div>
</div>
<!-- end header -->
<!-- start main -->
<div id="main">
<div id="main-content">
</div>
</div>
<!-- end main -->
</div>
<!-- start footer -->
<div id="footer">
</div>
And in css:
html {
height: 100%; }
body {
height: 100%;}
/* wrap */
#wrap {
min-height: 100%; }
/* main */
#main {
background-color: #43145c;
overflow: auto;
padding-bottom: 50px; }
#main-content {
width: 720px;
margin: auto;
background-color: #643280;
padding-top: 20px; }
#footer {
position: relative;
margin-top: -50px;
height: 50px;
clear: both;
background: red; }
I tried setting min height of main to 100%, but didn't work. I just want the backgroundcolor of main-content all the way down to footer, since it's different to the body and main box.
Does it make any sense? Can anyone help?
I know this was asked 6 months ago, but I've been searching for the solution to this problem for quite a while now and hope other people can benefit from the solution I employed being archived. You were spot on when you said that somehow the main box needs to get the min-height of the space between the header and footer.
Unfortunately, I don't know how this can be done with pure CSS, it's quite easy with javascript of course but that solution is not always viable, and it's kind of messy in terms of code separation. The good news is that depending on what you need to do, there is a CSS hack you can employ.
What I did was add an absolutely positioned element below body that essentially stretched from below the header to above the footer.This way I could add a background or a gradient on this #divBelowBody that essentially allowed me to pretend this problem is solved (although this solution leaves a bitter taste in my mouth).
In addition, if you wanted to add a border around your content div and were hoping that it extended to the footer even when content was small, you're screwed (although not really, I can probably think of a hack or two to make this workable), so it only works if you were hoping to add a background or gradient etc.
You can see the code in action here:
http://jsfiddle.net/qHAxG/
Expand the result section horizontally to more clearly see what's going on.
Try this:
Replace your HTML and BODY Styles in the Style Sheet with this:
html,body {height: 100%;}
Then replace your "wrapper" with this:
#wrap {
min-height: 100%;
height: auto;
}
Hope that helps.
Try this
HTML
<body>
<div id="wrap">
<!-- start header -->
<div id="header">
<div id="header-content">
</div>
</div>
<!-- end header -->
<!-- start main -->
<div id="main">
<div id="main-content">
</div>
</div>
<!-- end main -->
<div class="push"></div>
</div>
<!-- start footer -->
<div id="footer">
</div>
</body>
CSS
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
/* wrap */
#wrap {
background: green;
height: auto !important;
margin: 0 auto;
}
#wrap,
#main,
#main-content {
margin-bottom: -50px;
min-height: 100%;
height: 100%;
}
/* main */
#main {
background-color: #43145c;
}
#main-content {
width: 720px;
margin: 0 auto;
background-color: #643280;
}
.push, #footer {
height: 50px;
}
#footer {
position: relative;
background: red;
}
see THIS demo: it might be of use. It seems like you want a div with a background color to stretch to the bottom. But the problem with the sticky footer is that it stays at the bottom also - get's out of your way when the content extends past the view-port. So It needs some distance ( height of the content ) to know how when to do that. If that height isn't designated by actual content... 100% isn't really going to do the trick either. because then the "sticky" footer doesn't really work... it would be off the screen. What is it really 100% of ?
this whole thing has frustrated me for a year... but I always find a way to make it look the way I want even if I can't get it to function the way I want... hopefully that link demo above will maybe lend another piece to the puzzle. Good Luck !
Here is my problem, I am using a layout that has a sticky footer (using the cssstickyfooter.com method). inside my container div i have a content div that has four other divs inside of it. like so:
<div class="container">
<div class="content">
<div id="1"></div>
<div id="2"></div>
<div id="3"></div>
<div id="4"></div>
</div>
</div>
<div class="footer"></div>
In order for the sticky footer to work correctly all of the divs need to have position:relative; set, because the divs will have content that will be different lengths and they need to re-size accordingly. however where my dilemma begins is that i need to have divs 1-4 have position:absolute; set, so that they will stack on top of each other having the same (x,y) position.
is there any way to achieve what i need?
I recommend Ryan Fait's sticky footer, works very well!
* {
margin: 0;
}
html,
body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
/* This line and the next line are not necessary unless you need IE6 support */
height: 100%;
margin: 0 auto -20px;
/* the bottom margin is the negative value of the footer's height */
}
.footer,
.push {
height: 20px;
/* .push must be the same height as .footer */
}
<body>
<div class="wrapper">
<p>Your website content here.</p>
<div class="push"></div>
</div>
<div class="footer">
<p>Copyright (c) 2008</p>
</div>
</body>
I typically just use the following to "stick" a div to the bottom of the page (or container):
.footer {position:absolute;bottom:0;left:0;}
Once you set position to absolute, it becomes independent of external divs and their position/dimensions.
I have a absolutely position div that is overlapping a containers background due to it having a larger height. This div is sharing the container with a body div that's sitting happily to the left of it.
Is there a way to extend the container to be the height of the absolutely positioned div, rather than the body content?
Or should I just float the divs side by side and chuck a <div style="clear: both"></div> at the bottom of the two? Seems like a messy hack to get a container to extend :/
EDIT: Comments don't seem to like code structure. So I'll edit it into here as well.
The layout is:
<div id="content">
<div class="container">
<div id="header"></div>
<div id="main">
<div id="column-1"></div>
<div id="column-2"></div>
</div>
</div>
</div>
#content has a repeated background and #container sets the fixed width of the page. #header sits up to for the links and #main holds the two columns which have the main content for the page. I can't get those two columns to sit next to each other (float / absolutely) whilst having the #content's background repeat down below them
With this layout:
<div id="content">
<div class="container">
<div id="header"></div>
<div id="main">
<div id="column-1"></div>
<div id="column-2"></div>
</div>
</div>
</div>
your basic CSS should be something like:
html, body, div { margin: 0; padding: 0; border: 0 none; }
body, #content { height: 100%; }
#main { overflow: hidden; }
#column-1 { float: left; width: 300px; }
#column-2 { float: left; width: 600px; }
You said you wanted the background image appearing below the content. From this I assume you mean you want the page to be full screen height (minimum).
The point of absolute positioning is that it removes the element from the normal flow so no you can't have it's "container" extend to include it because technically it has no container.
Absolute positioning has its place but 9 times out of 10 I get better results with a float-based layout. But I can't really say more without more information.