获取所查看内容的窗口底部

时间：2015-11-15 19:34:13

标签： javascript jquery html css

我面临一个非常奇怪的问题。问题是我的jQuery不能给我正确的滚动窗口底部。我尝试过这样的事情：

var win = $(window);
var winHeight = win.height();
var winTop = win.scrollTop();
var winBottom = winHeight + winTop;

var win = $(window);
var winHeight = win.height();
var winBottom = winHeight;

但我无法获得正确的高度。例如，我的屏幕是900px高，当我在我的页面顶部，但jQuery一直说它是3368。

如果你想看到的不仅仅是我的jQuery / Javascript代码，那么我的html和css 

    <doctype! html>
<html>
<head>
    <!--Give page a title-->
    <title>Code & Design Website</title>
    <!--Link the stylesheet-->
    <link href="homestyle.css" rel="stylesheet" type="text/css">
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic' rel='stylesheet' type='text/css'>
    <!--Give the site a description-->
    <meta charset="utf-8">
    <meta name="description" content="The official code & Design website">
    <meta name="author" content="Sander from Code & Design">
    <meta name="keywords" content="Code & Design Sander,Code & Design,Code,Design,Sander,Professional website,Professional,website,
    developer,website developer,cheap website,cheap">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--Link Scripts-->
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    <script src="homescript.js"></script>
</head>
<body>
    <nav>
        <div id="navContainer">
            <div id="menuButton"><img id="menuIcon" src="Menu%20Button.png"></div>
            <div id="links">
                <ul>
                    <li><a href="">Home</a></li>
                    <li><a href="">Services</a></li>
                    <li><a href="">Portfolio</a></li>
                    <li><a href="">Buy</a></li>
                    <li><a href="">About</a></li>
                    <li><a href="">Contact</a></li>
                </ul>
            </div>
        <div id="logo">
            <img id="logoImage" src="Logo.png">
            <div id="logoText"><span>Code & Design</span><br>official website</div>
        </div>
        </div>
        <div id="underlineNav"></div>
    </nav>
    <header>
        <div id="containerBackground">
            <!--Header Image-->
        </div>
        <div id="textHeader"><span>Code & Design</span><br>I design and make website's for you</div>
        <div id="containerButtonsHeader">
            <div class="buttonsHeader"><a href=""><span>About</span> me</a></div>
            <div class="buttonsHeader"><a href="">Buy</a></div>
            <div class="buttonsHeader"><a href="">Portfolio</a></div>
        </div>
    </header>
    <div id="services">
        <div id="servicesTitle">
            <p>Services</p>
            <div id="servicesTitleLine"></div>
        </div> 
        <div class="servicesButtons" id="serviceDesign"><img src="pencil.png"></div>
        <div class="servicesButtons" id="serviceCode"><img src="Gear.png"></div>
        <div class="servicesButtons" id="serviceBuy"><img src="530b05efef2d794e7600018e_Flaticon_9691.png"></div>
        <div id="servicesBoxes">
            <div class="servicesList" id="design">
                <div class="arrow"></div>
                <div class="list">
                    <ul>
                        <li><img src="Untitled-1.png">Flat UI Design</li>
                        <li><img src="Untitled-1.png">Clear</li>
                        <li><img src="Untitled-1.png">Full with colors</li>
                    </ul>
                </div>
            </div>
            <div class="servicesList" id="code">
                <div class="arrow"></div>
                <div class="list">
                    <ul>
                        <li><img src="Untitled-1.png">Responsive</li>
                        <li><img src="Untitled-1.png">User friendly</li>
                        <li><img src="Untitled-1.png">Simple</li>
                    </ul>
                </div>
            </div>
            <div class="servicesList" id="purchase">
                <div class="arrow"></div>
                <div class="list">
                    <ul>
                        <li><img src="Untitled-1.png">Cheap</li>
                        <li><img src="Untitled-1.png">Fast</li>
                        <li><img src="Untitled-1.png">Good service</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div id="portfolio">
        <div id="portfolioTitle">
            <p>Portfolio</p>
            <div id="portfolioTitleLine"></div>
        </div>
        <div id="portfolioItems">
            <div class="portfolioBox"><img src=""></div>
            <div class="portfolioBox"><img src=""></div>
            <div class="portfolioBox"><img src=""></div>
        </div>
        <div id="moreButton">
            <p>See more</p>
        </div>
    </div>
    <div id="buy">
        <div id="buyContainerContent" class="buy">
            <div id="textBuy">
                <span>Buy</span><hr><hr>Do you want a flat design website,<br>then you are in the right place.<br>
                I make modern, and clear website's.<br> The website's I make are simple,<br>user friendly, and responsive<br>
                so every device will fit your website.
            </div>
            <div id="priceTotal" class="buy">
                <div id="priceTitle">Price</div>
                <div id="priceLeft" class="prices">
                    <img src="Untitled-2.png">
                    <div id="priceLeftText">
                        <span>Website</span><br><span>fully functional</span><br><br>
                        I make a website that is fully functional, and ready for hosting<br>(hosting is up to you)<br><br>
                        <span>Price:</span><span> €100.-</span>
                    </div>
                    <div id="orderButtonLeft">Order now</div>
                </div>
                <div id="priceRight" class="prices">
                    <img src="Untitled-3.png">
                    <div id="priceRightText">
                        <span>Template</span><br><span>website layout</span><br><br>
                        If you want to code a website by yourself, but want a already made <br>lay-out<br><br>
                        <span>Price:</span><span> €20.-</span>
                    </div>
                    <div id="orderButtonRight">Order now</div>
                </div>
                <div id="priceLineAbove"></div>
                <div id="priceLineUnder"></div>
            </div>
        </div>
    </div>
    <div id="about">
        <div id="aboutTitle">
            <p>About</p>
            <div id="aboutTitleLine"></div>
        </div> 
        <div id="aboutText">
        25 October 2015<br><br>

Dear visitor,<br><br>

My name is Sander, and I am a fiftheen-year-old website
designer / developer from the Netherlands. I started 
website designing and developing about 6 months ago,
and I really enjoy doing this. But I want this to be more than
a hobby so I stared this website. Now the world can see what
I can do, and also I could sell my work to other people.<br><br>

This was I wanted to share with you, just so you know a bit about me.
If you want to know more feel free to e-mail me.<br><br>

Your faithfully,<br>
Sander Aalbers<br><br>

Motivation quote - “Do not stop untill you are done”
        </div>
    </div>
    <div id="footer">
        <div id="footerContentContainer">
            <div id="contact" class="footer">
                <div id="contactTitle">Contact</div>
                <div id="contactContainer">
                <div id="contactListIcons" class="contact">
                    <ul>
                        <li><img src=youtube17.png></li>
                        <li><img src="google116.png"></li>
                        <li><img src="facebook55.png"></li>
                        <li><img src="email5.png"></li>
                    </ul>
                </div>
                <div id="contactList" class="contact">
                    <div id="contactListContainer">
                        <ul>
                            <li>Code & Design Sander</li>
                            <li>Code & Design Sander</li>
                            <li>Code & Design</li>
                            <li>sandercodedesign.yt@gmail.com</li>
                        </ul>
                    </div>
                </div>
            </div>
            </div>
            <div id="footerMenu" class="footer">
                <div id="footerMenuTitle">Menu</div>
                <div id="footerMenuList">
                    <ul>
                        <li><a href="">Services</a></li>
                        <li><a href="">Portfolio</a></li>
                        <li><a href="">Buy</a></li>
                        <li><a href="">About</a></li>
                        <li><a href="">Contact</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div id="underlineContactMenu"></div>
        <div id="footerLogo">
            <img class="footerLogo" src="Logo.png">
            <div id="footerLogoText" class="footerLogo">
                © 2015 Code & Design™<br>
               <span>“Do not stop until you are done”</span> 
            </div>
        </div>
    </div>
</body>
</html>

我希望有人可以帮我解决这个问题。 提前致谢！：D

4 个答案:

答案 0 :(得分：2)

支持自己 - 你将要看到奇迹般的转变：）

在HTML的最顶部，将<doctype! html>替换为<!doctype html>。

就是这样。祝你晚安：）））

（技术脚注：破碎的doctype使浏览器处于怪异模式，jQuery不支持怪癖模式。）

答案 1 :(得分：1)

窗口底部只有$(window).height();，文档底部只有$(document).height();

答案 2 :(得分：0)

听起来有些混淆围绕着你想要得到的坐标，但我的猜测是你在文档坐标中窗口底部的位置之后< / em>，这样您就可以根据用户当前的滚动位置了解哪些内容可见。

如果是这种情况，可以通过将窗口的高度添加到可见部分的顶部来简化文档可见部分的底部，您已知道它是scrollTop。

这是一个将$(window).scrollTop()和$(window).height()加在一起的小演示。在此演示中，绿线在此位置附近放置几次，因此您可以在更新时看到它与当前视图的底部重合。

＆＃13;
＆＃13; 
function update() {
  var windowHeight = $(window).height();
  var scrollTop = $(window).scrollTop();
  var viewBottom = scrollTop + windowHeight;
  $('#hud').text('windowHeight = ' + windowHeight +
                 ', scrollTop = ' + scrollTop +
                 ', viewBottom = ' + viewBottom);
  $('#line').css('top', (viewBottom - 20) + 'px');
}

window.setInterval(update, 120);
＆＃13; 
#scrollable {
  opacity: 0.3;
  font-size: 150px;
  white-space: pre;
  font-family: sans-serif;
}
#hud {
  position: fixed;
  top: 20px;
  left: 20px;
}
#line {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: green;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div id="scrollable">  1
  2
  3
  4
  5
  6
  7
  8
  9
</div>
<div id="hud"></div>
<div id="line"></div>
＆＃13;
＆＃13;
＆＃13;

答案 3 :(得分：0)

这也是CSS代码：

    @import url('http://fonts.googleapis.com/css?family=Open+Sans');

body {
    margin: 0;
    font-family: 'Open Sans', sans-serif;
    background-color: ebebeb;
    overflow-x: hidden;
}
/*Navigation bar*/
nav {
    position: fixed;
    z-index: 1;
    width: 100%;
    height: 60px;
    background-color: #1b1f28
}
/*Styling links*/
#links ul {
    position: absolute;
    margin-left: -40px;
    margin-top: 17px;
    width: 600px;
}

#links li {
    list-style: none;
    display: inline-block;
    margin-left: 30px;
}

#links li a {
    text-decoration: none;
    color: #9099af;
    font-size: 15pt;
}

#menuButton {
    display: none;
}

/*Reponsive Nav*/
@media screen and (max-width: 860px) {
    #links {
        position: absolute;
        width: 100%;
        height: 350px;
        background-color: #ebebeb;
        margin-left: 50%;
        transform: translate(-50%);
        -webkit-transform: translate(-50%);
        -ms-transform: translate(-50%); 
        margin-top: -350px;
    }  

    #links li {
        text-align: center;
        display: block;
        width: 90%;
        height: 40px;
        margin-top: 10px;
        border-bottom: 1px solid lightgray;
        margin-left: 50%;
        transform: translate(-50%);
        -webkit-transform: translate(-50%);
        -ms-transform: translate(-50%);  
    }

    #links li:last-child {
        border-bottom: none;
    }

    #links ul {
        width: 100%;  
    }

    #menuButton {
        display: block;
        position: relative;
        float: left;
    }

    #menuButton img {
        position: absolute;
        height: 30px;
        width: 0 auto;
        margin-top: 15px;
        margin-left: 15px;
    }
}
/*Logo navigation bar*/
#logoText {
    color: white;
    float: right;
    font-style: italic;
    text-align: right;
    line-height: 23px;
    margin-top: 7px;
    margin-right: 10px;
}

#logoText span {
    font-weight: 700;
    font-size: 15pt;
    font-style: normal;
}


#logoImage {
    float: right;
    height: 50px;
    width: 0 auto;
    margin-top: 5px;
    margin-right: 10px;
}

#underlineNav {
    position: absolute;
    width: 100%;
    height: 3px;
    margin-top: 60px;
    background-color: white;
}

header {

}
/*Header with introduction*/
#containerBackground {
    overflow: hidden;
    height: 600px;
    background-image: url(http://www.desktopwallpapers4.me/wallpapers/world/1920x1080/1/4948-foggy-chicago-1920x1080-world-wallpaper.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

#backgroundHeader {
    width: 100%;
    height: 0 auto;
    margin-top: -200px; 
}

#textHeader {
    width: 700px;
    text-align: center;
    color: white;
    position: absolute;
    margin-top: -470px;
    margin-left: 50%;
    transform: translate(-50%);
    -webkit-transform: translate(-50%);
    -ms-transform: translate(-50%);
    font-size: 30pt;
    font-weight: 200;
    line-height: 50px
}

#textHeader span {
    font-weight: 600
}

#containerButtonsHeader {
    margin-top: -340px;
    text-align: center;
    width: 800px;
    margin-left: 50%;
    transform: translate(-50%);
    -webkit-transform: translate(-50%);
    -ms-transform: translate(-50%);
}
/*Buttons / links of the header*/
.buttonsHeader {
    position: relative;
    text-align: center;
    line-height: 50px;
    display: inline-block;
    width: 170px;
    height: 50px;
    border: 4px solid white;
    border-radius: 20px;
    margin: 10px;
}

.buttonsHeader a {
    text-decoration: none;
    color: white;
}

.buttonsHeader:nth-child(2) {
    background-color: #236de9
}


@media screen and (max-width: 650px){
    #textHeader {
        width: 100%;
        margin-top: -700px;
    }

    .buttonsheader {
        display: block;
        margin-left: 50%;
    transform: translate(-50%);
    -webkit-transform: translate(-50%);
    -ms-transform: translate(-50%);
        margin-top: 20px;

    }

    #containerButtonsHeader {
        margin-top: -490px;
    }

    #containerBackground {
        height: 800px    
    }
}

/*Serivce Icon circles*/
#services {
    text-align: center;
    width: 1100px;
    height: 600px;
    background-color: white;
    margin-left: 50%;
    transform: translate(-50%);
    -webkit-transform: translate(-50%);
    -ms-transform: translate(-50%);
    margin-top: 100px;
    border-radius: 20px;
    overflow: hidden;
    -webkit-box-shadow: 0px 5px 0px 0px rgba(197, 197, 197, 1);
    -moz-box-shadow:    0px 5px 0px 0px rgba(197, 197, 197, 1);
    box-shadow:         0px 5px 0px 0px rgba(197, 197, 197, 1);
}

#servicesTitle {
    margin-top: -27px;
    height: 60px;
    background-color: #1b1f28;
    color: white;
    font-size: 20pt;
    line-height: 57px;
    font-weight: 200;
}

#servicesTitleLine {
    margin-top: -54px;
    height: 1px;
    width: 80%;
    margin-left: 50%;
    transform: translate(-50%);
    -webkit-transform: translate(-50%);
    -ms-transform: translate(-50%);
    background-color: white;
}

#servicesTitle p {
    width: 150px;
    margin-left: 50%;
    transform: translate(-50%);
    -webkit-transform: translate(-50%);
    -ms-transform: translate(-50%);
    position: relative;
    background-color: #1b1f28;
    z-index: 1;
}

.servicesButtons {
    width: 180px;
    height: 180px;
    display: inline-block;
    border-radius: 100%;
    background-color: #236de9;
    margin: 50px;
    -webkit-box-shadow: 0px 5px 0px 0px rgba(0, 64, 171, 1);
    -moz-box-shadow:    0px 5px 0px 0px rgba(0, 64, 171, 1);
    box-shadow:         0px 5px 0px 0px rgba(0, 64, 171, 1);
}

.servicesButtons img {
    width: 110px;
    height: 110px;
    margin-top: 50%;
    transform: translate(0,-50%);
    -webkit-transform: translate(0,-50%);
    -ms-transform: translate(0,-50%);
}

/*About the services*/
#servicesBoxes {
    text-align: center;
    margin-top: 15px;
}
.servicesList {
    display: inline-block;
    text-align: left;
    width: 250px;
    height: 150px;
    background-color: #1b1f28;
}

.servicesList ul {
    list-style: none;
    color: white;
    margin-top: 20px;
    font-size: 15pt
}

.servicesList img {
    background-color: #1b1f28;
    margin-right: 15px;
    margin-top: 10px
}

.servicesList:nth-child(2) {
    margin-left: 35px;
    margin-right: 35px;
}

.arrow {
    width: 0px;
    height: 0px;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-bottom: 30px solid #1b1f28;
    margin-top: -30px;
    margin-left: 110px;
}

@media screen and (max-width: 1100px) {
    #services {
        width: 90%;
        height: 1400px;
    }

    #servicesBoxes {
        margin-left: 50%; 
        transform: translate(-50%);
    -webkit-transform: translate(-50%);
    -ms-transform: translate(-50%);
        width: 250px
    }

    #design {
        margin-top: -870px;
        width: 90%;  
    }

    #design ul {
        margin-left: -15px;
    }

    #code {
        margin-top: -440px;
        width: 90%;  
        margin-left: 50%; 
        transform: translate(-50%);
    -webkit-transform: translate(-50%);
    -ms-transform: translate(-50%);
    }

    #code ul {
        margin-left: -15px;
    }

    #purchase {
        margin-top: -10px;
        width: 90%;  
    }

    #purchase ul {
        margin-left: -15px;
    }

    .arrow {
        margin-left: 50%;
        transform: translate(-50%);
    -webkit-transform: translate(-50%);
    -ms-transform: translate(-50%);    
    }

    .servicesButtons:nth-child(3), .servicesButtons:nth-child(4) {
        margin-top: 250px;   
    }

    .servicesButtons {
        display: block;
        position: relative;
        margin-left: 50%;
        transform: translate(-50%);
    -webkit-transform: translate(-50%);
    -ms-transform: translate(-50%);    
    }

}

/*Portofio Container*/
#portfolio {
    text-align: center;
    width: 1100px;
    height: 500px;
    background-color: white;
    margin-left: 50%;
    transform: translate(-50%);
    -webkit-transform: translate(-50%);
    -ms-transform: translate(-50%);
    margin-top: 50px;
    border-radius: 20px;
    overflow: hidden;
    -webkit-box-shadow: 0px 5px 0px 0px rgba(197, 197, 197, 1);
    -moz-box-shadow:    0px 5px 0px 0px rgba(197, 197, 197, 1);
    box-shadow:         0px 5px 0px 0px rgba(197, 197, 197, 1);
}

#portfolioTitle {
    margin-top: -27px;
    height: 60px;
    background-color: #1b1f28;
    color: white;
    font-size: 20pt;
    line-height: 57px;
    font-weight: 200;
}

#portfolioTitleLine {
    margin-top: -54px;
    height: 1px;
    width: 80%;
    margin-left: 50%;
    transform: translate(-50%);
    -webkit-transform: translate(-50%);
    -ms-transform: translate(-50%);
    background-color: white;
}

#portfolioTitle p {
    width: 150px;
    margin-left: 50%;
    transform: translate(-50%);
    -webkit-transform: translate(-50%);
    -ms-transform: translate(-50%);
    position: relative;
    background-color: #1b1f28;
    z-index: 1;
}

/*Styling Items inside the portfolio*/
.portfolioBox {
    width: 220px;
    height: 220px;
    display: inline-block;
    margin: 40px;
    border-radius: 20px;
    border: 10px solid #236de9;
    -webkit-box-shadow: 0px 5px 0px 0px rgba(0, 64, 171, 1);
    -moz-box-shadow:    0px 5px 0px 0px rgba(0, 64, 171, 1);
    box-shadow:         0px 5px 0px 0px rgba(0, 64, 171, 1);
    background-color: #002b74;
    overflow: hidden;
}

/*See more buttons styling*/
#moreButton {
    text-align: center;
    border: 3px solid black;
    width: 150px;
    height: 40px;
    border-radius: 30px;
    margin-left: 50%;
    transform: translate(-50%);
    -webkit-transform: translate(-50%);
    -ms-transform: translate(-50%);
    margin-top: 20px
}

#moreButton p {
    margin-top: 0;
    line-height: 40px;
}

/*Styling image inside portfolio*/
.portfolioBox img {
    width: 380px;
    height: 0 auto;
    margin-left: 50%;
    transform: translate(-50%);
    -webkit-transform: translate(-50%);
    -ms-transform: translate(-50%);
    margin-top: -1px;
}

@media screen and (max-width: 1100px){
    #portfolio {
        width: 90%;
        height: 1100px;
    }

    .portfolioBox {
        display: block;
        margin-left: 50%;
    transform: translate(-50%);
    -webkit-transform: translate(-50%);
    -ms-transform: translate(-50%);
    }
}
/*Styling buy tab*/
#buy {
    width: 100%;
    height: 610px;
    background-color: #236de9;
    -webkit-box-shadow: 0px 5px 0px 0px rgba(0, 64, 171, 1);
    -moz-box-shadow:    0px 5px 0px 0px rgba(0, 64, 171, 1);
    box-shadow:         0px 5px 0px 0px rgba(0, 64, 171, 1);
    margin-top: 50px;
    color: white;
}

#buyContainerContent {
    position: relative;
    width: 1400px;
    height: 1400px;
    margin-left: 50%;
    transform: translate(-50%);
    -webkit-transform: translate(-50%);
    -ms-transform: translate(-50%);

}

#textBuy {
    float: left;
    line-height: 35px;
    font-size: 15pt;
    font-weight: 300;
    margin-left: 200px;
    margin-top: 50px;
}

#textBuy span {
    font-size: 20pt;
    font-weight: 400;
}

hr {
    visibility: hidden;
    margin-bottom: -5px;
}

#priceTotal {
    float: right;
    margin-right: 200px;
    margin-top: 50px;
    text-align: center;
}

#priceTitle {
    font-size: 20pt;
    font-weight: 400;   
    text-align: left !important;
    margin-left: 30px;
}

.prices {
    display: inline-block;
    width: 200px;
    margin: 20px;
}

#priceRight img, #priceLeft img {
    margin-bottom: 30px;
}

#orderButtonRight, #orderButtonLeft {
    margin-top: 50px;
}

#priceRightText span, #priceLeftText span {
    font-size: 20pt;
    font-weight: 500;
}

#priceRightText span:nth-of-type(2), #priceLeftText span:nth-of-type(2) {
    font-weight:  200;
    font-style: italic;
    font-size: 15pt
}

#priceRightText span:nth-of-type(4), #priceLeftText span:nth-of-type(4) {
    font-weight: 200;
    font-style: italic;
}

#priceLineAbove {
    height: 2px;
    background-color: white;
    margin-top: -265px
}

#priceLineUnder {
    height: 2px;
    background-color: white;
    margin-top: 260px 
}

#orderButtonRight, #orderButtonLeft {
    width: 200px;
    height: 50px;
    position: absolute;
    border-radius: 50px;
    border: 5px solid white;
    background-color: #0040ab;
    line-height: 50px;
    font-size: 15pt
}

@media screen and (max-width: 1020px) {
    #textBuy, #priceTotal {
        float: none;
        margin-left: 50%;
    transform: translate(-50%);
    -webkit-transform: translate(-50%);
    -ms-transform: translate(-50%);
        text-align: center;
    }

    #priceTotal {
        margin-top: 100px;    
    }

    #textBuy {
        position: relative;
        top: 50px;
        width: 100%;  
    }

    #buy {
        height: 920px;
    }   
}

@media screen and (max-width: 510px){
    #priceTitle {
        width: 62px;
        margin-left: 50%;
    transform: translate(-50%);
    -webkit-transform: translate(-50%);
    -ms-transform: translate(-50%);
    }

    .prices {
        display: block;
        margin-left: 50%;
    transform: translate(-50%);
    -webkit-transform: translate(-50%);
    -ms-transform: translate(-50%);
    }

    .prices:nth-child(3) {
        margin-top: 150px;    
    }

    #priceLineAbove, #priceLineUnder {
        display: none
    }

    #orderButtonLeft, #orderButtonRight {
        margin-top: 20px
    }

    #buy {
        height: 1400px;
    }
}
/*About*/
#about {
    text-align: center;
    width: 1100px;
    height: 520px;
    background-color: white;
    margin-left: 50%;
    transform: translate(-50%);
    -webkit-transform: translate(-50%);
    -ms-transform: translate(-50%);
    margin-top: 50px;
    border-radius: 20px;
    overflow: hidden;
    -webkit-box-shadow: 0px 5px 0px 0px rgba(197, 197, 197, 1);
    -moz-box-shadow:    0px 5px 0px 0px rgba(197, 197, 197, 1);
    box-shadow:         0px 5px 0px 0px rgba(197, 197, 197, 1);
}

#aboutTitle {
    margin-top: -27px;
    height: 60px;
    background-color: #1b1f28;
    color: white;
    font-size: 20pt;
    line-height: 57px;
    font-weight: 200;
}

#aboutTitleLine {
    margin-top: -54px;
    height: 1px;
    width: 80%;
    margin-left: 50%;
    transform: translate(-50%);
    -webkit-transform: translate(-50%);
    -ms-transform: translate(-50%);
    background-color: white;
}

#aboutTitle p {
    width: 150px;
    margin-left: 50%;
    transform: translate(-50%);
    -webkit-transform: translate(-50%);
    -ms-transform: translate(-50%);
    position: relative;
    background-color: #1b1f28;
    z-index: 1;
}

#aboutText {
    text-align: left;
    width: 80%;
    margin-left: 50%;
    transform: translate(-50%);
    -webkit-transform: translate(-50%);
    -ms-transform: translate(-50%);
    margin-top: 25px;
    font-size: 14pt;
}

@media screen and (max-width: 1100px) {
    #about {
        width: 90%;
        height: auto;
    }

    #aboutText {
        margin-bottom: 20px;
    }
}
/*Footer*/
#footerContentContainer {
    margin-left: 50%;
    transform: translate(-50%);
    -webkit-transform: translate(-50%);
    -ms-transform: translate(-50%); 
    width: 800px;
}

#footer {
    margin-top: 50px;
    background-color: #1b1f28;
    color: white;
    width: 100%;
    height: 500px;
}

.contact {
    display: inline-block;
    margin-top: 35px;
}

.footer {
    display: inline-block;
    margin-left: 70px;
    margin-right: 70px;
}

.footer ul li {
    list-style: none;    
} 

#contact {
    text-align: left;
}

#contactListIcons img {
    max-height: 30px;
    max-width: 30px;
    margin-top: 10px;
}

#contactListContainer {
    position: relative;
    top: -10px; 
}

#contactList li{
    margin-top: 22px;
}

#footerMenu {
    text-align: center;
    position: relative;
    top: 33px;
}

#footerMenuTitle, #contactTitle {
    font-size: 16pt;
    text-align: center;
}

#footerMenuTitle {
    margin-left: 40px
}

#footerMenu a {
    color: #727a8d;
    text-decoration: none;
}

#footerMenu li {
    margin-top: 22px;
}

#footerMenu ul {
    margin-top: 55px;
}

/*Underline Menu and Contact*/
#underlineContactMenu {
    position: absolute;
    width: 600px;
    height: 2px;
    background-color:white;
    margin-left: 50%;
    transform: translate(-50%);
    -webkit-transform: translate(-50%);
    -ms-transform: translate(-50%); 
    margin-top: -230px;
}

/*Footer Logo*/
.footerLogo {
    display: inline-block;
}

#footerLogo img{
    height: 50px;
    width: 0 auto;
}

#footerLogoText {
    position: relative;
    top: -8px;
    font-weight: 500;
    text-align: left;
    margin-left: 10px;
}

#footerLogoText span{
    font-weight: 200;
    font-style: italic;
    font-size: 10pt
}

#footerLogo {
    margin-left: 50%;
    transform: translate(-50%);
    -webkit-transform: translate(-50%);
    -ms-transform: translate(-50%); 
    text-align: center;
    margin-top: 100px;
}

@media screen and (max-width: 630px) {
    .footer {
        display: block;
    }

    #footerMenuTitle {
        margin-bottom: -40px;
        margin-left: 50%;
        transform: translate(-50%);
        -webkit-transform: translate(-50%);
        -ms-transform: translate(-50%); 
    }

    #footerMenuList {
        margin-left: 44%;
        transform: translate(-50%);
        -webkit-transform: translate(-50%);
        -ms-transform: translate(-50%); 
    }

    #footerMenu {
         margin-left: 50%;
        transform: translate(-50%);
        -webkit-transform: translate(-50%);
        -ms-transform: translate(-50%);    
    }

    #underlineContactMenu {
        display: none;
    }

    #contact {
        position: relative;
        top: 30px;
    }

    #contactContainer {
        margin-left: 50%;
    transform: translate(-50%);
    -webkit-transform: translate(-50%);
    -ms-transform: translate(-50%);
        width: 400px;
        margin-top: -40px;
        margin-bottom: 30
    }

    #footer {
        height: 740px;   
    }
}

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

    #footerLogoText {
        margin-top: 15px;
        width: 182px;
        margin-left: 50%;
    transform: translate(-50%);
    -webkit-transform: translate(-50%);
    -ms-transform: translate(-50%);
    }
}
相关问题
最新问题