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%}
Related
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>
I have an index.html markup as follows:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<link type="text/css" rel="stylesheet" href="Styles/main.css">
</head>
<body>
<header>...</header>
<iframe id="pagecontent" src="content.html"></iframe>
<footer>...</footer>
</body>
</html>
To apply styles, I use main.css whose content is as follows:
#pagecontent {
border: none;
height: 100%;
width: 100%;
}
The width of the iframe is assigned correctly. That is, when I resize the browser window, the width of the iframe is adjusted accordingly. However, the height is always the same. It is about 300px and does not expand to the height of the browser window. I tried this in FF 45 and IE 11.
Question: What is the reason for the height not being adjusted in the same way as the width when applied to the iframe?
You have height set to 100% but 100% of what? It's always the parent of that element so what is the parent's height set to? If it's not set to anything then the browser has nothing to reference.
So you have to give height in px here
#pagecontent {
border: none;
height: 400px;
width: 100%;
}
working example : https://jsfiddle.net/uxq4pzc1/
#pagecontent {
border: none;
height: 100vh;
width: 100%;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<link type="text/css" rel="stylesheet" href="Styles/main.css">
</head>
<body>
<header>...</header>
<iframe id="pagecontent" src="content.html"></iframe>
<footer>...</footer>
</body>
</html>
iframes by default are inline so try line-height instead or use display: block Also 100% of what? 100% of whatever contains the iframe so you should wrap iframe in an element and set a height explicitly.
Whenever I use an iframe, I wrap it in a block level element and set position: relative. Then I place position: absolute top:0; bottom:0; right: 0; left: 0; on the iframe. Whenever you want control over the iframe, use it's parent instead.
See this post for details
#pagecontent {
border: none;
height: 100%;
width: 100%;
display: block;
}
.box {
height: 20em;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<link type="text/css" rel="stylesheet" href="Styles/main.css">
</head>
<body>
<header>...</header>
<div class="box">
<iframe id="pagecontent" src="http://example.com"></iframe>
</div>
<footer>...</footer>
</body>
</html>
I have a parent DIV with a child DIV that I'd like to have stretch to the bottom of the parent. At present it does not despite having height:auto!important; A screenshot illustrating the issue can be seen here.
The relevant HTML (as a Jade template) is as follows:
.main.top0
.infoPanel.koneksa_bg_blue
.innerPanel.mtop0.mbottom0
.infoCaption.font8em.koneksa_white 404
.infoCaption.koneksa_white We can't find the page you are looking for
.infoCaption.koneksa_white
| Don't worry. Just try to go back or
a.koneksa_white.underline(href='/') home
.footer.stickyBottom.koneksa_bg_gray.koneksa_fg_light_gray
The main DIV is the parent and the infoPanel is the child (colored in blue in the image above) that I am struggling to stretch.
The corresponding CSS is as follows:
.main {
width:100%;
min-height:700px;
height:auto!important;
overflow: hidden;
z-index: 1;
top:3em;
position: relative;
}
.infoPanel {
width:100%;
height:auto!important;
display: block;
padding:0;
}
.innerPanel {
width:90%;
padding:40px 0;
height:auto!important;
margin:0 5%;
display: block;
}
I'm aware that this is a fairly common question but it seems like the answer is always to include a hard-coded height. I would like to avoid this because while that was a perfectly fine solution for the desktop styling this is intended to be displayed on mobile devices and as such I'd like it to be a bit more responsive than a hard-coded height.
Thanks for any insights that you can provide.
EDIT:
The generated HTML as requested:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html"></html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale = 0.8, user-scalable = yes">
// Imports removed
<link href="/assets/css/mvp.css" type="text/css" rel="stylesheet" media="screen and (max-width: 768px)">
<link href="/assets/css/mvp_wide.css" type="text/css" rel="stylesheet" media="screen and (min-width: 769px)">
</head>
<body class="tk-futura-pt koneksa_gray">
<div class="fullNav koneksa_bg_white boxShadow">
<div class="centerPanel">
<div class="mleft2 left khmoniker"></div>
<div class="menu right">customer login</div>
</div>
</div>
<div class="main top0">
<div class="infoPanel koneksa_bg_blue">
<div class="innerPanel mtop0 mbottom0">
<div class="infoCaption font8em koneksa_white">404</div>
<div class="infoCaption koneksa_white">We can't find the page you are looking for</div>
<div class="infoCaption koneksa_white">Don't worry. Just try to go back or home</div>
</div>
</div>
<div class="footer stickyBottom koneksa_bg_gray koneksa_fg_light_gray">
<div class="innerPanel">
<div class="caption left">
<h5 class="konekea_blue_gray mtop2">© template-filler</h5>
<div class="kh_reverse_logo mtop2"></div>
</div>
<div class="caption right">TermsPrivacyCorporate</div>
</div>
</div>
</div>
</body>
One solution that works in all modern browsers is to do the following:
html, body {
height: 100%
}
.main {
position: absolute;
top: 3em;
bottom: 0;
width: 100%;
}
This seems an unusual solution but modern browsers will actually respect all 4 sides being defined at the same time and stretch the element to match. Here is an example jsFiddle: http://jsfiddle.net/nqt7vqs1/2/
You can do the same with all child elements as well because position: absolute implies position: relative for the purposes of positioning child elements.
If this solution doesn't work, another option is to do the following:
html, body {
height: 100%
}
.main {
position: absolute;
top: 0;
height: 100%;
margin: 3em 0 -3em 0;
overflow: hidden;
}
This is a "hidden margin" trick that also works in all modern browsers. Same Fiddle with these settings: http://jsfiddle.net/nqt7vqs1/3/
I know this is a question that is asked a lot, but I couldn't find any solution at all to what should be a simple thing.
Here's my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<!--CSS STYLING-->
<link rel="stylesheet" href="../cssReset.css" />
<style>
html, body {
height: 100%;
}
#menu {
height: 100px;
background-color: red;
}
#center {
height: 250px;
background-color: green;
}
#main {
height: 100%;
background-color: blue;
}
</style>
</head>
<body>
<div id='menu'>
</div>
<div id='center'>
</div>
<div id='main'>
</div>
</body>
</html>
Prety simple, but I just can't make the last div extend to the bottom of the page. If I use "auto" it will not display anything, as there's no content. If I use 100%, it will use my browser height and create unecessary scrollbars.
What can I do?
Thanks.
You could always take the easy way out and use JavaScript. Here's a simple example.
<style>
DIV { margin: 0; }
</style>
<script>
function fixMain() {
var menu = document.getElementById("menu");
var center = document.getElementById("center");
var main = document.getElementById("main");
var height = document.body.offsetHeight - (menu.offsetHeight + center.offsetHeight);
main.style.height = height + 'px';
}
window.addEventListener("load", fixMain, false);
window.addEventListener("resize", fixMain, false);
</script>
may be the following markup code would be what you are looking for just add a "overflow:hidden" in your css style sheet will fix your problem.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<!--CSS STYLING-->
<style>
*{margin:0;padding:0}
html, body {
height: 100%;
overflow: hidden;
}
#menu {
height: 100px;
background-color: red;
}
#center {
height: 250px;
background-color: green;
}
#main {
height: 100%;
background-color: blue;
}
</style>
</head>
<body>
<div id='menu'>
</div>
<div id='center'>
</div>
<div id='main'>
</div>
</body>
I tested your markup, it shows the last div 'main' extend to the bottom of the page.... what is being displayed for you? And what styling info is there in the referred cssReset.css ( although this would be overridden by the style on the page html
Maybe the following is what you are looking for:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<!--CSS STYLING-->
<style>
*{margin:0;padding:0}
html, body {
height: 100%;
}
#menu {
height: 10%;
background-color: red;
}
#center {
height: 25%;
background-color: green;
}
#main {
height: 75%;
background-color: blue;
}
</style>
</head>
<body>
<div id='menu'>
</div>
<div id='center'>
</div>
<div id='main'>
</div>
</body>
</html>
as I've understood, for a div to actually be 100% in height, the parent div needs to be set right?
So, imagine a div structure that looks like this:
<title>A CSS Sticky Footer</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
</head>
<body>
<div class="wrapper">
<div class="header">Header</div>
<div class="gallery">gallery</div>
<div class="push">This is inside the push</div>
</div>
<div class="footer">Footer</div>
</body>
This is supposed to essentially be a sticky footer layout based on Ryan Faiths sticky footer layout.
How can in this case the gallery have 100% height as well as the wrapper? I can't figure this out.
My CSS looks like this: Exactly the same as Ryan's CSS, only with the gallery class added.
* {
margin: 0;
}
html, body {
height: 100%;
}
.gallery {
background-color:blue;
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%
margin-left: auto;
margin-right: auto;
width:830px;
margin-bottom: -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
height: 142px;
margin-left: auto;
margin-right: auto;
width: 830px;
}
(Deleted all the old stuff)
Here is the new HTML with gallery 100%, hope it works :-)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>A CSS Sticky Footer</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<style type="text/css">
* {
margin: 0;
}
html, body {
height: 100%;
}
.header{background-color: green;position: fixed; top:0;width: 830px;height: 80px; z-index:1;}
.gallery {background-color:blue;height: 100%;}
.wrapper {
height: 100%;
margin: 0 auto;
width:830px;
}
.footer, .push {
height: 80px;
width: 830px;
background-color: #CCFF00;
position: fixed;
bottom:0;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="header">Header</div>
<div class="content gallery">gallery</div>
<div class="footer">Footer</div>
</div>
</body>
</html>
I don't know if this is technically an answer, but it's more of an answer than a comment so here goes:
Personally I don't like the Ryan Fait Sticky Footer approach, I much prefer the one used here: http://www.digital-web.com/extras/positioning_101/css_positioning_example.php. To me it's a much cleaner solution and makes more sense from a design and standards point of view. From my experience it works almost 100%, and degrades gracefully the rest of the time.
My 2cents...