Question

所以我有HTML和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>

并且网站看起来非常好，除了一件事。 Python框的底部被切断，我无法向下滚动以查看页面的其余部分！我该如何解决这个问题？

Answer 1

在所有“框”上将position: fixed;更改为position: absolute; ...

固定位置意味着元素不与视口交互，就像其他方式一样，它们不会影响页面的滚动...

希望这有助于确认

Answer 2

将CSS位置属性更改为

position: absolute;

HTML CSS部分页面被截断

2 个答案: