Question

我一直在使用来自Ethan Marcotte的响应式网页设计书的策略优化我一直致力于手机的网站，并添加了float：none！important;我清除了之前的浮动，但网站右侧有额外的空白区域，导致不必要的滚动。我尝试将overflow-x：hidden应用于#image div和html，body，但它似乎不起作用。我也尝试使用http://wernull.com/2013/04/debug-ghost-css-elements-causing-unwanted-scrolling/找到幽灵元素，但这并没有引导我到任何地方。如果有人可以帮助我，那就太棒了，谢谢！

网站：cristinalord.com

HTML：

<!DOCTYPE html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Cristina Lord</title>
    <link href="css/styles.css" media="screen" rel="stylesheet" type="text/css" />
</head>

<body>
    <div id="wrapper">
        <div id="header">
            <div id="site_title1">
                Cristina Lord
            </div>
            <div id="site_title2">
                Composer, Pianist
            </div>
        </div>
        <div id="content">
            <div id="menu">
                <ul>
                    <li class="selected"><a href="about.html">About</a></li>
                    <li><a href="events.html">Events</a></li>
                    <li><a href="music.html">Music</a></li>
                    <li><a href="contact.html">Contact</a></li>
                </ul>
            </div>
            <div id="images">
                <img src="images/cristina.png" alt="Cristina Lord">
            </div>  
            <div id="about">
                <p>Cristina is currently a senior at the University of California, Santa Barbara, where she is completing her B.A. degree in Music Composition at the College of Creative Studies. She will be pursuing her masters at Cal State Long Beach in the fall. While at UCSB, she has studied composition under William Kraft, Dr. Leslie Hogan, and Dr. Jeremy Haladyna, piano with Dr. Charles Asche, and conducting with Christopher Rountree.</p>
                <br>    
                <p>Cristina has worked as a piano teacher for the Santa Barbara School of Music for the past three years. She also regularly sings for the English Broadside Ballad Archive at UCSB, and is a member of the contemporary choral ensemble New Century Voices.</p>
                <br>    
                <p>Last year (2013), Cristina won a Corwin Award in the vocal category for her song cycle, Songs of American Women, which will be performed this year by the Ensemble for Contemporary Music and at the Primavera Festival at UCSB.</p>
            </div>
        </div>
        <div id="footer">
            <footer>
                <p>Copyright Cristina Lord 2014 &copy;</p>
                <a href="http://www.facebook.com/cristina.lord"><img src="images/facebooklogo.png" height="40" width="40" alt="Facebook"></a>
                <a href="http://www.soundcloud.com/cristina_lord"><img src="images/soundcloudlogo.png" height="40" width="76" alt="SoundCloud"></a>
            </footer>
        </div>
    </div>
</body>


</html>

CSS：相关的CSS是：

/* media queries for different sizes */
@media screen and (max-width: 768px){
    #images{
        min-width: 100%;
        float: none !important;
        text-align: center;
    }
    #about{
        text-align: center;
    }   
}

所有的css：

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

/*CUSTOM FONTS*/

@font-face{
    font-family: 'OpenSans';
    src: url('../fonts/OpenSans-Bold.ttf') format('truetype');
    font-weight: bolder;
}

@font-face{
    font-family: 'OpenSans';
    src: url('../fonts/OpenSans-Light.ttf') format('truetype');
}


@font-face{
    font-family: 'OpenSans';
    src: url('../fonts/OpenSans-Regular.ttf') format('truetype');
    font-weight: bold;
}



/* main font style, background color, and body paddings */


body{
    background-color: rgb(255,255,240);
    color:black;
    font-family: 'OpenSans';
    padding: 03.515625% 7.8125% 0% 7.8125%; /* 45, 100, 0, 100 / 1280px */
    text-align: left;
    line-height: 1.25em;

}

/* main header style */

div#site_title1 
{
    color:rgb(188,143,143);
    font-size: 1.75em; /* 28px / 16px */
    padding-bottom: 0.35714285714286em; /* 10 / 28px */
    font-family: 'OpenSans';
    font-weight: bolder;
    letter-spacing: 0.07142857142857em; /* 2 / 28px */
}

div#site_title2
{
    color:rgb(188,143,143);
    font-size: 1.25em; /* 20px / 16px */
    padding-bottom: 0.25em; /* 5 / 20px */
    font-family: 'OpenSans';
    font-weight: bold;
    letter-spacing: 0.1em; /* 2 / 20px */

}

/*menu style*/

div#menu ul a
{
    font-size: 1.125em; /* 18 / 16px */
    padding-bottom: 0.55555555555556em; /* 10 / 18px */
    text-decoration: none;
    transition: color 0.5s ease;
    border-color: rgb(255,255,240);

}

div#menu li
{   display: inline;}

div#menu ul a:hover
{
    color:rgb(188,143,143);
    border-bottom: 0.11111111111111em solid #BC8F8F; /* 2 / 18px */
    transition: border-color 0.5s ease;

}

div#menu
{word-spacing:0.27777777777778em; /* 5 / 18px */
text-align: center;}

#menu, #menu a {
    padding:0.55555555555556em 0.55555555555556em 1.11111111111111em 0.55555555555556em; /* 10 20 10 10 / 18px */
    margin-bottom: 0.55555555555556em; /* 10 / 18px */
}

div#menu li.selected a { color:rgb(188,143,143);border-bottom: 0.11111111111111em solid #BC8F8F;} 


/* about and image positioning */

div#about
{
    max-width: 49.074074074074%; /* 530 / 1080px */
    font-size: 1em;
      -webkit-animation: fadein 0.5s; /* Safari and Chrome */
       -moz-animation: fadein 0.5s; /* Firefox */
        -ms-animation: fadein 0.5s; /* Internet Explorer */
         -o-animation: fadein 0.5s; /* Opera */
            animation: fadein 0.5s;
    line-height: 140%;
    }

div#images
{
    float:right;
    padding-right: 7.8125%;
    padding-left: 1.388888888889%; /* 15 / 1080px */
    padding-bottom: 1.388888888889%; /* 15 / 1080px */

    -webkit-animation: fadein 0.5s; /* Safari and Chrome */
       -moz-animation: fadein 0.5s; /* Firefox */
        -ms-animation: fadein 0.5s; /* Internet Explorer */
         -o-animation: fadein 0.5s; /* Opera */
            animation: fadein 0.5s;
    width: 42.87037037037%; /* 463 */
    height:28.703703703704%; /* 310 */
    overflow: hidden;
}


/* event headers and text */
div#header{
    text-align: center;
}
.eventheader
{
    color:rgb(188,143,143);
    font-size: 1.125em; /* 18 / 16px */
    font-weight: bold;
    text-align: center;

}

.eventsubheader
{
    color:#000;
    font-weight: bold;
    text-align: center;

}

.eventtext
{
    width: 37.037037037037%; /* 400 / 1080px */
    margin-right: auto;
    margin-left: auto;
    position: center;
    text-align: center;
}


/* horizontal images - to be implemented */

#horizontalimage{
    overflow: hidden;
    width: 100%; /* 1080 / 1080px */
    height:50%; /* 400 / 800px */ 
    position: relative;
    box-shadow: 0 0 1em black;

}

#horizontalimage img {
    display: block; /*removes inline element space for text */
}

span {
    position: absolute;
    font-family: "OpenSans" ;
    font-weight: bold;
    font-size: 1.75em; /* 28 / 16px */
    color: rgb(188,143,143);
    bottom: 40%;
    text-align: left;
    left: 0;
    width:100%;
    background: rgba(0,0,0,0.7);
    padding-left: 10% !important; /* important overrides padding 2.5 for left */
    padding:2.5%; /* 10 / 1080px */
}

/* table positioning/style */

th{
    padding-bottom: 1%;
    padding-top: 2%;
    width: 250px;
}

td{
    padding:1%;
    width: 250px;
}

div#tablelist{
    color:#000;
    font-size: 0.875em; /* 14 / 16px */
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

#tablelist, #tablelist a {
padding-left:1.42857142857143em;
padding-right: 1.42857142857143em;
padding-bottom: 1.42857142857143em;
}

table {
    text-align: center;
    margin-right: auto;
    margin-left: auto;
}


/* footer style */


html,
body {
    height:100%;
    margin:0;
}

#wrapper {
    min-height:100%;
    position: relative;
    width: 100%;
    margin: 0 auto;
}
#content {
    padding-bottom:80px; /* 10 px added for extra padding between text and footer */
    overflow: auto;
}
#footer {

    border-top: 2px solid rgb(188,143,143);
    bottom:0;
    height:70px;
    left:0;
    position:absolute;
    text-align: center;
    width:100%;
    font-size: 0.75em; /* 12 / 16px */
}

body {
          box-sizing: border-box;
     -moz-box-sizing: border-box;
    }


/* MISC. */

a:hover {color:rgb(188,143,143);}


.line{
    width:38%;
    margin-left: auto;
    margin-right: auto;
}


a{text-decoration: none;
    color:#000;
        transition: color 0.5s ease;

    }
div#musicheader
{
    color:rgb(188,143,143);
    font-size: 1.25em; /* 20 / 16px */
    padding-bottom: 0.25em; /* 5 / 20px */
    font-family: 'OpenSans';
    font-weight: bold;
    letter-spacing: 0.1em; /* 2 / 20px */

}

.issuuembed{
    margin: 0 auto;
}

#floatleft{
    float:left;
}

.floatleftmulti{
    float:left;
}

#floatright{
    float: right;
}

/* media queries for different sizes */
@media screen and (max-width: 768px){
    #images{
        min-width: 100%;
        float: none !important;
        text-align: center;
    }
    #about{
        text-align: center;
    }   
}

@media screen and (max-width: 1024px){

    #about{
        min-width: 100%;
    }
}


/*fadein and center*/


div#contenttext{
    -webkit-animation: fadein 0.5s; /* Safari and Chrome */
       -moz-animation: fadein 0.5s; /* Firefox */
        -ms-animation: fadein 0.5s; /* Internet Explorer */
         -o-animation: fadein 0.5s; /* Opera */
            animation: fadein 0.5s;
            text-align: center;
            margin-left: auto;
            margin-right: auto;
}

div#musiccontent{
    -webkit-animation: fadein 0.5s; /* Safari and Chrome */
       -moz-animation: fadein 0.5s; /* Firefox */
        -ms-animation: fadein 0.5s; /* Internet Explorer */
         -o-animation: fadein 0.5s; /* Opera */
            animation: fadein 0.5s;

            text-align: center;
            margin-right: auto;
            margin-left: auto;
}

.eventcontent{
    -webkit-animation: fadein 0.5s; /* Safari and Chrome */
       -moz-animation: fadein 0.5s; /* Firefox */
        -ms-animation: fadein 0.5s; /* Internet Explorer */
         -o-animation: fadein 0.5s; /* Opera */
            animation: fadein 0.5s;
}

/* Firefox */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari and Chrome */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

Answer 1

尝试添加paddings to 0：

/* media queries for different sizes */
@media screen and (max-width: 768px){
   #images{
      min-width: 100%;
      float: none !important;
      padding: 0 !important; /* <-----add this to see */
      text-align: center;
   }
   #about{
      text-align: center;
   }   
}

此外，这也可能导致您已将填充应用于body本身的问题，您也可以避免这种情况：

/* media queries for different sizes */
@media screen and (max-width: 768px){
   body{
      padding:0 !important; /* <-----add this to see */
   }
   #images{
      min-width: 100%;
      float: none !important;
      padding: 0 !important; /* <-----add this to see */
      text-align: center;
   }
   #about{
      text-align: center;
   }   
}

Answer 2

空间是由填充引起的：

div#images {
    padding-left: 1.38889%;
    padding-right: 7.8125%;
}

您可以删除它们，或使用box-sizing: border-box。

添加float：none到图像时的空格

2 个答案: