当我将手机最长的一面放在横向位置时，我无法滚动以查看所有直接链接，也无法看到下拉菜单中的所有链接。
我试着把高度：100%;或高度：100vh;和溢出-y：滚动;在很多地方，但没有任何效果。
如果要检查：https://www.veganimaliste.com/index.php
/* LOGO ##############################################################*/
/* LOGO ##############################################################*/
/* LOGO ##############################################################*/
.logo {
display: block;
top: 0;
left: 0;
width: 100%;
margin: 0;
padding: 0 0 0 27px;
height: 73px;
background-color: black;
}
.logo a {
font-family: "Times New Roman", Times, serif;
font-weight: normal;
display: inline-block;
color: white;
font-style: italic;
font-size: 28px;
margin: 0;
padding: 18px 5px 25px 5px;
letter-spacing: -.5px;
box-shadow: 0 2px 0 lightgreen;
text-decoration: none;
padding-bottom: 3px;
}
/* couleur du Veg du logo ----------------------------*/
.logo .logo-color {
color: lightgreen;
margin-right: 0;
}
.logo .logo-color-2 {
color: dimgray;
margin-right: 0;
}
/* MENUM ################################################################*/
/* MENUM ################################################################*/
/* MENUM ################################################################*/
.menu-lang {
color: lightgreen;
font-size: 26px;
font-style: italic;
}
.menu-wrap.fixed {
position: fixed;
/*d'autres proprietes si besoin*/
}
.menu-wrap {
font-style: normal;
position: -webkit-sticky;
position: sticky;
top: 0;
left: 0;
right: 0;
margin: 0;
padding: 0;
z-index: 200;
height: 73px;
background-color: black;
}
.topnav {
position: absolute;
float: right;
display: inline-block;
top: 0;
right: 0;
margin: 0;
padding: 0 32px 0 0;
height: 73px;
background: black;
letter-spacing: -1.5px;
}
/* liens du menu qui n'ont pas de sous menu -----------------------------------------------------*/
.topnav a {
color: white;
top: 0;
right: 0;
float: left;
display: inline-block;
text-align: center;
padding: 25px 10px 19px 10px;
text-decoration: none;
font-size: 21px;
}
/* images icones pour le menu ---------------------*/
.topnav img {
height: 14px;
width: auto;
margin: 0;
padding: 0 4px 0 1px;
text-decoration: none;
}
/* images icones pour le menu qui n'ont pas de texte---------------------*/
img.sans-texte {
height: 22px;
width: auto;
margin: 0;
padding: 0 4px 0 1px;
text-decoration: none;
}
/* images icones dans le texte---------------------*/
img.sans-texte-2 {
height: 35px;
width: auto;
background: black;
margin: 0;
padding: 4px 4px;
text-decoration: none;
border-radius: 5px;
}
img.sans-texte-2:hover {
transform: translateY(-2px);
}
/*.topnav a, .dropdown button, .dropdown-content a {
cursor: pointer;
}*/
.topnav .icon {
position: absolute;
margin: 0;
padding: 0;
color: lightgreen;
display: none;
top: 0;
right: 0;
border: none;
}
/* SOUS MENU #########################################################*/
/* SOUS MENU #########################################################*/
/* SOUS MENU #########################################################*/
/* aligenement à gauche des liens des sous menu ******/
.dropdown {
float: left;
overflow: hidden;
}
/* liens qui ont un sous menu ---------------------------------------------------------------*/
.dropdown .dropbtn {
display: inline-block;
font-size: 21px;
border: none;
outline: none;
color: white;
padding: 28px 2px 20px 5px;
background-color: inherit;
font-family: inherit;
margin: 0;
top: 0;
}
/* groupe sous menu --------------------------------*/
.dropdown-content {
display: none;
position: absolute;
background-color: black;
width: auto;
z-index: 1;
}
/* liens des sous menu ------------------------------*/
.dropdown-content a {
float: none;
color: lightgreen;
font-size: 19px;
padding: 15px 35px 15px 15px;
text-decoration: none;
display: block;
text-align: left;
letter-spacing: normal;
}
/* bordur inférieure des liens des sous menu ---------*/
.dropdown-content a {
border-top: 1px solid #4B4A4A;
}
/* hover sur les liens qui ont des sous menu ----------*/
.topnav a:hover, .dropdown:hover .dropbtn {
background-color: #2C2C2C;
color: white;
}
/* meme chose */
.dropdown-content a:hover {
background-color: #2C2C2C;
color: white;
}
.dropdown:hover .dropdown-content {
display: block;
}
/* MEDIA QUERY ################################################################*/
/* MEDIA QUERY ################################################################*/
/* MEDIA QUERY ################################################################*/
@media screen and (max-width: 1100px) {
/* ----- disparitoin du menu horizontal --- */
.topnav a, .dropdown .dropbtn {
display: none;
background: black;
z-index: 100;
}
/* ---- apparition du bouton ouvrir du menu vertical ----- */
.topnav a.icon {
position: absolute;
float: right;
display: block;
top: 0;
margin: 0;
right: 0;
padding: 26px 25px 16px 22px;
border: none;
}
/* ------ hover du bouton fermer du menu vertical ---- */
.topnav a.icon:hover {
background: black;
border: none;
}
/* ----------- menu ----------------*/
/* ----------- menu ----------------*/
/* ----------- menu ----------------*/
/*------------ tous les liens (avec ou sans menu) -------*/
.topnav.responsive {
position: absolute;
background-color: black;
margin: 0;
padding: 0;
width: 100%;
z-index: 204;
letter-spacing: normal;
}
/* ------------ menu avec sous menu -------------*/
.topnav.responsive .icon {
position: absolute;
float: right;
display: block;
border: none;
outline: none;
width: 72px;
height: 72px;
}
/* ---------- liens sans sous menu ------ */
.topnav.responsive a {
width: 100%;
float: none;
display: block;
text-align: left;
padding-left: 35px;
border-bottom: 1px solid #4B4A4A;
}
/* -------- mettre en colonne ------------ */
.topnav.responsive .dropdown {
float: none;
}
/* ----------- sous menu -------------*/
/* ----------- sous menu -------------*/
/* ----------- sous menu -------------*/
.topnav.responsive .dropdown-content {
position: relative;
width: 100%;
margin: 0;
padding-left: 20px;
}
/* ------- afficher liens qui ont des sous-liens ------*/
.topnav.responsive .dropdown .dropbtn {
display: block;
text-align: left;
width: 100%;
padding-left: 35px;
border-bottom: 1px solid #4B4A4A;
letter-spacing: normal;
}
}
/* ----------- bouton ouvrir du menu vertical -----------*/
.topnav .menu-open {
display: block;
}
/* -------- disparition du bouton fermer du menu vertical ------ */
.topnav .menu-close {
display: none;
}
/* ------- disparition du bouton ouvrir du menu vertical -------*/
.topnav.responsive .menu-open {
display: none;
}
/* ------- bouton fermer du menu vertical -------- */
.topnav.responsive .menu-close {
position: absolute;
display: inline-block;
float: right;
top: 0;
right: 0;
margin: 0;
border: none;
outline: none;
padding: 26px 25px 16px 22px;
}
@media only screen and (max-width: 500px) {
.logo a {
font-size: 95%;
padding-bottom: 0px;
box-shadow: 0 1px 0 lightgreen;
}
}
<span id="haut-page" class="anchor"></span>
<div class="menu-wrap">
<div class="logo"><a href="index.php" target="_self"><span class="logo-line"><span class="logo-color">veg</span>animaliste</span>.com</a> </div>
<div class="topnav" id="myTopnav">
<a href="index.php" title="Page d'accueil" target="_self"><img class="sans-texte" src="img/menu/home-g.png" ></a>
<div class="dropdown">
<button class="dropbtn">VÉGANISME <img src="img/menu/down-g.png"/></button>
<div class="dropdown-content">
<a href="v-intro.php" target="_self"><img src="img/menu/dot-g.png"/>Vérités ugentes à connaître</a>
<a href="articles.php" target="_self"><img src="img/menu/dot-g.png"/>Articles</a>
<a href="reponses.php" target="_self"><img src="img/menu/dot-g.png"/>Réponses aux non-véganes</a>
<a href="reponses-av.php" target="_self"><img src="img/menu/dot-g.png"/>Réponses de AV aux non-véganes</a>
<a href="qui-sont-ils.php" target="_self"><img src="img/menu/dot-g.png"/>Qui sont-ils? </a>
<a href="ce-que-nous-pouvons-faire.php" target="_self"><img src="img/menu/dot-g.png"/>Ce que nous pouvons faire</a>
</div>
</div>
<div class="dropdown">
<button class="dropbtn">DOCUMENTS <img src="img/menu/down-g.png"/></button>
<div class="dropdown-content">
<a href="videos.php" target="_self"><img src="img/menu/dot-g.png"/>Vidéos</a>
<a href="defenitions.php" target="_self"><img src="img/menu/dot-g.png"/>Défénitions</a>
<a href="sites.php" target="_self"><img src="img/menu/dot-g.png"/>Sites recommandés</a>
<a href="livres.php" target="_self"><img src="img/menu/dot-g.png"/>Livres recommandés</a>
<a href="ressources.php" target="_self"><img src="img/menu/dot-g.png"/>Ressources</a>
</div>
</div>
<a href="recherche.php" title="Rechercher sur le site" target="_self"><img class="sans-texte" src="img/menu/recherche.png"/></a>
<a href="a-propos.php" title="À propos" target="_self"><img class="sans-texte" src="img/menu/a-propos-g.png"/></a>
<a href="contact.php" title="M'écrire" target="_self"><img class="sans-texte" src="img/menu/enveloppe-g.png"/></a>
<a href="https://www.facebook.com/renedemoors" title="Me joindre sur Facobook" target="_blank"><img class="sans-texte" src="img/partage/facebook-s.png"/></a>
<a href=" <?php
$url= $_SERVER['REQUEST_URI'];
$positionslash= strrpos($url, "/ ");
$filename= substr($url, $positionslash + 1);
echo "en/ ". $filename;
?> " title="english" target="_self"><span class="menu-lang">English</span>
</a>
<a href="javascript:void(0);" class="icon" onclick="myFunction()"><img src="img/menu/bars-g.png" alt="menu"/></a>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<div class="menu-open"><img src="img/menu/bars-g.png" alt="menu"/>
</div>
<div class="menu-close"><img src="img/menu/times-r.png" alt="fermer"/>
</div>
</a>
</div>
</div>
问题已解决：
我增加了高度：100vh; 和溢出：自动;
所以之前如果是这样的：
.topnav.responsive {
position: absolute;
background-color: black;
margin: 0;
padding: 0;
width: 100%;
z-index: 204;
letter-spacing: normal;
}
现在它是这样的：
.topnav.responsive {
position: absolute;
background-color: black;
margin: 0;
padding: 0;
width: 100%;
z-index: 204;
letter-spacing: normal;
height: 100vh;
overflow: auto;
}