Question

你好，我已经为我的网站制作了一个网格，我遇到的问题是网格重叠页脚元素我一直在尝试从设置网格容器到高度自动，看看它是否自动调整我不能给它是一个设定的高度，因为网站是响应任何帮助将被赞赏附加是我的网格的HTML和CSS代码:)

    <html> 
<head> 
<link href="/styles.css" rel="stylesheet" type="text/css">
<link href="/services-styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container">
<div class="header">
<div class="nav">
<ul>
<li><a href="/index.html">Home</a></li>
<li><a href="/services.html">Services</a></li>
<li><a href="/aboutus.html">About us</a></li>
<li><a href="/contact.html">Contact</a></li>
</ul>    
</div>    
</div>    
<div class="content">
<div class="title logo">
<h1>Logo's</h1>    
</div>

<div class="title">    
<h1>"Just a Glimpse of what we can do for you and your business"</h1>
    </div>
<div class="Grid1">   
<div class="Gallery1">
<a href="Images/logo1.jpg">
<img src="/Images/logo1.jpg" style="width:100%; height:100%;">    
    </a>    
    </div>
<div class="Gallery1">
<a href="Images/logo2.png">
<img src="/Images/logo2.png"style="width:100%; height:100%;">    
    </a>    
    </div>
<div class="Gallery1">
<a href="Images/logo3.jpg">
<img src="/Images/logo3.jpg" style="width:100%; height:100%;">    
    </a>    
    </div> 
    <div class="Gallery1">
<a href="Images/logo-grid3.jpg">
<img src="/Images/logo-grid3.jpg" style="width:100%; height:100%;">    
    </a>    
    </div>

    <div class="Gallery1">
<a href="Images/logo-grid3.jpg">
<img src="/Images/logo-grid3.jpg" style="width:100%; height:100%;">    
    </a>    
    </div>

    <div class="Gallery1">
<a href="Images/logo-grid3.jpg">
<img src="/Images/logo-grid3.jpg" style="width:100%; height:100%;">    
    </a> 
    </div>

        <div class="Gallery1">
<a href="Images/logo-grid3.jpg">
<img src="/Images/logo-grid3.jpg" style="width:100%; height:100%;">    
    </a>    
    </div>

    <div class="Gallery1">
<a href="Images/logo-grid3.jpg">
<img src="/Images/logo-grid3.jpg" style="width:100%; height:100%;">    
    </a>    
    </div>

    <div class="Gallery1">
<a href="Images/logo-grid3.jpg">
<img src="/Images/logo-grid3.jpg" style="width:100%; height:100%;">    
    </a>     

    </div>
    </div>
    </div>
    <footer>
<div class="Footer-Nav">
<ul>
<li><a href="/index.html">Home</a></li>
<li><a href="/services.html">Services</a></li>
<li><a href="/aboutus.html">About us</a></li>
<li><a href="/contact.html">Contact</a></li>
</ul>
</div>    
</footer>
    </div>
</body>
</html>

以下是所有页面的主要样式的代码

    .Gallery1{
 margin:5px;
float: left;
width:300px;
height:200px;
position:relative;
border: 1px solid #ccc;
}


.Grid1{
max-width:945px;
position: relative;
height:auto;
margin:0 auto;
margin-top: 25px;
}

div.logo{
 margin-top: 15px;
 text-align: center;
 font-size: 40px;
 font-family: Monospace;
 padding: 5px;

}
div.Gallery1:hover{
border-color:#777;
}
.title{
position: relative;
text-align: center;
margin-top:25px;
font-family: Monospace;
}




@media screen and (max-width:928px){
div.Grid1 {
width:308px;
margin:0 auto;
 }

}
@media screen and (max-width:487px){
div.Gallery1{
width:100%;
 }
div.Grid1{
width:90%;
 }
.title{
 margin:25px;
 }

}
.Grid1{
height: auto;
position: relative;
}
.content{
height:100%;
margin: 0;
padding: 0;
position: relative;
}

媒体查询

    @media screen and (max-width:928px){
   div.Grid1 {
   width:308px;
   margin:0 auto;
   }

   }

   @media screen and (max-width:487px){
   div.Gallery1{
   width:100%;
   }

Photo of Footer Issue

Answer 1

只需向页脚添加浮动，宽度为100％

Arelevant=A(2:end,:);  
idx0 = mod(bsxfun(@plus,n-v(:),1:n)-1,n);
out = Arelevant(bsxfun(@plus,(idx0*(m-1)),(1:(m-1))'));
B(2:end,:)=out;

Answer 2

所以我解决了我在这里遇到的问题是代码片段，我解决了这个问题我基本上不得不重新编写我的页脚并添加了一个高度维度来解决问题，如果有人有这个问题希望它有所帮助：）

{{1}}

如何制作网格响应重叠内容

2 个答案: