Main-content disappear under header

HTML-CSS
1

Hi,

I have started to do my first webpage with a header, main and footer section. In the main section I would like the content to be centered both vertically and horizontally. But when I make the window smaller som of the content is moving under the header and can’t be seen. Why? See the picture there I can´t see the first line.

<!DOCTYPE html>
<html>
    <head>
        <title>My first website</title>
        <link rel="stylesheet" href="style.css">
		<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Alice">
		<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Open+Sans">
    </head>
    <body>
		<header>
			<ul class="topnav">
				<li><a href="index.html">Home</a></li>
				<li><a href="1.html">1</a></li>
				<li><a href="2.html">2</a></li>
				<li><a href="3.html">3</a></li>
				<li><a href="4.html">4</a></li>
			</ul>
		</header>
		<main>
			<div id="vertical">
				<section id="index">
						<h1>First line<br/> </h1>
						<h1>Second line</h1>
				</section>
			</div>
		</main>
		<footer>
			Don't forget the dance moves.
		</footer>
	</body>
</html>

html, body {
	margin: 0;
	height: 100%;
	width: 100%
	min-height: 100%;
	min-width: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

header {
	width: 100%;
    height: 3em;
    display: flex;
	align-items: center;
	justify-content: center;
    background-color: #eee;
	font-family: 'Alice';
	font-size: 1.1em;
	z-index: 10;
}

main {
	display: flex;
	flex: auto;	
    z-index: 5;
	height: auto;
	
	background-image: url("../body_background.jpg");
    background-color: #eee;
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Do not repeat the image */
    background-size: cover; /* Resize the background image to cover the entire container */
	
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	
	justify-content: center;
	text-align: center;
}

#vertical {
	display: flex;
	align-items: center;	
}

footer {
	width: 100%;
    height: 3em;
	display: flex;
	align-items: center;
	justify-content: center;
    background-color: #eee;
	font-family: 'Alice';
	font-size: 1.1em;
	z-index: 10;
}

/* Index */
#index h1 {
	background-color: #eee;
	font-family: 'Alice';
	font-size: 4em;
	padding:  0em 0.2em;
}

ex1
ex1832×306 57.3 KB

2

There is a missed colon on line 4 in the CSS.

Try removing/commenting overflow-y: auto; on line 39.

2 Likes
3

Thanks, it worked. But when I remove ´overflow-y: auto´ the header and footer aren´t locked if I add a lot of text in the main section. How do I this that?

4

Do you have the code on codepen or jsfiddle?

5

Wow, man; you are so good at catching mistakes. first you catch a semi-colon in another topic, and then you catch another small character.

You must be either a really good reader or a master typo finder.

2 Likes
6

I tried to upload it to codepen:

https://codepen.io/pv1092/pen/gOYjwga

Does it work?

Many thanks!!!

8

Haha, good!

Do you know why my header and footer aren’t locked in top and bottom respectively? I tested the page on my mobile phone and there its seemed to work.