I'm having a bit of a problem with this design. The page is supposed to start with an image that is focused in the middle of the viewport, then you scroll down below the fold to see more content. I have it working with the code below but there's one issue. The scrollbar throws the viewport image off center. Does anyone know how to fix this? keep in mind, I still want the scrollbar there.
I don't know if this is possible. But could I use jquery to subtract the scrollbar width from the site only if scrollbar is active? I don't really know how to use jquery though. And I feel that if I subtract scrollbar width from 100vw then the site will look off on mobile when there is no scrollbar.
html {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
body {
min-height: 100%;
overflow-x:hidden;
}
#abovefoldcontainer {
background-color: red;
width: 100vw;
height: 100vh;
}
#abovefoldimage {
background-color: #6FF;
position: relative;
left: 150px;
top: 150px;
width: calc(100vw - 300px);
height: calc(100vh - 300px);
}
#belowfold {
}
<html>
<body>
<div id="abovefoldcontainer">
<div id="abovefoldimage">Content goes here</div>
</div>
<div id="belowfold">
Content goes here too<br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
</body>
</html>
Related
I want to have a vertically aligned layout(mobile). It consists of a main part (the main content) which should be in the middle. On the top and bottom of this part there should be like 200px of free space till the edge of the page (yeah like top: 200px). But in this parts there should be some text and it shouldn´t move.
This picture should explain it:
If something is not clear feel free to ask!
Code:
I tried it with "vh values"
#container {
margin-top: 10vh;
margin-bottom: 10vh;
width: 100vw;
height: 80vh;
}
<div id="container"></div>
so that's the basic thing, and if I do it like this:
#container {
width: 100vw;
height: 80vh;
}
#top {
width: 100vw;
height: 10vh;
}
#bottom {
width: 100vw;
height: 10vh;
}
<div id="top></div>
<div id="container"></div>
<div id="bottom"></div>
then it won´t fit in my screen, it's always a little bit too big so that I have to scroll...
Does someone of you have other ideas or improvents to solve this?
* {
padding: 0;
margin: 0;
}
body {
min-height: 100vh;
position: relative;
}
header,
footer {
width: 100%;
height: 100px;
background-color: rgba(0, 0, 0, .8);
position: fixed;
color: #fff;
font-size: 80px;
text-align:center;
z-index: 10;
}
header {
top: 0;
}
footer {
bottom: 0;
}
main {
min-height: 100vh;
padding: 100px 200px;
position: absolute;
top: 0;
box-sizing: border-box;
}
<header>I'm a header</header>
<main>
<p>I need your help ones again... So I want to have a (mobile) layout which is vertically aligned. It consists of a main part (with the main content) which should be in the middle. On the top and bottom of this part there should be like 200px of free space till the edge of the page (yeah like top: 200px). But in this parts there should be some text too & it shouldn´t move.
</p>
<br>
<p>
I need your help ones again... So I want to have a (mobile) layout which is vertically aligned. It consists of a main part (with the main content) which should be in the middle. On the top and bottom of this part there should be like 200px of free space till the edge of the page (yeah like top: 200px). But in this parts there should be some text too & it shouldn´t move.
</p>
</main>
<footer>I'm a footer</footer>
I have a problem with sticky footer which has absolute position,
<div class="wrapper">
<div class="content">
<p>Content</p>
</div>
<div class="footer">
Footer
</div>
</div>
body {
height: 100%;
min-height: 100%;
overflow: hidden;
width: 100%
}
.wrapper {
position: absolute;
margin: 0;
padding: 0;
min-height: 100%;
height: 100%;
width: 100%;
overflow: auto;
background: blue;
}
.footer {
position: absolute;
bottom: 0;
height: 100px;
width: 100%;
background: red;
}
When I do scroll down my footer also scrolled, when I remove height:100% footer works fine but I need height:100% for my scroll bar for wrapper because I disabled it in body (I need do it). I want to retain height:100% for body and .wrapper but that footer was always at bottom. How can I do it using css ?
i got the same issue, use height: 100vh; i hope works for you!
If you need your footer to always be at the bottom look at this fiddle: http://jsfiddle.net/2n9okg1b/3/
In the fiddle I amd using poition: fixed; in the footer CSS. Fixing the position tells the browser to always keep the elements where you defined them to be.
Update
I have updated the fiddle link. http://jsfiddle.net/2n9okg1b/3/
With this update I detect with jQuery if the footer is below the window. If the footer is below the window I set the footer position to fixed. If the footer is not below the window I set the footer's position to relative. This allows the footer to always be at the bottom of the content or at the bottom of the window.
There're 2 divs - top and bottom.
The bottom should serve as a 'buttons pane', so visible and 'pinned' to bottom border at all times. root div is a Kendo UI Window div (see jsbin fiddle)
The problem is that the scrollbar is not being shown ONLY for the top div, but for 'buttons pane' as well. In the given jsbin resize down the window vertically, so the scrollbar appears:
http://jsbin.com/UrasoKi/3/edit
<style scoped>
#top{
min-height: 500px;
width: 100%;
background-color: blue
}
#bottom{
height: 50px;
width: 100%;
background-color: green;
position: absolute;
bottom: 0px;
/*kendo specific margin indentation, ignore*/
margin: 0 0 0 -9px;
}
</style>
<div id="w">
<div id="top">TOP PANE</div>
<div id="bottom">BOTTOM PANE</div>
</div>
I would like to achieve clear bottom div positioning with css. Scrollbar should appear for TOP panel ONLY.
Elements MUST BE positioned INSIDE <div id='w'/> in fiddle (because of telerik kendo window resize handles) AND BE RESIZABLE, so any extra volume would be given to the top pane. But extra divs could be added into it (into div id="w")
I've been trying to play around for hours, something is missing.
I would tweak as follows to provide the sort of functionality you want:
<body>
<style scoped>
#top{
height: 100%;
width: 100%;
}
#bottom{
height: 50px;
width: 100%;
background-color: green;
position: absolute;
bottom: 0px;
/*kendo specific margin indentation, ignore*/
margin: 0 0 0 -9px;
}
#inner {
overflow-y:scroll;
height: 100%;
background-color: blue
}
</style>
<div id="w">
<div id="top"><div id="inner">TOP PANE</div></div> <div id="bottom">BOTTOM PANE</div>
</div>
<script>
$(document).ready(function() {
$('#w').kendoWindow({
width: '450px'
});
$('.k-window-content').css({'overflow':'hidden', scrollable: false })
});
</script>
</body>
The tweaks include fixing the size of the Kendo Window and adding an inner div with fixed height and overflow-y scrolling for the top panel.
I hope this helps...
The attribute min-height: 500px; is causing the window to show a scrollbar. You would want to put the two divs in another div with a fixed min-height and then give the two divs a fixed min-height
Edit:
Edited your fiddle, see if that is what you need.
http://jsbin.com/efOgoVE/10/edit
Imagine an HTML page like the following one:
<body>
<div class="main">
<div class="free">aaa</div>
</div>
</body>
The free div is absolutely positioned, and its position is outside the visible area of the browser. Because of that, it will generate an overflow, and scrollbars will be shown. This is ok.
The main div, instead, should be as big as the full area inside the browser. It shouldn't be limited to the visible area.
html, body {
height: 100%
}
.main {
background-color: gray;
width: 100%;
height: 100%;
}
.free {
position: absolute;
width: 100px;
height: 100px;
left: 3000px;
top: 3000px;
}
As you can see here, http://jsfiddle.net/y79NS/12/, the gray div doesn't extend in the "overflow zone". It works if I add a static width/height to html and body elements, but I don't know in advance how much it should be big.
Is there a pure CSS solution? If not, what's the best way to do it with Javascript, keeping in mind that the user could resize the browser in any moment?
You are just missing a semi-colon in your CSS, also use negative margins if you want to hide .free:
html, body {
height: 100%;
}
body {
position: relative;
}
.main {
background-color: gray;
height: 100%;
width: 100%;
}
.free {
position: absolute;
width: 100px;
height: 100px;
left: -3000px;
top: -3000px;
}
http://jsfiddle.net/btipling/y79NS/17/
I'd like a page with a sticky footer, and I'd like the content above it to be scroll-able, while maintaining the stickiness of the footer. But I don't want to hard-code the height of the content area, but instead would like its height to be all the available height except for the height of the footer.
In the long run I would even like for the height of the scroll-able content area to be re-sizable if the window is re-sized, but I'm getting ahead of myself. I'm presuming I'm going to need a combination of CSS and Javascript to acheive this, that CSS alone cannot acheive it?
I've researched of course and have found the CSS overflow property, but my CSS in general is not very good :( Below is some CSS/HTML I've cobbled together based on ryanfait.com's sticky footer tutorial, if somebody can give me some advice using this as a starting point. Bear in mind, I will need straight Javascript, not jQuery, as this will be used in a custom browser (http://tkhtml.tcl.tk/hv3.html). My Javascript unlike my CSS though is pretty good, so an answer combining specific CSS suggestions with general Javascript suggestions (which I will then flesh out), would be ideal.
<html>
<head>
<style>
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
}
.footer, .push {
height: 4em;
}
</style>
</head>
<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>
</html>
EDIT: What I've attempted based on first two answers:
I've made the following modifications to the CSS based on parts of the two answers received so far:
<style>
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
overflow-y: scroll;
}
.footer {
bottom: 0;
height: 4em;
position: fixed;
}
</style>
What this gives me in Chrome are two scrollbars, one very faint, but the more prominent one still allowing content that overflows (maybe I'm using the term incorrectly?) outside of the wrapper area, and over the top (or under the bottom) of the footer, plus outside the entire body. Thanks for help making progress but I still need quite a bit of help. Here's a link to a screenshot of what I'm seeing; I used http://www.ipsum-generator.com/ to generate all the content.
http://dl.dropbox.com/u/44728447/dynamic_wrapper_sticky_footer.JPG
html, body {
height:100%;
overflow:hidden;
}
.wrapper {
overflow-y:scroll;
height: 90%;
}
.footer {
position:static;
bottom: 0;
height: 10%;
}
Demo: http://jsfiddle.net/vfSM3/
On the footer div use position fixed and bottom 0 like:
.footer {
bottom: 0;
height: 4em;
position: fixed;
}
If you want to use fixed height on the footer, you could do the following
.wrapper{
overflow-y:scroll;
height:calc(100% - 20px);
}
.footer {
position:static;
bottom: 0;
height: 20px;
}
Note that you need to use the spaces here "100% - 20px" in order for it to work.