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.
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>
This question already has answers here:
Percentage Height HTML 5/CSS
(7 answers)
Closed 2 years ago.
I am following a tutorial from YouTube. There I followed the same procedure. I checked it several times. But the video's authors background color shows up and mine doesn't. I have tried overflow, clear etc but it doesn't work. People with big brains I need help?
here is the css code:
*{
margin: 0;
padding: 0;
font-family: sans-serif;
}
.container{
width: 100%;
height: 100%;
background: #42455a;
}
And here is the html code:
<!DOCTYPE html>
<html>
<head>
<title>Crypto Currency Web App - Easy Tutorials</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
</div>
</body>
</html>
Edit: problem resolved. The solution was to specify the html and body height
like
height:100%;
padding:0;
margin: 0;
}```
<!DOCTYPE html>
<html>
<head>
<title>Crypto Currency Web App - Easy Tutorials</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<p> just write something to here your width and height percent not fixed size </p>
</div>
</body>
</html>
if you want to see the container then your CSS should be following:
.container{
width: 100px;
height: 100px;
background: #42455a;
}
100 px is a just example you can enter what you want
body{
margin: 0;
padding: 0;
font-family: sans-serif;
}
.container{
width: 100%;
height: 100%;
background: #42455a;min-height:145px;
color:#fff;padding: 15px;
}
<!DOCTYPE html>
<html>
<head>
<title>Crypto Currency Web App - Easy Tutorials</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
You need to insert some content or add some CSS like min-height to empty div to show background color
</div>
</body>
</html>
So, I'm trying to make a mobile version on my desktop site (Have a look here to see what I'm going for www.adamaucock.com).
The issue I'm having is that I can't seem to set the height correctly, in that my content is about half the page and then the rest is just dead space so the height is set too short for the window. Working with the body tag didn't work and I've seen people suggesting wrapper elements also but I can't seem to get that to work. I've tried using vh and %. I've also tried hiding the overflow for x and y separately and together on both elements to no avail.
The only thing that fixed the issue was setting the wrapper to be fixed but then the scrolling didn't work at all.
HTML:
<body>
<div id="wrapper">
<div class="box" id="welcome_box">
<div class="welcome_title">
<h2 id="video_head">Hi, I'm Adam.</h2>
<h1>And here I am testing this website.</h1>
<h3>Scroll to See More</h3>
</div>
</div>
</div>
CSS:
body {
background-color: #04244F;
font-family: raleway;
margin: 0;
padding: 0;}
#wrapper {
width: 500vw;
height: 100vh;
background-color: aqua;}
Any help would be much appreciated.
Thanks in advance.
So, I have just found a solution but I'm not sure how well it'll work across devices. I used the viewport meta tag to set the initial scale to .25 rather than 1 like so.
<meta name="viewport" content="width=device-width, initial-scale=.25">
On the two devices I have to hand (Google Pixel 1 and iPhone 4) it seems to work. Will update if I run into any problems with this approach.
overflow-y: hidden on the body/html should do the trick
<!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>
<style>
html,
body {
margin: 0;
padding: 0;
overflow-y: hidden;
}
body {
background-color: #04244F;
font-family: raleway;
}
#wrapper {
width: 500vw;
height: 100vh;
background-color: aqua;
}
h2 {
margin: 0;
}
</style>
</head>
<body>
<div id="wrapper">
<div class="box" id="welcome_box">
<div class="welcome_title">
<h2 id="video_head">Hi, I'm Adam.</h2>
<h1>And here I am testing this website.</h1>
<h3>Scroll to See More</h3>
</div>
</div>
</div>
</body>
</html>
So I wanted to center my header... but I stumbled across a problem right away. I want to have a container that's going to have a repeating BG(stripe lines) and in the center I want a header with the logo and menu.
Thing is, I can't get the header div to center to the parent(container).
This is the HTML part
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<link href="css/master.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container">
<dic class="header">
<img src="images/logo.png" width="260" height="56">
</div>
</div>
</div>
</body>
</html>
and the CCS is
#charset "utf-8";
body {
background-color: #00162d;
}
.container {
width: 100%;
height: 100px;
background: url(../images/header_bg.jpg) repeat-x;
}
.header {
margin: 0 auto;
width: 980px;
}
Thanks in advance!
p.s. It's amazing how much you can forget if you don't code for 3 years!
<dic class="header">
Should be
<div class="header">
Working example: http://jsfiddle.net/dVvjm/
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%}