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>
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%;
}
i have two div in my Page,
which seems to be working fine with the vertically and horizontally center aligning but resize the browser vertically that the divs aren't responding by growing or shrinking, i am assuming it because of the margin:auto; but can't find a way to solve this issue, can any you guys help please?
CSS as follows:
#outer {
width: 100%;
height: 417px;
position:relative;
background-color:#666;
}
#inner {
height: 300px;
width:50%;
background-color: #F00;
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
margin:auto;
height:240px; }
JSFiddle
You need to set your divs height to a relative value (percentages):
html, body, #outer{
height: 100%;
}
#outer {
width: 100%;
position:relative;
}
#inner {
height: 60%;
width:50%;
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
margin:auto;
}
The margin:auto is fine. The issue is your fixed height, and also the fact that your have two height attributes. You should set your dimensions to percentage values.
This is the mended code:
#outer {
width: 100%;
height: 417px;
position:relative;
background-color:#666;
}
#inner {
height: 50%; // This equals to 50% of 417px, which is height of #outer
width:50%;
background-color: #F00;
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
margin:auto;
}
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
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.