Question

http://shrineweb.in/other-files/clients/markalves21/responsive/html/index.html

在上面的链接中，蓝色导航的宽度响应，但高度不响应。我不知道我做错了什么，我已经设定了最小高度。

这是标记：

<div id="menu">

<!--the navigation/menu-->
<nav>
    <ul><!--un-ordered list with list items and child list items if the menuis to have a drop down-->
    <li><a href="index.html">Home</a></li>
        <li><a href="aboutus.html">About Us</a>
        <ul>
        <li><a href="location.html">Location</a></li><!--child menu-->
        </ul>
        </li>
    <li><a href="contactus.html">Contact Us</a></li>
    <li>News
    <ul>
    <li><a href="clubnews.html">Club News</a></li>
    </ul>
    </li>
    <li>The Pitch
    <ul>
    <li><a href="plan.html">Plan</a></li>
    <li><a href="location.html">Location</a></li>
    </ul>
    </li>
    <li>Teams
    <ul>
    <li><a href="under15.html">Under 15</a></li>
    <li><a href="under16.html">Under 16</a></li>
    <li><a href="under18.html">Under 18</a></li>
    </ul>
    </li>
    <li>Matches
    <ul>
    <li><a href="fixtures.html">Fixtures</a></li>
    <li><a href="tables.html">Tables</a></li>
    <li><a href="results.html">Results</a></li>
    </ul>
    </li>
    <li>Help
    <ul>
    <li><a href="askaq.html">Ask a Question</a></li>
    <li><a href="faq.html">FAQ's</a></li>
    </ul>
    </li>
    </ul>
</nav>

</div>

这是css：

@media screen and (min-width: 1px) and (max-width: 2000px) {
#header {
width: 100%;
}
#header img {
width: 100%;
}
#menu {
color: #fff;
background: #4E84FE;
margin: 0px auto;
width: 100%;
min-height: 43px;
}
}

Answer 1

请为#menu ID添加此样式

#menu {
    background: none repeat scroll 0 0 #4E84FE;
    color: #FFFFFF;
    float: left;
    height: auto;
    margin: 0 auto;
    width: 1000px;
}

如果要删除滚动条，请尝试使用

#main {  
    border: none; 
}

Answer 2

将以下CSS属性添加到#menu

overflow: hidden;
height: auto;

请注意，您可能希望在下拉菜单周围添加一个细的白色边框或调整蓝色阴影，因为它开始与菜单栏的第二行混合。另一种选择是使用媒体查询将您的书写菜单转换为下拉菜单或其他形式的小屏幕移动友好菜单。

另外，我建议将这些样式应用为类而不是id（.menu）。这是处理这类事情的正确方法。

Answer 3

使#main 99％的宽度和滚动条消失。我不知道为什么，但它会。

#main{width: 99%}

对div的反应高度？

3 个答案: