Need content below menu to be pushed down only when menu is expanded (CSS)

问题

This is my first post on stack overflow. I am having a bit of difficulty developing a responsive website layout. When my browser window is less than 400px wide my menu changes to a mobile style design.

You can see an example of this in its expanded form below:

What I want to achieve is that when I click 'Menu' to collapse the dropdown, the content below should move up to just below the menu.

Another image will help illustrate the problem:

As you can see there is a whitespace above the content which obviously is quite inefficient on a small display.

The menu items which expand are styled like this as default:

{
visibility: hidden;
}

I think this is part of the problem as the list items are there but just hidden but I am unsure.

I do apologize for the basic nature of the question as I am a learner and am only now beginning to dabble in efficient responsive designs.

Any suggestions would be helpful,

Thanks,

Steve.

回答1:

If you use

visibility: hidden;

you will just hide the elements, but they will still be there, occupying space.

If you don't want that, use

display: none;

回答2:

You can try with:

display:none;

Visibility doesn't change the size of the element.

回答3:

DEMO

CSS:

*{margin:0;padding:0; box-sizing:border-box;}

section{
    width:200px;
    border:1px solid #ccc;
    transition: all 3s ease;
}

section menu, section article{
    display:block;
    width:100%;
    clear:both;
}
section{
    text-align: center;
}
article img{
    width:150px;
    height:150px;
    background:#333;
}
menu{
    height:0px;
    overflow:hidden;
}
menu li{
    list-style:none;
    padding:6px 2px;
    width:100%;
}
menu.active{
    height:auto;
}
button{cursor:pointer;}

HTML:

<section>
    <button>Click ME</button>
    <menu>
        <li>Users</li>
        <li>Gallery 1</li>
        <li>Gallery 2</li>
        <li>Apps</li>
    </menu>
    <h2>Users</h2>
    <article>
        <div><img/></div>
        <div><img/></div>
        <div><img/></div>
        <div><img/></div>
        <div><img/></div>
    </article>
</section>

js:

var clickMe = document.querySelector("button"),
    menu = document.querySelector("menu");
clickMe.addEventListener('click', function () {
    menu.classList.toggle("active");
});

来源：https://stackoverflow.com/questions/25587489/need-content-below-menu-to-be-pushed-down-only-when-menu-is-expanded-css