I want to make on iframe full screen. Here is the code:
http://jsbin.com/ibopes/1/edit
and here is the demo:
http://jsbin.com/ibopes
Why the scrollbar? For some reason I can't use position: absolute for the iframe, and I don't want overflow: hidden on body.
How to hide the scrollbar, and why is it there?
Specify display: block on your iFrame. jsBin normalizes the CSS for you:
#test {
width: 100%;
height: 100%;
min-height: 100%;
border: none;
background: #ff0000;
display: block;
}
See the working demo here > http://jsbin.com/ibopes/5
Related
want to show 1 static page contain everything without a scroll
tried to make boddy padding 0 and overflow: hidden but nothing work
also tried the below page-header and background-image code also not work
display: flex!important;
flex-direction: column!important;
min-height: 1vh!important;
}```
```.background-image {flex-grow: 1!important;}
1 page with cover image and footer info, dont know what i am missing to fix that
If you set the body to have an overflow-y of hidden in css it will not allow the user to scroll down the page.
body {
overflow-y: hidden;
}
Go for the root html element, you can style it to:
html {
height: 100%;
width: 100%;
overflow: hidden;
}
The browser will interpret this as the html would use 100% of the usable device width space and hide the rest.
You probably don't want to avoid scrolling but instead make the page elements fit on the screen so there is no scrollbar and still everything is visible.
As a start, you could make the .main class (which only contains your footer) absolutely positioned at the bottom and take it from there
.main {
position: absolute;
bottom: 0;
width: 100%;
}
or, what I'd prefer, set the wrapper to be a flexbox:
UPDATED
body.home {
height: 100%;
overflow: hidden;
}
body.home .wrapper {
display: flex;
flex-direction: column;
}
/* Not needed anymore */
body.home .carousel {
}
body.home .main {
}
I gave my sidebar a negative top margin to display an image over top of the header yellow image but I can't get the sidebar image to show on top. I have added position: relative and played with the z-index but nothing is working.
Here is the page
Here's the css code I have -
.reciperight {
float: right;
width: 28%;
color: #512e70 !important;
font-size: 18px !important;
position: relative;
margin-top: -200px;
}
I checked your page and there is a CSS code in your parent #primay div that makes the image hidden.
change the overflow from hidden to visible and your issue will fix like bellow.
#primary {
float: left;
overflow: visible;
width: 100%;
}
Result
#primary {
float: left;
/* overflow: hidden; */
width: 100%;
}
If you use overflow:hidden then it was hidden outside of content so remove overflow:hidden.
I am trying to stop the horizontal scroll here : http://imaginationmuzic.com/
but to no avail, if you check the css overflow-x: hidden is there attached to the html and body in the CSS. It doesn't work in Chrome or Safari.
Add "position: relative" to your css for the #wrapper element like so:
#wrapper {
margin: 0 auto;
width: 1200px;
text-align: left;
background: #000;
overflow: hidden;
position: relative;
}
I'm currently working on this site and I want the footer to be 100% (width) of the screen but it has refused to respond no matter what I do. I've checked to see if the ID has a duplicate but I saw nothing. The CSS code is as shown below:
#footer {
width: 100%;
clear: both;
height: 400px;
background-color: #293D61;
}
Your footer is a nested div inside #rack. At 100%, your footer will only be as wide as your outer/parent div. You need to move it out of the parent div and make it a sibling
Try doing it this way,
#footer {
position: absolute;
bottom: 0;
width: 100%;
clear: both;
height: 400px;
background-color: #293D61;
}
Check whether your footer is is in inside some other div...? if so then it will not be of full page length....
Im just wondering if this is a browser rendering issue or incorrect css.
A nice way to scale a div in a defined aspect-ratio is, using a transparent image as a child element.
I have a small demo here. Under need this question.
But why doesn't it work nicely if I want a height of 100%.
I tested this in FF10, Safari 5.1.2, IE8 and IE9. (only ie8 seems to render correctly...)
Hope somebody can explain the problem and maybe come up with a solution.
Regards,
Rik
<!DOCTYPE html>
<html lang="uk">
<head>
<title>test</title>
<style>
html
, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
background: green;
}
/* AUTO WIDTH - doesnt render correct when scaling the browser window to a smaller size */
.holder1 {
position: relative;
display: inline-block;
height: 100%;
width: auto;
background: yellow;
border-right: 1px solid red;
}
.holder1 .ratio {
display: block;
height: 100%;
width: auto;
}
/* AUTO HEIGHT - works fine */
.holder2 {
position: relative;
display: inline-block;
height: auto;
width: 100%;
background: yellow;
border-right: 1px solid red;
}
.holder2 .ratio {
display: block;
height: auto;
width: 100%;
}
</style>
</head>
<body>
<span class="holder1">
<img src="/images/empty_image.png" class="ratio" alt="Ratio image">
</span>
</body>
</html>
After view your question, I have some idea and suggest for your code:
1.Different between width:auto and width:100%, when you set auto for width, you leave the browser handle this width, with every different browser, they will handle width:auto follow their own rules. With width:100%, you force the browser must expand to have full width.That is what I think.
But for sure your div can expand 100% on every cross browsers, add css min-width:100%, it will do as you wish correctly.
2.About your CSS, I need you take a look at position:relative, this line of code have no sense, in this situation,
position:relative = position:static
when you use position:relative, you must describe where is the position you wish your element relative to, add top or left to do it.
Hope it can help you!