Więc mam kod HTML i CSS:

<!DOCTYPE html>
<html>
<head>
    <title>Solomon Wise</title>
        <style = text/css>
            body {
                background-color: #F5F5DC;
            }
            .body {
                font-family: Futura, Geneva, sans-serif;
                width: 300px;
                border-style: solid;
                border-width: 1px;
                border-radius: 10px;
                padding-left: 10px;
                padding-right: 10px;
                position: fixed;
                top: 50px;
                left: 50px;
                background-color: White;
            }
            .javascript {
                font-family: Futura, Geneva, sans-serif;
                width: 300px;
                border-style: solid;
                border-width: 1px;
                border-radius: 10px;
                padding-left: 10px;
                padding-right: 10px;
                position: fixed;
                top: 50px;
                left: 500px;
                background-color: White;
            }
            .HTMLCSS {
                font-family: Futura, Geneva, sans-serif;
                width: 300px;
                border-style: solid;
                border-width: 1px;
                border-radius: 10px;
                padding-left: 10px;
                padding-right: 10px;
                position: fixed;
                background-color: White;
                top: 300px;
                left: 500px;
            }
            .Python {
                font-family: Futura, Geneva, sans-serif;
                width: 300px;
                border-style: solid;
                border-width: 1px;
                border-radius: 10px;
                padding-left: 10px;
                padding-right: 10px;
                position: fixed;
                background-color: White;
                top: 500px;
                left: 500px;
            }
            p {
                color: #747E80;
            }
            a:link {
                color:DarkBlue;
            }
            a:visited {
                color:Black;
            }
            a:hover {
                color:DarkCyan;
                }
        </style>
        <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</head>
<body>
    <div class = 'body'>
        <h1>Solomon Wise</h1>
        <nav>
            <p class = 'one'>Hi, I'm Solomon, I'm 13 years old and I live in NYC. I love music, coding, sports, and minimalism.</p>
            <a href = "http://pastebin.com/u/slmnwise">Pastebin</a></br>
            <a href = "http://turntablestars.com/profile/Bill">TTStars Profile</a>
        </nav>
        <a href="https://twitter.com/slmnwise" class="twitter-follow-button" data-show-count="false"><img src = 'http://aux.iconpedia.net/uploads/1161475967.png'></a>
        <a href="http://www.facebook.com/SolomonIsGreat.net"><img src = "http://whatnowatlanta.com/wp-content/themes/canvas/images/ico-social-facebook.png"</a>
        <a href="http://www.goodreads.com/user/show/7658526-solomon-wise"><img src = "http://4.bp.blogspot.com/-NtFTy_OM9oU/TsaFQylMW-I/AAAAAAAAE2s/XwdLy3eiBbk/s1600/goodreads-button-much-rounder-corners-600x600.jpg" height = "32" width = "32"></a>
        <a href="http://stackoverflow.com/users/1207787/solomon-wise"><img src = "http://alindeman.github.com/images/stackoverflow_32.png"></a></br>
    </div>
    <div class = 'javascript'>
        <h3>Javascript</h3>
        <p class = 'two'>I can make small web applications in Javascript, along with adding dynamic features and functionality to a website in Javascript, such as adding a twitter mashup or an RSS feed.</p>
    </div>
    <div class = 'HTMLCSS'>
        <h3>HTML and CSS</h3>
        <p class = 'three'>I can design snazzy looking websites in HTML and CSS, just contact me to request one and we can work something out!</p>
    </div>
    <div class = 'Python'>
        <h3>Python</h3>
        <p class = 'four'>I can write applications and small games in Python, I have a good bit of experience in the language and work with it a lot</p>
    </div>
    </div>
</body>
</html>

A strona wygląda idealnie, z wyjątkiem jednej rzeczy. Dół pola Pythona jest odcięty i nie mogę przewinąć w dół, aby wyświetlić resztę strony! Jak to naprawić?

1
Billjk 23 luty 2012, 00:19

2 odpowiedzi

Najlepsza odpowiedź

Zmień position: fixed; na position: absolute; we wszystkich tych "pudełkach"...

Pozycja ustalona oznacza, że ​​element nie wchodzi w interakcję z widocznym obszarem w taki sam sposób jak inne, więc nie wpływają one na przewijanie strony...

Mam nadzieję, że to pomoże -

5
ckozl 23 luty 2012, 00:25

Zmień atrybut pozycji CSS na

position: absolute;
2
KappaMax 23 luty 2012, 00:26