CSS 响应式设计重叠正文

情况是：我正在自己学习如何制作网站。我已经知道一些东西，现在我决定创建一个网站。但我有一些挣扎...我正在尝试使其响应迅速，它有点工作，但是当您调整页面大小时，页脚会重叠正文中的内容......

这个想法是在标签开始重叠时向下滚动标签。

我已经在谷歌上搜索了类似的问题并检查了线程，尝试了很多东西，但仍然无处可去：| 帮助？。。。

body{
margin: 0px;
font-family: 'Open Sans', sans-serif;
background-image: url(https://umad.com/img/2015/1/dark-geometric-wallpaper-176-205-hd-wallpapers.jpg);
}
/*+++NAVBAR*/
#primary_nav_wrap{
width: 100%;
background:#333;
margin: 0;
float:left;
}
#primary_nav_wrap ul
{
background-color: #333;
list-style:none;
position:relative;
float:left;
margin:0;
padding:0;
}
#primary_nav_wrap ul a
{
display:block;
color:#fff;
text-decoration:none;
font-weight:500;
line-height:50px;
padding:0 20px;
font-family: 'Open Sans',"Helvetica Neue",Helvetica,Arial,sans-serif
}
#primary_nav_wrap ul li
{
position:relative;
float:left;
margin:0;
padding:0
}
#primary_nav_wrap ul li.current-menu-item
{
background:#4CAF50
}
#primary_nav_wrap ul li:hover
{
background:#282828
}
#primary_nav_wrap ul ul
{
display:none;
position:absolute;
top:100%;
left:0;
background:#333;
padding:0
}
#primary_nav_wrap ul ul li
{
float:none;
width:200px
}
#primary_nav_wrap ul ul a
{
line-height:120%;
padding:10px 15px
}
#primary_nav_wrap ul ul ul
{
top:0;
left:100%
}
#primary_nav_wrap ul li:hover > ul
{
display:block
}
/*---NAVBAR*/

.hometitle span{
width: 100%;
}
.hometitle h1{
font-size: 80px;
color:#fff;
text-align: center;
clear: both;
padding-top: 10%;
}
.hometitle h2{
font-size: 36px;
color:#fff;
text-align: center;
clear: both;
margin-top: -60px;
}

/*+++TAGS*/
.tags {
position: fixed;
bottom: 10px;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
}
.item {
-webkit-flex: 1 auto;
flex: 1 auto;
padding: 0.5rem;
text-align: center;
}
.item a {
display: block;
background-color: #4CAF50;
text-decoration: none;
padding: 0.2rem 0.5rem;
border-radius: 3px;
color: #fff;
}
/*---TAGS*/

.homecontainer {
width: 100%;
height: 20%;
min-height: 400px;
}

#footer{
position: relative;
bottom: 0;
width: 100%;
height: 20%;

}

.HTML

<!DOCTYPE html>
<html lang="en">
<head>
<title>Home</title>
<meta name"viewport" content="width=device-width, initial scale=1">
<meta charset="utf-8">
<link rel="shortcut icon" href="/images/favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300" rel="stylesheet">
<link rel="stylesheet" href="/arturnmk/style.css">
</head>
<body>
<div class="main">

<nav id="primary_nav_wrap">
<ul>
<li class="current-menu-item"><a href="#">Home</a></li>
<li><a href="portfolio.html">Menu</a>
<ul>
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
</ul>
<li><a href="projects.html">Menu</a></li>
<li><a href="services.html">Menu</a>
<ul>
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">WutWut</a></li>
</ul>
</li>
<li><a href="contacts.html">Menu</a></li>
</ul>
</nav>

<div class="homecontainer">

<div class="hometitle">
<span>
<h1>Firtname Lastname</h1>
</span>
<span>
<h2>Thing to say/state</h2>
</span>
</div>



</div>





</div>


</body>
<footer>
<div class="tags">
<div class="item"><a href="#">TagTagTagTag</a></div>
<div class="item"><a href="#">TagTagTag</a></div>
<div class="item"><a href="#">TagTag</a></div>
<div class="item"><a href="#">Tag</a></div>
<div class="item"><a href="#">TagTagTagTag</a></div>
<div class="item"><a href="#">TagTagTag</a></div>
<div class="item"><a href="#">TagTagTag</a></div>
<div class="item"><a href="#">TagTagTag</a></div>
<div class="item"><a href="#">TagTagTag</a></div>
<div class="item"><a href="#">TagTagTagTag</a></div>
<div class="item"><a href="#">TagTag</a></div>
<div class="item"><a href="#">TagTag</a></div>
<div class="item"><a href="#">PTagTagTag</a></div>
<div class="item"><a href="#">TagTagTagTagTagTag</a></div>
<div class="item"><a href="#">TagTagTag</a></div>
<div class="item"><a href="#">Tag16 Tag16 Tag16Tag16</a></div>
<div class="item"><a href="#">Tag15Tag15</a></div>
<div class="item"><a href="#">Tag14Tag14Tag14</a></div>
<div class="item"><a href="#">Tag13</a></div>
<div class="item"><a href="#">Tag12</a></div>
<div class="item"><a href="#">Tag11</a></div>
<div class="item"><a href="#">Tag10</a></div>
<div class="item"><a href="#">Tag9</a></div>
<div class="item"><a href="#">Tag8</a></div>
<div class="item"><a href="#">Tag7</a></div>
<div class="item"><a href="#">Tag6</a></div>
<div class="item"><a href="#">Tag5</a></div>
<div class="item"><a href="#">Tag4</a></div>
<div class="item"><a href="#">Tag3</a></div>
<div class="item"><a href="#">Tag2</a></div>
<div class="item"><a href="#">Tag1</a></div>
</div>
</footer>
</html>

要实现响应式网页设计，请使用 CSS3 媒体查询

重叠问题是由于主容器类的最小高度和标签类的固定位置

请使用 CSS3 媒体查询检查以下选项 https://codepen.io/nagasai/pen/vJbqeE

.CSS：

html{
height:100%;
}
body{
height:100%;
margin: 0px;
font-family: 'Open Sans', sans-serif;
background-image: url(https://umad.com/img/2015/1/dark-geometric-wallpaper-176-205-hd-wallpapers.jpg);
}
/*+++NAVBAR*/
#primary_nav_wrap{
width: 100%;
background:#333;
margin: 0;
float:left;
}
#primary_nav_wrap ul
{
background-color: #333;
list-style:none;
position:relative;
float:left;
margin:0;
padding:0;
}
#primary_nav_wrap ul a
{
display:block;
color:#fff;
text-decoration:none;
font-weight:500;
line-height:50px;
padding:0 20px;
font-family: 'Open Sans',"Helvetica Neue",Helvetica,Arial,sans-serif
}
#primary_nav_wrap ul li
{
position:relative;
float:left;
margin:0;
padding:0
}
#primary_nav_wrap ul li.current-menu-item
{
background:#4CAF50
}
#primary_nav_wrap ul li:hover
{
background:#282828
}
#primary_nav_wrap ul ul
{
display:none;
position:absolute;
top:100%;
left:0;
background:#333;
padding:0
}
#primary_nav_wrap ul ul li
{
float:none;
width:200px
}
#primary_nav_wrap ul ul a
{
line-height:120%;
padding:10px 15px
}
#primary_nav_wrap ul ul ul
{
top:0;
left:100%
}
#primary_nav_wrap ul li:hover > ul
{
display:block
}
/*---NAVBAR*/

.hometitle span{
width: 100%;
}
.hometitle h1{
font-size: 80px;
color:#fff;
text-align: center;
clear: both;
padding-top: 10%;
}
.hometitle h2{
font-size: 36px;
color:#fff;
text-align: center;
clear: both;
margin-top: -60px;
}

/*+++TAGS*/
.tags {
bottom: 10px;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
}
.item {
-webkit-flex: 1 auto;
flex: 1 auto;
padding: 0.5rem;
text-align: center;
}
.item a {
display: block;
background-color: #4CAF50;
text-decoration: none;
padding: 0.2rem 0.5rem;
border-radius: 3px;
color: #fff;
}
/*---TAGS*/

.homecontainer {
width: 100%;
height: 20%;
min-height: 400px;
}

#footer{
position: relative;
bottom: 0;
width: 100%;
height: 20%;

}
@media only screen and (max-width: 550px) {
.homecontainer {
width: 100%;
height: 20%;
min-height: 100px;
}
footer{
position: absolute;
top: 400px;
width: 100%;
height: 20%;

}
}

> 1) 对于要在页面上显示的元素，不应在<body>标记之外使用 HTML 代码。页脚应包含在<body>标记内。您可以创建一个<div>来包含您现在在文档正文中拥有的元素。

2)为了避免重叠(考虑到你想保留现有的代码结构和CSS)，你可以设置一个margin-bottom等于页脚对主要内容容器的height。如果您的页脚始终具有相同的高度，则此方法将起作用。

3)如果您的页脚需要更改高度，另一个简单的解决方案(但有缺点)是让页脚坚持正常的页面流，而不是绝对将其定位到文档的底部，并为主要内容的容器设置min-height。应设置min-height以确保页脚不会位于用户屏幕中间的页面较短(其中没有大量内容)。在这种情况下，主内容容器上的min-height将在主内容下方创建空白，从而向下推送页脚。

我可能弄错了，但是唯一的问题是页脚

妨碍了吗？如果我希望页脚停留在屏幕底部，我通常执行以下操作：

#footer{
position: absolute;
top: 100%;
height: however high you want it to be;
transform: translateY(-100%) ;
}

这会将页脚一直推离底部的屏幕，但transform: translate会将其拉回页脚的高度。

相关内容

最新更新

热门标签：