1カラムレイアウト フッター有 - レスポンシブWebデザイン対応 -

PC

モバイル

広告

HTML&CSS

HTMLindex.htmldownload

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="description" content="">
	<meta name="keywords" content="">
	<link rel="stylesheet" href="style.css" type="text/css" />
	<title>1カラムレイアウト フッター有</title>
</head>
<body>
<div id="container">

	<header></header>

</div><!-- container ここまで -->

<footer></footer>
</body>
</html>

CSSstyle.cssdownload

@charset "utf-8";

body{
	width: 100%;
	margin: 0;
	padding: 0;
}
#container{
	width: 100%;
	height: 85vh;
	background-color: #ccffff;
}
footer{
	width: 100%;
	height: 15vh;
	background-color: #ffcc66;
}
広告
サンプルページ
(c) 2020 cuorefilms.com