HTML5让页面主体自己填充屏幕

所以我正在为一个类编写一个网页，我不知道如何制造空间，使正文自行扩展到页面的末尾，所以我没有所有这些额外的空间，我将把html代码和css代码放在下面，这样你就能明白我在说什么。如有任何帮助，不胜感激。

我试过书里的边距和其他很多东西，但我还是搞不懂。

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>
&copy; copyright 2022 <a href="mailto:jmmartin@mail.mccneb.edu">Josh Martin</a>
</footer>
</div>
</body>
</html>

我最初误解了您所说的"让页面主体自行填满屏幕"的意思。您的<body>已经填满了页面。你说的是拉伸#wrapper来填充<body>。

与所有CSS一样，有多种方法可以实现这一点。一种方法是:

设置min-height: calc(100vh - 8px)在#wrapper上。这使得它至少和视窗一样高，减去8px来解释4px的边框。
使#wrapper为伸缩容器。这为main设置了拉伸以填充可用垂直空间的能力
设置flex: 1为main。(或flex-grow: 1，或flex: 1 1 auto)。这允许main扩展以填充可用空间。
在body上设置margin: 0。(如果没有这个，你最终会得到100vh加上默认的边距，导致滚动条。)

body {
margin: 0;
}
#wrapper {
display: flex;
flex-direction: column;
min-height: calc(100vh - 8px);
}
main { 
flex: 1;
}

下面是添加了上述规则的示例代码片段:

body {
background-color: #faf86f;
font-family: 'Times New Roman', Times, serif;
margin: 0;
min-height: 100vh;
}
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;
display: flex;
flex-direction: column;
min-height: calc(100vh - 8px); /* subtracting 8px to account for the 4px border */;
}
nav {
flex: 0 0 auto;
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: 1;
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 {
flex: 0 0 auto;
border-top: 3px solid blue;
text-align: center;
}
.float {
float: left;

}
@media(min-width: 800px) {
#wrapper { width: 80%; 
margin:auto;
}
nav li {
display: inline;

}
}

<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>
&copy; copyright 2022 <a href="mailto:jmmartin@mail.mccneb.edu">Josh Martin</a>
</footer>
</div>

这个方法很有用，但是如果你想让它有响应性，那么你就必须为它工作，或者如果你想要有响应性，最好使用bootstrap。

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>
&copy; copyright 2022 <a href="mailto:jmmartin@mail.mccneb.edu">Josh Martin</a>
</footer>
</body>
</html>

相关内容

最新更新

热门标签：