下拉菜單移動時不是100％

我有一個帶下拉菜單的導航欄，但在移動設備上顯示時不會100％。我做到了這一點，當屏幕小於768px（Mobile First）時，所有具有class =「col-」的列都會顯示100％，但下拉菜單並不遵循此規則，因爲父菜單位於此處。解決這個問題？Thx提前！下拉菜單移動時不是100％

<head> 
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> 
    <meta charset="utf-8"> 
    <title>Test</title> 
    <meta name="description" content="Fullscreen backgrounds with centered content"> 
</head> 

<body> 
    <div class="col-12 navbar-0"> 
     <div class="col-10 col-container col-center-block navbar-1"> 
      <div class="colom col-4 home"><strong><a href="index.php">HOME</a></strong></div> 
      <div class="colom col-4 dropdown aanbod"> 
       <button onclick="myFunction()" class="dropbtn">BERLAMO</button> 
       <div id="myDropdown" class="dropdown-content col-12"> 
        <a href="http://berlamo.be/index.php/webdesign-2">ONE-PAGE-WEBSITES</a> 
        <a href="http://berlamo.be/index.php/huis-te-koop">HUIS TE KOOP</a> 
        <a href="index.php?option=com_content&view=article&id=4">PORTFOLIO</a> 
       </div> 
      </div> 
      <div class="colom col-4 contact"><strong><a href="http://berlamo.be/contactform.html">CONTACT</a></strong></div> 

     </div> 
    </div> 
    <style> 

/*#FB4D4D red, #414F71; blue*/ 
    /* Navigation */ 

    .navbar-0 { 
     height: auto; 
    } 

    .navbar-1 { 
     text-align: center; 
     color: #414F71; 
     padding: 10px; 
    } 

    .home, 
    .contact { 
     padding: 0px; 
    } 

    /* Dropdown Button */ 
    .dropbtn { 
     text-align: center; 
     font-size: 15px; 
     font-family: 'Open Sans', sans-serif; 
     background-color: white; 
     color: #414F71; 
     padding: 0px; 
     margin: 0px; 
     border: none; 
     cursor: pointer; 
     font-weight: bold; 
    } 
    /* The container <div> - needed to position the dropdown content */ 

    .dropdown { 
     position: relative; 
     margin: 5px; 
    } 
    /* Dropdown Content (Hidden by Default) */ 

    .dropdown-content { 
     display: none; 
     position: absolute; 
     background-color: white; 
     min-width: 160px; 
     z-index: 1; 
margin-top: 10px; 
    } 
    /* Links inside the dropdown */ 

    .dropdown-content a { 
     color: #414F71; 
     padding: 12px 16px; 
     text-decoration: none; 
     display: block; 
     border-top: 1px solid #FB4D4D; 
    } 
    /* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */ 

    .show { 
     display: block; 
     border: none; 
    } 

    /*2e drop*/ 
    /* Dropdown Button */ 

    .dropbtn2 { 
     font-size: 15px; 
     font-family: 'Open Sans', sans-serif; 
     background-color: white; 
     color: #414F71; 
     padding: 0px; 
     margin: 0px; 
     border: none; 
     cursor: pointer; 
     font-weight: bold; 
    } 
    /* The container <div> - needed to position the dropdown content */ 

    .dropdown2 { 
     position: relative; 
     margin: 5px; 
    } 
    /* Dropdown Content (Hidden by Default) */ 

    .dropdown-content2 { 
     display: none; 
     position: absolute; 
     background-color: white; 
     min-width: 160px; 
     z-index: 1; 
margin-top: 10px; 
    } 
    /* Links inside the dropdown */ 

    .dropdown-content2 a { 
     color: #414F71; 
     padding: 12px 16px; 
     text-decoration: none; 
     display: block; 
     border-top: 1px solid #FB4D4D; 
    } 
    /* Change color of dropdown links on hover */ 

    .dropdown-content2 a:hover { 
     background-color: #f1f1f1 
    } 
    /* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */ 

    .show { 
     display: block; 
     border: none; 
    } 

/*Einde drop*/ 

    button:focus { 
     outline: 0; 
    } 
    </style> 
    <script type="text/javascript"> 
/*function myFunction(id) { 
     document.getElementById(id).classList.toggle("show"); 
}*/ 
    function myFunction() { 
     document.getElementById("myDropdown").classList.toggle("show"); 
    } 

    /*If you bind 2 onclick then only last one will fire*/ 

    window.onclick = function(event) { 
     if (!event.target.matches('.dropbtn')) { 
      removeShow("dropdown-content"); 
     } 

     if (!event.target.matches('.dropbtn2')) { 
      removeShow("dropdown-content2"); 
     } 
    } 

    function removeShow(className) { 
     var dropdowns = document.getElementsByClassName(className); 
     var i; 
     for (i = 0; i < dropdowns.length; i++) { 
      var openDropdown = dropdowns[i]; 
      if (openDropdown.classList.contains('show')) { 
       openDropdown.classList.remove('show'); 
      } 
     } 
    } 

    function myFunction2() { 
     document.getElementById("myDropdown2").classList.toggle("show"); 
    } 
    </script>

來源

2017-10-12 vanberla

當改變一個元素的位置絕對的，一個塊級元素將不再填補100％的寬度它的父，而是因爲它是孩子們只會填補儘可能多的空間。

有2種方法可以解決這個問題。

添加100％寬度到絕對元素

寬度：100％;
集的絕對元素左右至0

左：0; right：0;

一旦你添加了這個，左邊和右邊的剩餘空間是由於你的父元素在左邊和右邊有填充和邊距。

您將需要在菜單上移除這些菜單以擴展全屏寬度。

來源

2017-10-12 11:42:42 user2019065

感謝您的回答，但我不太關注我害怕...我向.dropdown-content添加了100％的寬度，但它不會改變任何內容。我是否把它放在錯誤的課堂上？ – vanberla

下拉菜單沒有去100％的原因是因爲上面的div（navbar-1）上有一個10px的填充。所以我刪除了左側和右側的填充，現在一切都變成了100％。

來源

2017-10-12 15:55:59 vanberla

下拉菜單移動時不是100％

回答

相關問題