So pretty much i'm coding a webpage for A class and I cannot figure out how to make space so that the body expands on its own to the end of the page, so that I don't have all this extra space, I'll drop the html code and the css below so that you get what I'm talking about. Any help would be much appreciated.
I've tried margining and a lot of other stuff in the book and I cannot figure it out.
body {
background-color: #faf86f;
font-family: 'Times New Roman', Times, serif;
}
header {
text-align: center;
font-style: oblique;
font-size: 2.0em;
color:rgb(47, 79, 219);
background-image: url(bistro_logo.png);
background-size: 10%;
background-repeat: no-repeat round;
text-shadow: 2px 3px rgb(81, 177, 241);
}
#wrapper {
width: 100%;
margin:auto;
border: 4px solid blue;
}
img { float:left;
}
nav {
flex:1;
border: 4px solid rgb(47, 79, 219);
}
nav ul{ list-style-type: none;
text-align: center;
font-size: 1.5em;
}
nav li {
display: flex;
flex-wrap: wrap;
flex-flow: row wrap;
justify-content: space-around;
}
nav a {
text-decoration: none;
padding-right: 10px;
}
nav a:link { color:blue}
nav a:visited { color:rgb(96, 10, 175)}
nav a:hover { color:aqua}
main {
flex: 7;
margin: auto;
}
p {
text-align: center;
color:blueviolet;
font-size: 1.1em;
font-family:'Times New Roman', Times, serif;
float: center;
text-align-last: auto;
}
h2 {
text-align: center;
color:blue;
font-size: 1.6em;
font-style:oblique;
}
footer {
border-top: 3px solid blue;
text-align: center;
}
.float {
float: left;
}
@media(min-width: 800px) {
#wrapper { width: 80%;
margin:auto;
}
nav li {
display: inline;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bistro Cafe - Home</title>
<link href="bistro.css" rel="stylesheet">
</head>
<body>
<div id="wrapper">
<header>
<h1>The Bistro Cafe</h1>
</header>
<nav>
<ul>
<li><a href="bistro_home.html">Home</a></li>
<li><a href="bistro_history.html">Bistro Cafe's History</a></li>
<li><a href="bistro_specials.html">Bistro Specials</a></li>
<li><a href="bistro_contact.html">Contact Bistro Cafe</a></li>
</ul>
</nav>
<main>
<h2>Home</h2>
<p>The Bistro Cafe is located in the heart of Techieville! We specialize in good-ole home cooking. Our menu ranges from chicken dumplings to our famous fiesta burrito. Our breakfast menu is available all day. Please come by and share a meal with us. We are conveniently located on the corner of 5th and Hypertext Avenue.
</p>
</main>
<footer>
<a href="bistro_home.html">Home</a>
<a href="bistro_history.html">Bistro Cafe's History</a>
<a href="bistro_specials.html">Bistro Specials</a>
<a href="bistro_contact.html">Contact Bistro Cafe</a>
© copyright 2022 <a href="mailto:[email protected]">Josh Martin</a>
</footer>
</div>
</body>
</html>CodePudding user response：
You can ensure body occupies at least the full viewport height with a min-height rule:
body {
min-height: 100vh;
}
CodePudding user response：
This will do the trick but if you want to make it responsive then you will have to work for it or just better to use bootstrap if you want responsiveness.
body {
background-color: #faf86f;
font-family: 'Times New Roman', Times, serif;
}
header {
text-align: center;
font-style: oblique;
font-size: 2.0em;
color:rgb(47, 79, 219);
background-image: url(bistro_logo.png);
background-size: 10%;
background-repeat: no-repeat round;
text-shadow: 2px 3px rgb(81, 177, 241);
}
#wrapper {
width: 100%;
margin: auto;
min-height: 97vh;
border: 4px solid blue;
}
img { float:left;
}
nav {
flex:1;
border: 4px solid rgb(47, 79, 219);
}
nav ul{ list-style-type: none;
text-align: center;
font-size: 1.5em;
}
nav li {
display: flex;
flex-wrap: wrap;
flex-flow: row wrap;
justify-content: space-around;
}
nav a {
text-decoration: none;
padding-right: 10px;
}
nav a:link { color:blue}
nav a:visited { color:rgb(96, 10, 175)}
nav a:hover { color:aqua}
main {
flex: 7;
margin: auto;
}
p {
text-align: center;
color:blueviolet;
font-size: 1.1em;
font-family:'Times New Roman', Times, serif;
float: center;
text-align-last: auto;
}
h2 {
text-align: center;
color:blue;
font-size: 1.6em;
font-style:oblique;
}
footer {
border-top: 3px solid blue;
width: 79%;
margin-left: 10.5%;
text-align: center;
position: fixed;
bottom: 0;
left: 0;
margin-bottom: 3vh;
}
.float {
float: left;
}
@media(min-width: 800px) {
#wrapper { width: 80%;
margin:auto;
}
nav li {
display: inline;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bistro Cafe - Home</title>
<link href="bistro.css" rel="stylesheet">
</head>
<body>
<div id="wrapper">
<header>
<h1>The Bistro Cafe</h1>
</header>
<nav>
<ul>
<li><a href="bistro_home.html">Home</a></li>
<li><a href="bistro_history.html">Bistro Cafe's History</a></li>
<li><a href="bistro_specials.html">Bistro Specials</a></li>
<li><a href="bistro_contact.html">Contact Bistro Cafe</a></li>
</ul>
</nav>
<main>
<h2>Home</h2>
<p>The Bistro Cafe is located in the heart of Techieville! We specialize in good-ole home cooking. Our menu ranges from chicken dumplings to our famous fiesta burrito. Our breakfast menu is available all day. Please come by and share a meal with us. We are conveniently located on the corner of 5th and Hypertext Avenue.
</p>
</main>
</div>
<footer>
<a href="bistro_home.html">Home</a>
<a href="bistro_history.html">Bistro Cafe's History</a>
<a href="bistro_specials.html">Bistro Specials</a>
<a href="bistro_contact.html">Contact Bistro Cafe</a>
© copyright 2022 <a href="mailto:[email protected]">Josh Martin</a>
</footer>
</body>
</html>