Question

我有一个带有下拉菜单的导航栏，但在移动设备上显示时却没有100％。我做了这样，当屏幕小于768px（Mobile First）时，所有列class =“col-”的列都显示为100％。但是下拉菜单不遵循父菜单所在的规则。我怎么能解决这个问题？Thx提前！

<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>

Answer 1

当将元素位置更改为绝对时，块级元素将不再填充其父级的100％宽度，而是仅填充与其子级相同的空间。

有两种方法可以解决这个问题。

将100％宽度添加到绝对元素

宽度：100％;
将左右绝对元素设置为0

左：0; 右：0;

添加此内容后，左侧和右侧的剩余空间是由于您的父元素在左侧和右侧有填充和边距。

您需要在手机上移除这些内容，以便菜单拉伸全屏宽度。

Answer 2

下拉菜单没有达到100％的原因是因为上面的div上有一个10px的填充（navbar-1）。所以我删除了左右填充，现在一切都是100％。

移动时，下拉菜单不是100％

2 个答案: