所以我有 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 框的底部被截断了，我无法向下滚动查看页面的其余部分!我该如何解决这个问题？
最佳答案
将所有这些“框”上的 position: fixed; 更改为 position: absolute;...
位置固定意味着该元素不会像其他元素那样与视口(viewport)交互，因此它们不会影响页面的滚动...
希望这对你有帮助-ck
关于HTML CSS 部分页面被截断，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9402306/