html - 为什么我的网页没有延伸到整个页面?
问题描述
我希望页面拉伸到整个网页而不是在底部留下空白区域,并且当(宽度-最大:500px)我希望它缩小以适合手机屏幕时。
<!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>
*{
margin: 0;
padding: 0;
box-sizing:border-box;
}
.container{
display:flex;
flex-direction: column;
height:100%;
}
.item{
padding:20px;
}
header{
background-color: green;
}
h1{
text-align: center;
}
main{
background-color: yellow;
display:flex;
flex-direction:row;
}
aside{
flex-basis: 20%;
}
article{
padding:20px;
flex-basis:60%;
}
footer{
background-color: purple;
}
nav {
background-color: #666;
padding: 1em 0;
width: 100%;
flex-grow: 1;
border-bottom: 3px solid navy;
}
.desktop ul {
display: flex;
flex-direction: row;
justify-content: center;
vertical-align: center;
direction: rtl;
}
.desktop ul li {
list-style-type: none;
margin-left: 10px;
border-left: 1px solid #000;
padding-left: 1em;
}
.mobile ul li a:hover,
.desktop ul li a:hover {
color: navy;
}
.desktop ul li:last-child {
border-left: none;
}
.mobile ul {
list-style-type: none;
line-height: 1.5;
direction: rtl;
}
.mobile ul li {
border-bottom: 1px solid #000;
padding-bottom: 0.5em;
padding-top: 0.5em;
}
.mobile ul li:last-child {
border-bottom: none;
padding-bottom: 0;
}
ul li a {
text-decoration: none;
color: white;
}
footer {
text-align: center;
background-color: #666;
color: #fff;
border-top: 3px solid navy;
}
.burger {
display: none;
cursor: pointer;
font-size: 1.5em;
position: absolute;
right: 0.3em;
top: 0.3em;
}
.mobile {
display: none;
color: #fff;
margin-top: 10%;
direction: rtl;
position: absolute;
top:0em;
right: 0;
width: 30%;
padding: 1em;
}
.banner {
width: 100%;
height: 50px;
margin-bottom: 1em;
background-color: navy;
color: #fff;
}
.leftBanners{
background-color: brown;
}
.rightBanners{
background-color: brown;
}
@media (max-width:500px) {
nav .burger {
display: block;
}
.desktop {
display: none;
}
.burger:hover+.mobile {
display: block;
background-color: #666;
color: blue;
}
.mobile:hover {
display: block;
background-color: #666;
}
article {
width: 100%;
padding: 1em;
margin-top: 7em;
}
nav{
height:50px;
}
}
</style>
</head>
<body>
<div class="container">
<nav>
<div class="desktop">
<ul>
<li><a href="#">לימודים</a></li>
<li><a href="#">עבודה</a></li>
<li><a href="#">בריאות ואסתטיקה</a></li>
<li><a href="#">שירותים נוספים</a></li>
<li><a href="#">יצירת קשר</a></li>
</ul>
</div>
<div class="burger">
<span class="icon">☰</span>
</div>
<div class="mobile">
<ul>
<li><a href="#">לימודים</a></li>
<li><a href="#">עבודה</a></li>
<li><a href="#">בריאות ואסתטיקה</a></li>
<li><a href="#">שירותים נוספים</a></li>
<li><a href="#">יצירת קשר</a></li>
</ul>
</div>
</nav>
<main class="item">
<aside class="leftBanners">
<div class="banner">left banner1</div>
<div class="banner">left banner2</div>
<div class="banner">left banner3</div>
</aside>
<article>
<header>
<h1>this is H1!</h1>
</header>
<br>
<p>this is the article</p></article>
<aside class="rightBanners">
<div class="banner">right banner1</div>
<div class="banner">right banner2</div>
<div class="banner">right banner3</div>
</aside>
</main>
<footer class="item">This is the footer!</footer>
</div>
</body>
</html>
我希望页面伸展到整个网页上,而不是在底部留下空白区域,并且当(宽度-最大:500px)我希望它缩小时,它会覆盖手机屏幕。
解决方案
尝试
高度:100vh
代替
高度:100%
在你的容器上
您还应该阻止您的导航增长(删除 flex-grow),否则它会增长到页面底部(除非您想要它)。
推荐阅读
- python-3.x - 无法使用 BeautifulSoup 从隐藏标签中刮取“价值”
- mongodb - zsh:找不到命令:mongo
- gpio - 如何从busybox的智能插头读取开关状态
- javascript - 如何在另一个异步函数中调用 Asyn 函数
- node.js - 所需模块不适用于 chrome 扩展脚本
- version - VK_MAKE_API_VERSION 中的 Vulkan API 版本变体是什么?
- botan - 无法生成 ed25519ph 证书
- javascript - 在eval中使用yield?
- java - 如何改进我的正则表达式以检查数字是否在任何地方和任何数量中都包含唱歌?
- java - 引起:org.postgresql.util.PSQLException:错误:重复键值违反唯一约束