Skeleton Grid - 当浏览器收缩时，导航会重叠第一列

时间：2013-11-15 16:05:05

标签： html css responsive-design

我正在使用Skeleton响应式网格系统，并且遇到了一个问题，当浏览器收缩时，我的导航会重叠我的列。其他一切都正确布局。这是我的意思的图片。

Full Browser

Shrunk

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; }

1 个答案:

答案 0 :(得分：1)

这是由于position: fixed元素上的.navigation属性。

固定定位会从文档流中删除元素，这意味着它的位置不会影响后续元素的定位（类似于position: absolute，但“固定”不会建立新的偏移上下文，并且始终相对于窗口而不是文档或偏移上下文）。

您的.content元素具有margin-top: 100px，当网站显示在桌面屏幕上时，该元素可用于偏移导航下方的内容，因为.navigation元素不高于100px。< / p>

但是，当屏幕/视口大小与在移动浏览器上缩小时，.navigation元素会变得更高以容纳其内容，因为#nav包裹在#logo之下，因为没有房间把它们并排放在一起。一旦它高于100px，它就会开始与.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);
}
相关问题
最新问题