【发布时间】：2020-04-10 23:58:14
【问题描述】：
我遇到的问题是，我的网站会在屏幕底部截断所有信息，并且在以较小的纵横比时不会滚动。无论如何，它将显示图像，但会剪切其下方的文本。我尝试过使用 overflow-y 和 overflow，但都不允许滚动。我不确定这是否是由于元素被修复，但修复元素是我能够让它们看起来正确的唯一方法。
这是 HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Aeronaut Travel Agency</title>
<meta charset="utf-8">
<link rel = "stylesheet" href = "css/travel.css">
</head>
<body>
<div id="wrapper">
<header>
<h1>Aeronaut Travel Agency</h1>
</header>
<nav>
<ul>
<li><a href="Home.html">Home</a></li>
<li><a href="VacationPackages.html">Vacation Packages</a></li>
<li><a href="#Packing.html">Things to Pack</a></li>
<li><a href="#AboutUs.html">About Us</a></li>
<li><a href="#Contact.html">Contact</a></li>
</ul>
</nav>
<main>
<h2>
Vacation Packages
</h2>
<div>
<img src="images/LasVegas.png" alt="Las Vegas, seen at night" class="floatleft">
</div>
<div class="row">
<div class="column">
<h3>
Visit beautiful, sunny Las Vegas. A wonderland of all kinds of entertainment.
</h3>
<p>Want to have dinner and a show, come to the world-famous Caesar's Palace. With hundreds of live shows, thousands of high-end restaurants and the iconic Strip, there is always something fun and new to do in the city that never sleeps. </p>
<p> Las Vegas has so many entertainment, dining, shopping, nightlife, golf, and spa options, it can be tough to choose which experiences are perfect for your trip. That’s where we come in. Visit Vegas with Aeronaut Travel Agency.</p>
<br class="clear">
</div>
<div class="column">
<h3><i>Top Attractions</i></h3>
<ul>
<p></p>
<li>
Mystere by Cirque du Solie
</li>
<li>
Vegas! The Show
</li>
<li>
The Strip
</li>
<li>
Venetian Gondolas
</li>
<li>
Madame Tussaud’s
</li>
<li>
Las Vegas Motor Speedway
</li>
</ul>
<h3><i>Top Hotels</i></h3>
<ul>
<p></p>
<li>The Venetian</li>
<li>The Bellagio</li>
<li>Caesar’s Palace Hotel & Casino</li>
<li>The Luxor Casino & Hotel</li>
<li>Mandalay Bay</li>
<li>The MGM Grand</li>
<li>Excalibur Hotel & Casino</li>
</ul>
<br class="clear">
</div>
</div>
</main>
<footer>
<small><i>Copyright © </i> 2020 Aeronaut Travel Agency Inc, <i>All rights Reserved<br>
</i></small>
</footer>
</div>
</body>
</html>
这里是 CSS
HTML {
height: 100%;
margin: auto;
}
* {
box-sizing: border-box;
}
header, nav, main, footer {
display: block;
}
body {
background-color: #FFFFFF;
color: #000000;
font-family: Verdana, Arial, sans-serif;
overflow-x:hidden;
overflow-y: auto;
}
header {
background-color: #9DC3E6;
background-image: url(../images/Logo.png);
background-size: contain;
background-position-x: 35px;
background-repeat: no-repeat;
height: 150px;
position: fixed;
top: 0px;
left: 0px;
width: 100%;
}
h1 {
padding-top: 50px;
padding-left: 7.5em;
color: #F2F2F2;
text-shadow: 2px 2px #656565;
font-style: italic;
}
h2 {
color: #2E75B6;
font-style: italic;
}
h3 {
font-style: italic;
}
nav {
display: inline;
padding: 0em;
width: 160px;
position: fixed;
top: 150px;
left: 0px;
width: 100%;
}
nav a {
text-decoration: none;
display: block;
text-align: center;
padding: .8em;
}
nav a:link {
color: #FFFFFF;
}
nav a:visited {
color: #FFFFFF;
}
nav a:hover {
color: #C8C8C8;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #1F4E79;
list-style-type: none;
}
nav li {
border-right: 1px solid #bbb;
float: left;
padding-left: 10px;
padding-right: 10px;
}
li:last-child {
border-right: none;
}
li:first-child {
padding-left: 40px;
}
nav li a:hover:not(.active) {
background-color: #1360A6;
}
#active {
background-color: #4CAF50;
}
.studio {
font-style: italic;
}
footer {
background-color: #9DC3E6;
font-size: small;
font-style: italic;
text-align: center;
padding: 1em;
width: 100%;
position: fixed;
bottom: 0;
}
main {
padding-left: 2em;
padding-right: 2em;
display: block;
margin-left: 170px;
width: 1550px;
padding-top: 1em;
position: fixed;
top:175px;
}
.floatleft {
float: left;
margin-right: 4em;
}
.clear {
clear: both;
}
img
{
width: auto;
position:relative;
}
#hero-image {
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(../images/Hero.jpg);
height: 50%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: fixed;
}
.hero-text {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
}
.column {
float: left;
width: 50%;
}
.row:after {
content: "";
display: table;
padding: 1em;
}
#wrapper {
width: 100%;
margin-left: auto;
margin-right: auto;
}
对此的任何建议表示赞赏。
【问题讨论】：