我使用的是Skeleton响应式网格系统，遇到了一个问题，当浏览器收缩时，导航与我的列重叠。其他所有内容均正确布置。这是我的意思的图片。
HTML：
<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!-->
<html lang="en">
<!--<![endif]-->
<head>
<!-- Basic Page Needs -->
<meta charset="utf-8">
<title>Your Page Title Here :)</title>
<meta name="description" content="">
<meta name="author" content="">
<!-- Mobile Specific Metas -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!-- CSS -->
<link rel="stylesheet" href="stylesheets/base.css">
<link rel="stylesheet" href="stylesheets/skeleton.css">
<link rel="stylesheet" href="stylesheets/layout.css">
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Favicons -->
<link rel="shortcut icon" href="images/favicon.ico">
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
</head>
<body>
<div class="band navigation">
<div class="container">
<div id="logo" class="two columns">
<h1>DS</h1>
</div>
<div id="nav" class="fourteen columns">
<ul><li><a href="#">TEST</a></li>
<li><a href="#">TEST</a></li>
<li><a href="#">TEST</a></li>
</ul>
</div>
</div>
</div>
</div> <!-- End Band -->
<div class="band content" id="content">
<div class="container main">
<div class="nine columns alpha">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean non ligula urna. Curabitur eleifend lacinia turpis, ac fringilla nulla scelerisque nec. Nulla pretium vulputate vehicula. Nam eu condimentum neque. Morbi ut neque gravida, ornare metus ac, pretium turpis. Mauris odio arcu, feugiat vel blandit ac, ultricies id nunc. In in libero porttitor, rutrum urna a, scelerisque est. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Cras vitae nisi quis metus pretium ornare. Maecenas venenatis sapien id justo fermentum mollis. Mauris porta fringilla lacinia. Aliquam laoreet quis mi imperdiet congue. Donec pharetra tellus sed mauris porttitor vestibulum. Pellentesque eget imperdiet justo. Vivamus ac fringilla leo. Curabitur sapien orci, pharetra semper bibendum et, sodales eu quam.
Curabitur sit amet ullamcorper tortor. Nam placerat tellus sed convallis cursus. Duis at augue eleifend, euismod quam eu, tincidunt felis. Integer ut ullamcorper mauris, lobortis convallis est. Nullam vitae sapien massa. Suspendisse eget enim enim. Morbi pretium consectetur lectus ac aliquet. Fusce mauris nisl, tincidunt a ultrices vestibulum, mattis sed sem. Integer consequat viverra eros, non ullamcorper dui. Nam massa elit, malesuada tempus nibh eget, pretium commodo lectus. Aenean pharetra porta lacus quis cursus. Aliquam erat volutpat.
Aenean porta ac ligula a sodales. Cras scelerisque purus enim, ac imperdiet ligula mollis in. Fusce sed lacinia purus, ac rhoncus nunc. Nunc eget elit quis risus commodo ultrices a eget est. Aliquam sit amet ultrices nunc. Praesent accumsan risus eu magna aliquam posuere. Etiam volutpat ut elit vel condimentum.
Nam vel nisl nisl. Morbi tincidunt velit vel diam commodo rutrum quis semper ligula. Quisque lacinia nec est ut aliquet. Aenean non aliquam turpis. Nullam pellentesque sit amet metus eu rhoncus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam venenatis, enim sit amet sollicitudin rhoncus, lorem lectus imperdiet justo, at placerat risus urna non diam. Ut vitae tincidunt enim, non feugiat massa. Integer fermentum suscipit lorem eu placerat. Donec aliquet, lectus at tincidunt pharetra, nulla augue auctor elit, vel dapibus arcu felis vel augue. Sed fermentum congue tristique. Nam nec sodales massa, eget porttitor lacus. Donec at dui semper, pretium dolor pulvinar, faucibus quam.</p></div>
<div id="welcome" class="seven columns omega">
<h1>DS</h1>
<h3>This is a test</h3>
</div>
<div class="seven columns omega">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean non ligula urna. Curabitur eleifend lacinia turpis, ac fringilla nulla scelerisque nec. Nulla pretium vulputate vehicula. Nam eu condimentum neque. Morbi ut neque gravida, ornare metus ac, pretium turpis. Mauris odio arcu, feugiat vel blandit ac, ultricies id nunc. In in libero porttitor, rutrum urna a, scelerisque est. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</div>
<div id="download" class="four columns omega">
<p>Download for free on the iPhone.</p>
</div>
<div class="three columns omega">
<img src="images/appleAppStore.png" />
</div>
</div>
</div>
</body>
</html>
CSS：
.container {
}
#welcome {
margin-top: 10px;
text-align: left;
}
.band.navigation{
background-color: #3d6430;
width:100%;
border-bottom: 10px solid #28421f;
margin: 0px;
position: fixed;
z-index: 3;
top:0;
}
.band.content {
margin-top: 100px;
}
#welcome {
margin-top:0;
}
#welcome h1 {
text-align: center;
}
#welcome h2 {
text-align: center;
}
#navigation {
top:0;
background-color: #3d6430;
}
#download {
margin-top: 10px;
}
#nav {
margin: 13px 0 0 0;
background-color: #3d6430;
}
#nav ul li {
display: inline;
margin: 0 20px 0 0;
margin-bottom: 130px;
}
#nav a {
font-weight: heavy;
text-decoration: none;
color: #fff;
}
#nav a:hover {
text-decoration: underline;
}
#headerImage img {
margin-bottom: 50px;
max-width: 100%;
height: auto;
}
#welcome {
margin-bottom: 20px;
}
/*
* Skeleton V1.2
* Copyright 2011, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 6/20/2012
*/
/* Table of Content
==================================================
#Site Styles
#Page Styles
#Media Queries
#Font-Face */
/* #Site Styles
================================================== */
/* #Page Styles
================================================== */
/* #Media Queries
================================================== */
/* Smaller than standard 960 (devices and browsers) */
@media only screen and (max-width: 959px) {}
/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 959px) {}
/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {}
/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px) {}
/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {}
/* #Font-Face
================================================== */
/* This is the proper syntax for an @font-face file
Just create a "fonts" folder at the root,
copy your FontName into code below and remove
comment brackets */
/* @font-face {
font-family: 'FontName';
src: url('../fonts/FontName.eot');
src: url('../fonts/FontName.eot?iefix') format('eot'),
url('../fonts/FontName.woff') format('woff'),
url('../fonts/FontName.ttf') format('truetype'),
url('../fonts/FontName.svg#webfontZam02nTh') format('svg');
font-weight: normal;
font-style: normal; }
最佳答案
这是由于position: fixed元素上的.navigation属性所致。
固定位置将元素从文档流中删除，这意味着其位置不会影响后续元素的位置（类似于position: absolute，但“固定”不会建立新的偏移上下文，并且始终相对于窗口而不是文档进行定位或偏移内容）。
您的.content元素具有margin-top: 100px，当该网站显示在桌面屏幕上时，该元素可抵消导航下方的内容，因为.navigation元素的高度不超过100px。
但是，当屏幕/视口大小像在移动浏览器上一样缩小时，.navigation元素会变高以容纳其内容，因为#nav包裹在#logo下，因为没有空间可以将它们并排放置。一旦它高出100像素，它就会开始与.content重叠，因为margin-top上的.content尚未相应增加，无法为更高的.navigation腾出空间。 （.navigation的高度对.content的位置没有影响，因为它的fixed位置如前所述）。
解决方案是添加需要时增加margin-top的媒体查询。我无法确切地告诉您所需的断点或断点，但是在此处调整max-width和margin-top像素值应该可以满足您的需要：
@media only screen and (max-width: 320px) {
.band.content {
margin-top: 140px;
}
}
更精确的解决方案包括使用JS根据
margin-top的高度动态设置.content的.navigation（使用jQuery，并在两个元素之间添加20px的间距）：$(document).ready(function() {
$('.band.content').css('margin-top', $('.navigation').outerHeight() + 20);
}
关于html - 骨架网格-缩小浏览器时导航与第一列重叠，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/20005339/