With a very simple html document below, why is there a large blank space at the bottom when viewed in Chrome on iOS? Here is a demo page: https://watchfulfirebrickopengl.ksb1986.repl.co/
I've tried using 100% instead of 100vh but get the same results. This doesn't happen in Safari or Chrome on desktop or Safari on iOS. What is causing this and how can it be avoided?
(A little history: Some time in 2021 I noticed this start to show up at the bottom of many websites (including some of mine). I figured it may have been a bug that would soon disappear with the next version update. Here we are in 2022 and it still persists..)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
html,
body {
height: 100vh;
margin: 0;
padding: 0;
}
main {
background: lightblue;
height: 100vh;
}
</style>
</head>
<body>
<main>
<div>Page content</div>
<div>Page content</div>
<div>Page content</div>
<div>Page content</div>
</main>
</body>
</html>
My guess is margins on the <main> tag, could you try using the following instead?
html,
body,
main {
height: 100vh;
margin: 0;
padding: 0;
}
main {
background: lightblue;
}
Or, try using absolute positioning:
html,
body,
main {
height: 100vh;
margin: 0;
padding: 0;
}
You should try removing the height property from main element and change the vh to percentage in the body selector of css, and the code looks like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
main {
background: lightblue;
}
</style>
</head>
<body>
<main>
<div>Page content</div>
<div>Page content</div>
<div>Page content</div>
<div>Page content</div>
</main>
</body>
</html>
Related
I need the footer html elemenent to appear down the page (even when the content is not enough). I found a bounch of solutions by googling and all seemed to me to be more complicated than they should (stuff like creating #containers of #containers of..). Here's my html code:
<!DOCTYPE html>
<html>
<head>
<title>Footer</title>
<meta name="author" content="Cinosarge">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<p>THIS IS A HEADER - THIS IS A HEDER</p>
</header>
<section>
<p>THIS IS A SECTION - THIS IS A SECTION</p>
</section>
<footer>
<p>THIS IS A FOOTER - THIS IS A FOOTER</p>
</footer>
</body>
</html>
and this is the related css style:
*{
margin: 0;
padding: 0;
}
body{
position:absolute;
min-height: 100%;
width: 100%;
}
footer{
position: absolute;
bottom: 0;
width: 100%;
}
Now, this works fine for me but, is this piece of code correct? (in particular, is it a good idea to give the body element an absolute position? What kind of problems I could strumble into by using that css?
Thank you.
My goal is to have a footer that stays at the bottom of the page if there is little content, and moves to the bottom of all content if the page has a lot of content (requiring a scroll down).
I read this post Flushing footer to bottom of the page, twitter bootstrap , tried the layout and css, but still can't seem to get my page to work correctly.
This is my code layout - maybe I just made a slight mistake?
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
// Header Stuff
</div>
<div class="container">
<div class="jumbotron">
// h2
</div> // end jumbotron
<div class="row">
//ALL OF THE INFORMATIONAL CONTENT
</div> //end row
</div> //end container
<footer class="footer">
//INFORMATION / LINKS
</footer> //end footer
</body>
and with the name changes to the CSS code...
html, body {
height: 100%;
}
.container {
min-height: 100%;
}
.row {
overflow:auto;
padding-bottom:150px; /* this needs to be bigger than footer height*/
}
.footer {
position: relative;
margin-top: -150px; /* negative value of footer height */
height: 150px;
clear:both;
padding-top:20px;
}
I think, css flexbox can help you in this. But, just beware of browser support.
HTML:
<body class="Site">
<header>...</header>
<main class="Site-content">...</main>
<footer>...</footer>
</body>
CSS:
.Site {
display: flex;
min-height: 100vh;
flex-direction: column;
}
.Site-content {
flex: 1;
}
demo: http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/
Click on Toggle Content Button right there to see the difference.
try this one...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
* {
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>
I'm setting up a very simple fixed-liquid layout. The header is set to 100%, the sidebar is set at a fixed width and floated to the left, and the width of the content area is not defined (so that it fills the remaining space).
It works well in every browser except IE, where approximately 3 pixels of white space is added between the sidebar and the content area.
I can't reproduce the problem in JSFiddle (even when I copy and paste my exact code), so I've attached images instead. The first image was rendered in Chrome and the second was rendered in IE9.
CSS (styles.css)
body {
margin: 0px;
}
#header {
width: 100%;
height: 150px;
background: #F00;
}
#sidebar {
float: left;
width: 280px;
height: 1000px;
background: #0F0;
}
#content {
height: 1000px;
background: #00F;
}
HTML
<html>
<head>
<link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="header"></div>
<div id="sidebar"></div>
<div id="content"></div>
</body>
Have you tried adding a doctype declaration?
<!DOCTYPE html>
<html lang="en">
<head>
<link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="header"></div>
<div id="sidebar"></div>
<div id="content"></div>
</body>
</html>
Here's teh codez:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<style type="text/css">
html, body
{
margin: 0px;
padding: 0px;
}
#pageContainer {
min-width: 100%;
float: left;
background-color: red;
}
#leftColumn {
float: left;
background-color: lime;
}
#rightColumn {
position: relative;
}
</style>
</head>
<body>
<div id="pageContainer">
<div id="leftColumn">Left column</div>
<div id="rightColumn">Right column</div>
</div>
</body>
</html>
On IE8/Opera/FF everything looks fine. If I take IE8 and turn on IE7 mode (standards compliant), suddenly a horizontal scrollbar appears. Suspiciously it is just as big as the left column. Any ideas?!
Two solutions. On the right column, either:
Remove position: relative if you don't need it.
Or, keep that and add zoom: 1.
This is all about hasLayout.
Is there a way to instruct a div to fill 100% of the available page height, until it gets enough content to require a scrollbar?:
// browser height: 600px:
<div>
// empty, so just be 600px tall.
</div>
....
// when it gets content and gets taller than
// the page, don't need to auto-height itself
// anymore.
<div>
<ul>
<li></li>
<li></li>
...
</ul>
</div>
is there any sort of style that can make that happen, or does this need to be done with javascript?
Thanks
Have a look at min-height. Not supported in older versions of IE, but should do what you want.
http://www.w3schools.com/CSS/pr_dim_min-height.asp
This is hands down the easiest way to do what you're looking for:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Demo</title>
<style type="text/css" media="screen">
#content { position: absolute; top: 0; bottom: 0; right: 0; left: 0; overflow: auto; }
</style>
</head>
<body>
<div id="content">
<p>Embed all your content here.</p>
</div>
</body>
</html>
Alternatively if you want to support older browsers you could do this instead:
#content { position: absolute; top: 0; left: 0; height: 100%; overflow: auto; width: 100%; }
<!doctype html>
<html>
<head>
<style>
* {
margin:0;
padding:0;
}
html, body {
height:100%;
}
div#page {
background:#333;
min-height:100%;
text-align:center;
}
</style>
</head>
<body>
<div id="page"></div>
</body>
</html>
Feed height:100% to IE6 if you care about it in a conditional.
in your CSS, do you have
html, body set to {height: 100%}