我希望页面扩展到整个网页,而不是离开 底部的空白区域,以及何时(width-max: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>
我希望页面扩展到整个网页,而不是离开 底部的空白区域,以及何时(width-max:500px)我想要 缩小,使手机屏幕更舒适。
答案 0 :(得分:0)
尝试
高度:100vh
代替
高度:100%
在您的容器上
您还应该停止导航的增长(删除弹性增长),否则导航将增长到页面底部(除非您希望这样做)。