Question

您好我是第一次尝试设计布局，设计应该是响应式的。在给出正文和html height : 100%之后，我无法点击我的菜单。在此之前，响应菜单工作正常。

如果我从html中删除了部分和页脚，并删除了height : 100%的body和html标记。我可以点击菜单。任何人都可以帮我解决这个问题。两个问题 1.响应式菜单无法点击 2.页脚不在底部。

html代码

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <title>Title</title>
        <link rel="stylesheet" type="text/css" href="Style.css">
    </head>
    <body>
        <header>
            <input type ="checkbox" id ="menuToggle" checked ="checked"/>
            <label for ="menuToggle" class ="menu-icon">&#9776</label>
            <div id ="logo">Heading</div>
            <nav class="main-nav">
                <ul>
                    <li><a href="#">HOME</a></li>
                    <li><a href="#">ABOUT</a></li>
                    <li><a href="#">CONTACT</a></li>
                </ul>
            </nav>
        </header>
        <section>
            <p>
                Lorem Ipsum is simply dummy text of the printing and rem Ipsum has been 
            </p>
        </section>
        <footer>
            <div id="footer">
                <p>
                    Copyright © 2016 by sample.com. All Rights Reserved.
                </p>
            </div>
        </footer>
    </body>
</html>

css代码

* {
    padding: 0;margin: 0;
}
html {
    height: 100%;margin:0;padding:0;
}
body {
    font-family: sans-serif;height: 100%;margin: 0;padding: 0;
    position: relative;
}
header {
    width: 100%;height: 100px;margin: auto;z-index: 99;background: #FFF;
    border-bottom: 1px solid #EEE;
}
section {
    height : 100%;top:50px;position:relative;
}
footer {
    width : 100%;background:#034676;height:20px;
    bottom:0px;position:relative;
}
a {
    text-decoration: none;color: blue;font-size: 14px;
}
li {
    list-style-type: none;
}
#logo {
    float: left;line-height: 50px;color: #147DC2;font-size: 30px;
}
header nav {
    width: 100%;text-align: center;
}
header nav ul {
    float: left;line-height: 50px;
}
header nav li {
    display: inline-block;
}
header nav a {
    padding: 10px;color: #f1e7d1;
}
header nav a:hover {
    background: #032976;color: #FFF;border-radius: 5px;
}
.main-nav {
    background: #034676;width: 100%;height: 50px;position: absolute;top: -101px;
    transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    z-index: -1;
}
.menu-icon {
    float : right;padding : 10px 20px;background : #034676;
    color : #FFF;cursor : pointer;border-radius : 5px;margin : 5px 5px 0 0;
}
#menuToggle {
    display: none;
}
#menuToggle:checked ~ .main-nav {
    position: absolute;top: 101px;
}

/********Responsive*/
@media screen and (max-width: 480px) {
    header nav li {
        display: block;
    }
    header nav a {
        display: block;padding :0;border-bottom : 1px solid #040376
    }
    header nav a:hover {
        border-radius: 0;
    }
    .main-nav {
        top : -350px;height : auto;
    }
    header nav ul {
        float : none;line-height : 50px;
    }
}

Answer 1

关于问题一：你把z-index等于-1，这就是为什么链接不能被点击

.main-nav {
 z-index: 100;
}

关于问题2：你不能使中间部分等于100％，这意味着它将占据整个窗口。不要设置或自动设置。您设置了节和页脚相对，因此页脚不能跟随节。

<section></section>
<footer></footer>

默认设置没问题。

看看这个：

header {width: 100%;height: 100px;margin: auto;z-index: 99;background: #FFF;
border-bottom: 1px solid #EEE;}

你把标题z-index等于99。因此，具有较小z-index（默认为0）的导航栏位于标题下方。如果需要，设置z-index而不是一直设置它。：）

Answer 2

问题1：

从您z-index: -1班级

中删除.menu-nav

问题2：

在margin-top: 50px代码

中使用top: 50px代替section

响应式网站设计问题

2 个答案: