URL: http://test.getfamo.us/
Problem: I like when you scroll down how the header stays in place at the top off the page, howver with the footer I would prefer it if it only displayed when you scrolled all the way to the bottom of the page (so the position isnt fixed in place as it is now, but rather at the very bottom of the page).
This is the CSS associated with the footer:
#foot{
left:0px;
right:0px;
color:white;
position:fixed;
height:50px;
background-color:#444444;
width:100%;
margin-bottom:0px;
bottom:0px;
margin-right:0px;
z-index:103;
}
#foot a{
height:50px;
width:75px;
float:left;
color:white;
text-align:center;
text-decoration:none;
line-height:25px;
}
#foot p{
position:absolute;
width:150px;
height:50px;
right:0px;
margin-bottom:0px;
margin-right:0px;
margin-top:0px;
bottom:0px;
top:0px;
}
Thanks a lot guys! Hopefully its a simple fix.
Also if necessary full CSS available here: http://test.getfamo.us/css/
Right, I gave you the link but if you are having trouble take a look at this. Using your code and the link I gave you we can create this.
HTML:
<div class="page-wrap">
<div id="fillspace"></div>
</div>
<div id="foot"></div>
CSS:
/* Your code */
#foot {
left:0px;
right:0px;
color:white;
height:50px;
background-color:#444444;
width:100%;
margin-bottom:0px;
bottom:0px;
margin-right:0px;
z-index:103;
}
#foot a {
height:50px;
width:75px;
float:left;
color:white;
text-align:center;
text-decoration:none;
line-height:25px;
}
#foot p {
position:absolute;
width:150px;
height:50px;
right:0px;
margin-bottom:0px;
margin-right:0px;
margin-top:0px;
bottom:0px;
top:0px;
}
/* New Code */
html, body {
height: 100%;
margin: 0;
}
.page-wrap {
min-height: 100%;
/* equal to footer height */
margin-bottom: -50px;
}
.page-wrap:after {
content:"";
display: block;
}
#foot, .page-wrap:after {
/* .push must be the same height as footer */
height: 50px;
}
#fillspace {
width: 100%;
height: 1000px;
background: #ddd;
}
So put your code with the code in the link I gave you. Then we take away your position: fixed and set the correct heights of the footer to #foot, .page-wrap:after and .page-wrap. That's about it, all done. Take a look at the demo and play around with it.
With content:
DEMO HERE
Without content:
DEMO HERE
Related
If have an iframe in my PhoneGap app. The frame has been given a height of 1000.
By adjusting its width to 50% I can scroll by touching the parent on the space next to the frame. But when I try to scroll by touching the frame itself, there is no response.
I looked for this problem and some issues have been reported that came with a solution including the -webkit-overflow-scrolling: touch; but no luck.
#content_wrap {
display: inline-block;
float:left;
width:100%;
overflow-x:hidden;
position:relative;
height:auto;
z-index:300;
}
#content_wrap .content_container {
position:absolute;
left:0px;
display:inline-block;
float:left;
width:100%;
padding:0;
min-height:100%;
height:auto;
background-color:#FFF;
}
#tickets {
display:inline-block;
float:left;
width:50%;
margin:0px;
height:auto;
}
#ticketFrame {
height:1000px;
display:inline-block;
float:left;
width:100%;
}
The html:
<div id="content_wrap">
<div class="content_container">
<div id="tickets">
<iframe src="someurl" frameborder="0" id="ticketFrame"></iframe>
</div>
</div>
</div>
I am a fan of using display inline block and float left as u can see ;)
What to do to be able to scroll with touchscreen in phonegap?
maybe problem is your iframe tag? </iframe">
if its not, add/change your css and try again.
html, body {
height: 100%;
min-height: 100%;
margin: 0;
padding: 0;
}
#content_wrap {
display: inline-block;
float:left;
width:100%;
overflow-x:hidden;
position:relative;
height:100%;
z-index:300;
}
#content_wrap .content_container {
position:absolute;
left:0px;
display:inline-block;
float:left;
width:100%;
padding:0;
min-height:100%;
height:auto;
background-color:#FFF;
}
#tickets {
display:inline-block;
float:left;
width:50%;
margin:0px;
height:100%;
right: 0;
bottom: 0;
left: 0;
top: 0;
-webkit-overflow-scrolling: touch;
overflow-y: scroll;
}
#ticketFrame {
height:1000px;
display:inline-block;
float:left;
width:100%;
}
Hello I'm trying to convert an old web site from frames to div's. The code below is the css for the div's. The issue that I'm having is the content div, the results goes past the bottom of the div. I would like it to have the height of %100 cause it need to work with several differnt screeen resolutions. Any help fixing it would be great.
Thanks
<style>
#wrapper {
width:100%;
top:0; bottom:0; right:0; left:0;
padding:0;
margin: 0 auto;
position: absolute;
}
body {
margin:0;
padding:0;
}
#header{
width:100%;
background-color:#fff;
}
#menu{
background-color:#fff;
width:100%;
height:100%;
position:fixed;
resize: both;
}
#content{
width:100%;
float:none;
height:100%;
background-color:#fff;
overflow: auto;
resize: both;
position: fixed;
box-sizing:border-box;
}
#footer{
width:100%;
position: fixed;
bottom: 0;
background-color:#fff;
}
</style>
Can't figure out why it's too tall, sorry:
html {
min-height:100%;
position:relative;
}
body {
height:100%;
background-color:darkblue;
background-image:url(background.png);
background-repeat:repeat-y;
background-position:center center;
background-size:100% 100%;
padding:0;
margin:0;
}
#wrapper {
width:65%;
top:0; bottom:0; right:0; left:0;
background-color:#bad6e8;
border:2px solid black;
padding:0;
margin: 0 auto;
}
#header {
width:100%;
height:10%;
background-color:#bad6e8;
border-bottom:2px solid black;
padding:2px;
}
#user {
width:25%;
height:250px;
background-color:#bad6e8;
border-right:2px solid black;
border-bottom:2px solid black;
float:left;
padding:2px;
}
#menu {
width:100%;
height:35px;
background-color:#bad6e8;
border-bottom:2px solid black;
padding:2px;
margin-bottom:2px;
}
#content {
width:100%;
height:100%;
background-color:lightblue;
}
and:
<html>
<head>
<title>Playdux</title>
<link rel="stylesheet" type="text/css" href="design.css">
</head>
<body>
<div id="wrapper">
<div id="header">
Header
</div>
<div id="content">
<div id="user">
Usermenu
</div>
<div id="menu">
Menü
</div>
Content
</div>
</div>
</body>
</html>
The "wrapper" div should go all the way from the top of the page to the bottom. Stopping there, unless it has enough content to go beyond that.
But, without enough content, it's just way over the limit. My CSS is kinda messed up now because I tried to figure it out all the time.
To extend the wrapper from top to bottom, you must position: absolute or position: fixed
#wrapper {
width:65%;
position: absolute;
top:0; bottom:0; right:0; left:0;
background-color:#bad6e8;
border:2px solid black;
padding:0;
margin: 0 auto;
}
You must also remove height: 100% from content. Because this is interpreted as 100% of the containing block, which is wrapper in this case
#content {
width:100%;
background-color:lightblue;
}
See full JSFiddle
Another way to do this, would be dropping top:0; bottom:0; right:0; left:0;
and do just height: 100%
html, body {
height: 100%;
}
#wrapper {
height: 100%;
}
See another JSFiddle
Given the following HTML:
<div id="wrapper">
<div id="header">*header*</div>
<div id="content">*content*</div>
<div id="footer">*footer*</div>
</div>
And the following CSS:
#wrapper {
min-height:100%;
position:relative;
}
* {margin:0;padding:0;height:100%;}
#header {
width:100%;
height:auto;
margin-top: 0;
}
#content {
width:100%;
height: auto;
margin:0;
margin-top:0;
margin-bottom:0;
}
#footer {
width:100%;
height:auto;
position:absolute;
margin-top: 0;
margin-bottom: 0;
bottom:0;
left:0;
}
There is a gap between the content and the footer's div. How can I set that the content's height must be all the space between the header and the footer?
The footer has to have the 'absolute' position to position is at the bottom of the page.
Try using display:table, table-row options
display:table to #wrapper
display:table-row to #header, #content (width and height should be 100% here) and #footer
#wrapper {
min-height:100%;
position:relative;
display: table;
width:100%
}
#header {
width:100%;
height:auto;
margin-top: 0;
background:#dbfcd6; display: table-row;
}
#content {
width:100%; display:table-row; background:green; height:100%
}
#footer {
width:100%;
height:auto;
position:absolute;
margin-top: 0;
margin-bottom: 0;
bottom:0;
left:0; background:yellow;
display: table-row;
}
DEMO
It is because your footer has a bottom:0 and its position is absolute.This will make it stuck at the bottom.
You should give your content a min height-and max-height like this:
#content {
background-color:red;
width:100%;
min-height:450px;
max-height: auto;
margin:0;
margin-top:0;
margin-bottom:0;
}
Then change the position of the footer to relative
Check out this fiddle : )Check me!
For the last days I had some issues with a specific layout I want for a website. I have added an image to explain the layout and also some CSS code I have been trying out with below. I tried using floating layout, absolute positioning and all kinds of combinations to fix the layout but I can't seem to get it right. I hope any of you guys could help me out with this.
Here is the layout image:
Here is the CSS code:
html, body {
overflow:hidden;
}
* {
margin:0;
padding:0;
}
.header {
background-color:#CCC;
position:fixed;
left:0;
top:0;
width:100%;
height:40px;
}
.wrapper {
position:absolute;
width:100%;
top:40px;
bottom:40px;
}
.left {
float:left;
overflow-y:scroll;
width:30%;
min-width:300px;
height:100%;
}
.right {
float:left;
overflow-y:scroll;
right:0;
width:70%;
height:100%;
}
.footer {
background-color:#000;
position:fixed;
bottom:0;
left:0;
width:100%;
min-width:500px;
height:40px;
}
Is this what you wanted? DEMO
REMOVE
.wrapper
{
position:absolute;
width:100%;
top:40px;
bottom:40px;
}
.left
{
float:left;
overflow-y:scroll;
width:30%;
min-width:300px;
height:100%;
}
.right
{
float:left;
overflow-y:scroll;
right:0;
width:70%;
height:100%;
}
REPLACE WITH
div.left,
div.right {
display:inline;
float: left;
position: relative;
height: 100%;
overflow-y: scroll;
}
.left {
width: 30%;
}
.right {
width: 70%;
}
UPDATE DEMO
*
{
margin:0;
padding:0;
}
div.wrapper {
width: 100%;
min-width: 600px; /* If the window gets bellow 600px .left will stay 30% of 600 and .right will stay 70% of 600*/
}
div.left,
div.right {
display:inline;
float: left;
position: relative;
height: 100%;
overflow-y:scroll;
}
.left {
width: 30%;
background: red;
}
.right {
width: 70%;
background:green;
}
.header
{
background-color:#CCC;
position:fixed;
left:0;
top:0;
width:100%;
height:40px;
}
.wrapper
{
position:absolute;
width:100%;
top:40px;
bottom:40px;
}
.footer
{
background-color:#000;
position:fixed;
bottom:0;
left:0;
width:100%;
min-width:500px;
height:40px;
}
We eventually used flex-box layout to be able to use for example 300px and let the rest be fluid.