页面太大了窗口

时间：2013-12-26 10:21:19

标签： html css

加载页面时，页面太大。我有绝对定位页面上的元素，但当我有一个足够大的窗口包含内容（1900px / etc）时，它们都不会超出页面的范围。换句话说，所有元素都适合身体，而不会超出我在测试的设备上的边界。我有一个跨越100％页面的div，并且有一个水平滚动条，div可以向左移动大约100px并且不会跨越整个页面。当解析页面时，是否存在某种填充/等等，这会使页面延伸超过它的最外层元素，如果是这样，我将如何重置它？

http://jsfiddle.net/7CPfz/ 

<html >
    <head>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>    
        <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
        <link rel="shortcut icon" href="favicon.ico">
        <title>Tipsy Trolley Price Estimator</title>
        <meta name="viewport" content="width=1400px, user-scalable=yes, initial-scale=1.0">

        <meta charset="UTF-8">
    </head>

    <body>
            <img id="homeLink" src="homeLinkImage.png">
            <div id="pageDivider"></div>
            <div id="homeLinkBackground"></div>
            <div id = "slider"><img id="sliderImage" src="haha.png"></div>
            <img id = "busType1" class="busType1 busType" src="busType1.png">
            <img id = "busType2" class="busType2 busType" src="busType2.png">
            <img id = "busType3" class="busType3 busType" src="busType3.png">
            <img  id ="busTypeBack1" class="busType1 busTypeBack" src="busTypeBack.png">
            <img  id ="busTypeBack2"  class="busType2 busTypeBack" src="busTypeBack.png">
            <img  id ="busTypeBack3"  class="busType3 busTypeBack" src="busTypeBack.png">
            <div id="contactLinkContainer">
                <img  id ="facebook" src="facebookLogo.png">
                <img  id ="email" src="email.png">
                <img  id ="phone" src="phone.png">
                <img  id ="facebookBack"  src="facebookLogoBack.png">
                <img  id ="emailBack"  src="emailBack.png">
                <img  id ="phoneBack"  src="phoneBack.png">
            </div>
            <div id="contactContainer"></div>
            <div id="busType1Ring" class="busTypeRing"></div>
            <div id="busType2Ring" class="busTypeRing"></div>
            <div id="busType3Ring" class="busTypeRing"></div>
            <div id="sliderContainer">
                <div id="sliderDiv1"  class="sliderDiv"><p class="sliderNumbers">1</p></div>
                <div id="sliderDiv2"  class="sliderDiv"><p class="sliderNumbers">2</p></div>
                <div id="sliderDiv3"  class="sliderDiv"><p class="sliderNumbers">3</p></div>
                <div id="sliderDiv4"  class="sliderDiv"><p class="sliderNumbers">4</p></div>
                <div id="sliderDiv5"  class="sliderDiv"><p class="sliderNumbers">5</p></div>
                <div id="sliderDiv6"  class="sliderDiv"><p class="sliderNumbers">6</p></div>
                <div id="sliderDiv7"  class="sliderDiv"><p class="sliderNumbers">7</p></div>
                <div id="sliderDiv8"  class="sliderDiv"><p class="sliderNumbers">8</p></div>
            </div>
            <div id="pickBusDiv"><img  id ="pickBusImg"  src="hWBus.png"><p id="pickBusP">Pick your bus</p></div>
            <div id="pickDayDiv"><img  id ="pickDayImg"  src="pickDay.png"><p id="pickDayP">Pick a day</p></div>
            <div id="pickHourDiv"><img  id ="pickHourImg"  src="sliderPic.png"><p id="pickHourP">Pick the number of hours form pickup to drop off</p></div>
            <div id="pickSocialDiv"><img  id ="pickSocialImg"  src="wholla.png"><p id="pickSocialP">Call, Facebook message, or email to check availability and confirm price</p></div>
            <div id="priceDisplayContainer"></div>
            <div id="hWorksBreak"></div>
            <div id="priceDisplay"><p id="priceDisplay"></p></div>
            <p id="saturdayBut" class="dayButton">Saturday</p>
            <p id="weekBut" class="dayButton">Sunday - Friday</p>
            <img id="saturdayButSelect" class="dayButtonSelector" src="saturdayBut.png">
            <img id="weekButSelect" class="dayButtonSelector" src="weekDayBut.png">
            <img id="saturdayButSelectBack" class="dayButtonSelector" src="daySelectBack.png">
            <img id="weekButSelectBack" class="dayButtonSelector" src="daySelectBack.png">
            <div id="HworksContainer" ></div>
            <div id="contactContainer" ></div>
            <p id="howItWorks">How it Works</p>
            <div id="saturdayButSurround" class="butSurround"></div>
            <div id="weekButSurround" class="butSurround"></div>




    </body>
</html>
<style>
body
{


    background: url(textured_paper.png);
    background-attachment: fixed;
    background-size: 500px 500px;
    background-repeat: repeat;
    height: 1000px;
     margin: 0;
   padding: 0;


}
#saturdayButSurround
{
    margin-left: -450px;
}
#weekButSurround
{
    margin-left: 40px;
    opacity:0;
}
.butSurround
{
    top:520px;
    position:absolute;
    height:40px;
    width:900px;
    border:5px solid blue;
    opacity:.5;
    border-radius: 20px;
    left:50%;
    z-index: 0;
    opacity:0;

}
#pickBusDiv
{
    position: absolute;
    height:150px;
    width: 200px;
    top:1250px;
    left:50%;
    margin-left:-600px;
    z-index: 4;
}
#pickBusImg
{
    height:100px;
}
#pickBusP
{
    font-size: 20px;
    color: white;
    font-family: "Arial Black", "Arial Bold", Gadget, sans-serif;
    position: absolute;
    top:-100px;
    left:20px;
}
#pickDayDiv
{
    position: absolute;
    height:150px;
    width: 200px;
    top:1250px;
    left:50%;
    margin-left:-300px;
    z-index: 4;
}
#pickDayImg
{
    height:100px;
}
#pickDayP
{
    font-size: 20px;
    color: white;
    font-family: "Arial Black", "Arial Bold", Gadget, sans-serif;
    position: absolute;
    top:-100px;
    left:-10px;
}
#pickHourDiv
{
    position: absolute;
    height:150px;
    width: 350px;
    top:1250px;
    left:50%;
    margin-left:-120px;
    z-index: 4;
}
#pickHourImg
{
    position: absolute;
    width:200px;
    left:80px;
    top:30px;
}
#pickHourP
{
    font-size: 20px;
    color: white;
    font-family: "Arial Black", "Arial Bold", Gadget, sans-serif;
    position: absolute;
    top:-100px;
    text-align: center;
}
#pickSocialDiv
{
    position: absolute;
    height:150px;
    width: 400px;
    top:1250px;
    left:50%;
    margin-left:280px;
    z-index: 4;
    text-align: center;
}
#pickSocialImg
{
    height:100px;
}
#pickSocialP
{
    width:100%;
    font-size: 20px;
    color: white;
    font-family: "Arial Black", "Arial Bold", Gadget, sans-serif;
    position: absolute;
    top:-100px;
}
#howItWorks
{
    position: absolute;
    top:960px;
    left:50%;
    margin-left: -300px;
    width: 600px;
    z-index: 3;
    color: white;
    font-family: "Arial Black", "Arial Bold", Gadget, sans-serif;
    text-align: center;
    font-size: 50px;

}
#facebook
{
    position: absolute;
    top:5px;
    left:50%;
    margin-left: -520px;
    height: 70px;
    z-index: 2;
    cursor:pointer;
}
#email
{
    position: absolute;
    top:5px;
    left:50%;
    margin-left: -60px;
    height: 70px;
    z-index: 2;
    cursor:pointer;
}
#phone
{
    position: absolute;
    top:0px;
    left:50%;
    margin-left: 310px;
    height: 80px;
    z-index: 2;
    cursor:pointer;

}
#facebookBack
{
    position: absolute;
    top:5px;
    left:50%;
    margin-left: -520px;
    height: 70px;
    z-index: 1;
    opacity: 0;
}
#emailBack
{
    position: absolute;
    top:5px;
    left:50%;
    margin-left: -60px;
    height: 70px;
    z-index: 1;
    opacity: 0;
}
#phoneBack
{
    position: absolute;
    top:0px;
    left:50%;
    margin-left: 310px;
    height: 80px;
    z-index: 1;
    opacity: 0;
}
#contactLinkContainer
{

    position:absolute;
    width: 100%;
    left:0;
    height:150px;
    top:860px;
    z-index: 1;
}
#HworksContainer
{
    background-image: -webkit-gradient(
        linear,
        left top,
        right bottom,
        color-stop(0, rgb(17, 0, 252)),
        color-stop(1, rgb(0, 213, 255)));
    background-image: -o-linear-gradient(right bottom, rgb(17, 0, 252) 0%, rgb(0, 213, 255) 100%);
    background-image: -moz-linear-gradient(right bottom, rgb(17, 0, 252) 0%, rgb(0, 213, 255) 100%);
    background-image: -webkit-linear-gradient(right bottom, rgb(17, 0, 252) 0%, rgb(0, 213, 255) 100%);
    background-image: -ms-linear-gradient(right bottom, rgb(17, 0, 252) 0%, rgb(0, 213, 255) 100%);
    background-image: linear-gradient(to right bottom, rgb(17, 0, 252) 0%, rgb(0, 213, 255) 100%);
    position:absolute;
    width: 100%;
    left:0;
    height:600px;
    top:840px;
    opacity:.5;
    z-index: 0;
}
#hWorksBreak
{
    position:absolute;
    width: 96%;
    left:2%;
    height:2px;
    top:960px;
    opacity:.5;
    background-color: white;
    z-index: 2;
}
#priceDisplay
{
    width:100%;
    height:100%;
    font-size:50px;
    text-align: center;
}
.dayButtonSelector
{
    position: absolute;
    width:110px;
    height:110px;
    top:465px;
    z-index: 1;
    cursor:pointer;

}
#saturdayButSelect
{
    left:50%;
    margin-left: -250px;

}
#weekButSelect
{
    left:50%;
    margin-left: 150px;
}
#saturdayButSelectBack
{
    left:50%;
    margin-left: -250px;
    z-index: 0;

}
#weekButSelectBack
{
    left:50%;
    margin-left: 150px;
    z-index: 0;
    opacity: 0;
}
#mainContainer
{
    top:0;
    position:absolute;
    width:1400px;
    height:1000px;
    border: 5px solid black;
    left:0;
}
.dayButton 
{


    font-size:30px;
    width:400px;
    height:20px;
    text-align: center;
    top:495px;
    position: absolute;
    z-index: 1;
    cursor:pointer;
    opacity: 0;
}
#saturdayBut
{
    left:50%;
    margin-left: -380px;    
}
#weekBut
{
    left:50%;
    margin-left: 20px;
}


#priceDisplayContainer
{
    position:absolute;
    height:130px;
    left:50%;
    margin-left: 150px;
    width: 350px;
    background-color: white;
    top:630px;
    border-radius: 10px;
    z-index: 0;
    opacity:.8;
}
#priceDisplay
{
    position:absolute;
    height:130px;
    left:50%;
    margin-left: 150px;
    width: 350px;
    z-index: 1;
    top:670px;

}
.sliderNumbers
{
    position: absolute;
    top:-100px;
    left:-14px;
    font-size: 40px;
    font-family: "Arial Black", "Arial Bold", Gadget, sans-serif;
}
.sliderDiv
{
    top:60px;
    position:absolute;
    height:8px;
    width:3px;
    background-color: black;
}
#sliderDiv1
{
    left:5px;
}
#sliderDiv2
{
    left:78px;
}
#sliderDiv3
{
    left:155px;
}
#sliderDiv4
{
    left:233px;
}
#sliderDiv5
{
    left:311px;
}
#sliderDiv6
{
    left:389px;
}
#sliderDiv7
{
    left:467px;
}
#sliderDiv8
{
    left:545px;
}
#sliderContainer
{
    position:absolute;
    top:615px;
    left:50%;
    margin-left: -500px;
    height: 150px;
    width:580px;
    cursor:none;
    overflow:hidden;


}
.busTypeRing
{
    position: absolute;
    width: 200px;
    height: 200px;
    position: absolute;
    top:240px;
    border: 10px solid blue;
    border-radius: 115px;
    z-index: 0;
    opacity: .5;

}
.busType
{
    position: absolute;
    width: 200px;
    position: absolute;
    top:250px;
    z-index: 3;
    cursor: pointer;

}
.busTypeBack
{
    position: absolute;
    width: 200px;
    position: absolute;
    top:250px;
    z-index: 1;
    opacity:.4;
}
.busType1
{

    left:50%;
    margin-left: -500px;

}
.busType2
{

    left:50%;
    margin-left: -100px;

}
.busType3
{

    left:50%;
    margin-left: 300px;

}
#busType1Ring
{

    left:50%;
    margin-left: -510px;


}
#busType2Ring
{

    left:50%;
    margin-left: -110px;
    opacity: 0;

}
#busType3Ring
{

    left:50%;
    margin-left: 290px;
    opacity: 0;
}
#slider
{
    position:absolute;
    height:100px;
    left:50%;
    margin-left: -564px;
    top:695px;
}

#sliderImage
{
    top:-20px;

    position:absolute;
    height:100px;
    left:40px;

}
#homeLinkBackground
{
    position:absolute;
   width: 80px;
    height: 27px;
   left:50%;
   top:115px;
   margin-left: -40px;
   z-index: 1;
    background-color: blue;
    opacity: .5;
    z-index: 0;
}
#homeLink
{
    position:absolute;
    width: 150px;
    left:50%;
    top:95px;
    margin-left: -75px;
    z-index: 2;
}
#pageDivider
{
    position:absolute;
    height: 2px;
    background-color: gray;
    top:139px;
    width:98%;
    left:1%;
}
</style>

3 个答案:

答案 0 :(得分：2)

请

 body
 {
  margin: 0;
   padding: 0;
 }

答案 1 :(得分：1)

使用Eric Meyer的重置

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, figure, footer, header,&nbsp;hgroup, menu, nav, section, menu,
time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}

article, aside, figure, footer, header,
hgroup, nav, section { display:block; }

nav ul { list-style:none; }

blockquote, q { quotes:none; }

blockquote:before, blockquote:after,
q:before, q:after { content:''; content:none; }

a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; }

ins { background-color:#ff9; color:#000; text-decoration:none; }

mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold; }

del { text-decoration: line-through; }

abbr[title], dfn[title] { border-bottom:1px dotted #000; cursor:help; }

/* tables still need cellspacing="0" in the markup */
table { border-collapse:collapse; border-spacing:0; }

hr { display:block; height:1px; border:0; border-top:1px solid #ccc; margin:1em 0; padding:0; }

input, select { vertical-align:middle; }
/* END RESET CSS */

或者如果它仍然发生，那么我们可以判断问题

答案 2 :(得分：1)

我把所有内容放在一个包含div的内容中，其大小足以包围页面内容，在所述div上设置自动边距，并将overflow-x设置为隐藏。现在看起来不错。我仍然没有弄清楚为什么窗口变大了，但这对那些有同样问题的人来说很有用。

相关问题
最新问题