below is my html css code
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title ng-bind="title +' | Game '">Platano</title>
<meta charset="utf-8" />
<meta http-equiv="Content-Type" content="application/json; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="shortcut icon" type="image/x-icon" href="Images/favicon.ico" />
<style>
html {
padding: 0;
margin: 0;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border:1px red solid;
height:100%;
}
body{
height:100%;
border:1px black solid;
background: linear-gradient(180deg,#007738,#B0D133);
position: absolute;
font-size: 16px;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: 0 auto;
padding: 0;
padding-left: 2em;
padding-right: 2em;
overflow-x: hidden;
overflow-y: auto;
min-width: 500px;
overflow-x: scroll;
z-index: -2;
}
</style>
</head>
<body>
</body>
</html>
To observe this blank space on desktop..follow the steps
step 1: open this html file or code and open firebug...click on mobile icon in firebug as shown in figure below.
Step2: You will see the screen as shown below..now make sure that "Screen" checkbox is checked...as shown in image below
step 3: now reduce the screen size to less than 500 by selecting any device or dragging the screen (since i have set min-width:500px) and then refresh the page by (ctrl +f5) or (ctrl + shift + r)..and now you can clearly see the blank space on the footer of the page..
What you are trying to do is, giving a definite positioning to the body And also making it left:0; and also inserting a condition of min-width:500px;.
so it causes html to expand according to screen, but your body section remains left:0; with fixed width 500px.
So, better you remove left:0; from body style. It will make your body a fluid container.
I think the problem is you set page scale to -0.8 as you can see in top right corner of your window. If you return it to 1 everything works fine.
Actually I am not clear what you are looking for.
Hope you need to show this linear gradient in all devices and its sizes.
* {
margin: 0;
padding: 0;
}
html, body {
min-width: 500px;
height: 100%;
background: linear-gradient(180deg,#007738,#B0D133);
}
<body>
</body>
Try this, else let me know what is your exact requirement.
This for any screen size - i have added in the min-width which forces you to scroll right on screens which are too small;
Meta
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
CSS
html,body, .game {
padding: 0;
margin: 0;
}
.game{
border:1px black solid;
background: linear-gradient(180deg,#007738,#B0D133);
position: absolute;
font-size: 16px;
top: 0;
left: 0;
right: 0;
bottom: 0;
min-width: 500px;
}
HTML
<div class="game"></div>
Full Page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Game.</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style>
html,body, .game {
padding: 0;
margin: 0;
}
.game{
border:1px black solid;
background: linear-gradient(180deg,#007738,#B0D133);
position: absolute;
font-size: 16px;
top: 0;
left: 0;
right: 0;
bottom: 0;
min-width: 500px;
}
</style>
</head>
<body>
<div class="game"></div>
</body>
</html>
Screenshot Example
Related
hi i have a problem with my google form format in my site that need to work with a resolution of 1280x800 , i´m using chrome console to see the resolution but the form height is creating a scroll bar at the side and i want to fit it to my resolution is any solution or fix?? it need to fit the 1280x800 format .txs
html, body {
margin: 0;
padding: 0;
overflow: hidden;
}
html, body, .main, .main iframe {
margin: 0;
width: 100%;
height: 100%;
}
.main iframe {
border: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="main">
<iframe src="https://docs.google.com/forms/d/e/1FAIpQLSd4pzJ9kRydc-UVkEkm9xKDZjF0S3Earn-Wjcbh8FEAlYnkXA/viewform?embedded=true" frameborder="0" marginheight="0">Loading...</iframe>
</div>
</body>
</html>
I don't know how else to describe it, not fullscreen, but fill up the whole viewport.
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>1001001</title>
<style id="style-tag"></style>
<script src="dist/app.js"></script>
</head>
<body spellcheck="false">
<div id="content">
<pre contenteditable id="style-text"></pre>
</div>
<div id="footer">
Skip
</div>
</body>
</html>
CSS:
html, body {
margin: 0;
height: 100%;
overflow: hidden;
}
pre {
overflow: auto;
min-height: 100%;
width: 100%;
border-radius: 1px; /* Prevents bad clipping in Chrome. */
}
#content {
position: absolute;
top: 0; right: 0; left: 0; bottom: 20px;
}
#footer {
position: absolute;
bottom: 0;
height: 20px;
left: 0;
right: 0;
padding: 0 10px;
}
Expected outcome:
The coloured block fills the entire screen (I require this to be a as text is added afterwards).
Actual outcome:
Viewport is almost covered by the block, however, on the top and bottom, there is about 10px that are not coloured.
If you set the css min-height property as min-height:100vh; (rather than 100%) on the <pre> element, that should solve your issue, by forcing the height of the element to at least the full viewport height.
Edit - also add margin:0; to the style of the <pre> element. That seems to work for me.
Hope this helps! - James.
I am trying to make a Div take the whole height of a page. The problem is when my page has scroll the div is not taking whe whole height only takes the height until the scroll. The div is used to overlap the page when loading. Here is my CSS code:
#disablingDiv
{
/* Do not display it on entry */
display: block;
/* Display it on the layer with index 1001.
Make sure this is the highest z-index value
used by layers on that page */
z-index:1001;
/* make it cover the whole screen */
position: absolute;
top: 0%;
left: 0%;
width: 100%;
min-height:100%;
/* make it white but fully transparent */
background-color: gray;
opacity:.5;
}
And here my HTML code:
<!DOCTYPE html>
<html ng-app="app">
<head>
<title ng-bind="title">
My app
</title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
<base href="/">
</head>
<body>
<div id="disablingDiv"></div>
<ui-view></ui-view>
</body>
</html>
Thanks in advance!
Do you want to have some kind of overlay? If yes you may want to use position fixed instead of absolute. Unlike position absolute, fixed will position the element relative to the viewport (visible area). Additionally you may want to set "overflow: hidden" to the scrolling container while the overlay is active.
.loadingOverlay {
position: fixed;
z-index: 100;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
/* make it white but fully transparent */
background-color: gray;
opacity:.5;
}
.loadingContainer {
/* do not allow scrolling */
overflow: hidden !important;
}
Alternativly you can wrap you disablingDiv around the actual view. Might be useful if you don't want to block the whole page but just the content while still allowing to navigate e.g. using some toolbar.
Change position: absolute; to position: fixed;
html,body {
height: 3000px;
}
div {
position: fixed;
background: red;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
<div></div>
If it's for loading, I would disable the scroll while it's loading with html, body { overflow: none; }
Use Position fixed instead of absolute.
#disablingDiv
{
position: fixed;
height: 100%;
}
Have you tried setting styles to html and body tags like below?
html {
height: 100%;
}
body {
height: 100%;
}
Edit:
As per your comment, I just put your code in a jsfiddle and it seems to achieve what you're asking for? If not can you elaborate please? What have you already tried?
https://jsfiddle.net/qLxm7rbx/1/
Add below code and Try:
#disablingDiv {
height:100vh;
}
Also check browser support.
Or:
body, html {
height: 100%;
}
#disablingDiv {
height: 100%;
}
I am trying create a simple single page site that works on mobile. Ideally, I'd like each section of the site to be 100% of the browser height. This is the page:
http://codepen.io/juanp83/pen/EgjBwK
and here's the code:
body, html {
height: 100%;
width: 100%;
}
.section {
height: 100%;
position: relative;
}
.one, .three {
background-color: #666;
}
.two {
background-color: #222;
}
.bottom {
position: absolute;
bottom: 20px;
right: 0px;
left: 0px;
}
p {
color: #fff;
text-align: center;
}
.nav {
position: fixed;
top: 0px;
height: 50px;
width: 100%;
background-color: #fff;
z-index: 1;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="main.css">
</head>
<body>
<!--nav-->
<div class="nav"></div>
<!--Section1-->
<div class="section one">
<div class ="bottom"><p>By Juan Portillo</p></div>
</div>
<!--Section2-->
<div class="section two">
</div>
<!--Section3-->
<div class="section three">
</div>
</body>
</html>
It works great on my desktop. But I tried it on my iPhone and the first section takes up the entire height of the webpage, not just the height of the browser, so it ends up "hiding" the other sections.
I've done several searches here on stack overflow as well as some other sites but I just can't find a fix. Any help would be greatly appreciated.
.section {
height: 100vh;
}
Set the height to your viewport height using vh.
Reference: https://snook.ca/archives/html_and_css/vm-vh-units
height: 100vh
that should do the trick
vh = viewport height
position: fixed is a quirky little fellow especially when it comes to mobile.
When attempting to use a fixed element with another element that has a width greater than the device's height, it breaks Mobile Safari.
I would like to keep the header on top while the content is scrollable. Is there a way around this issue without losing the experience?
Thanks in advance!
EXAMPLE:
http://debug.studiotate.com/mobile-safari-position-fixed (this is the issue i'm seeing - the header goes away when you scroll down and/or right)
EXPECTED:
http://debug.studiotate.com/mobile-safari-position-fixed/expected (this is what it should look like - the header stays put)
CODE:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, width=device-width" />
<style type="text/css">
body {
margin: 0px;
}
header {
background-color: #00FF00;
left: 0px;
position: fixed;
top: 0px;
}
div {
background-color: #FF0000;
height: 1500px;
width: 1000px;
}
</style>
</head>
<body>
<header>Header</header>
<div></div>
</body>
</html>
I think that div must be remove and set background to body
<body>
<header>Header</header>
</body>
And CSS:
body {
margin: 0px;
background-color: #FF0000;
}
header {
background-color: #00FF00;
left: 0px;
position: fixed;
top: 0px;
}