我的网站不会垂直滚动。这样可以停止显示的部分内容。我试图解决这个问题，但到目前为止，我没有成功使用CSS overflow属性。这不是在谷歌浏览器中滚动，并且在我使用开发人员工具时不会出现任何错误。
这是代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<title>Football Informer</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<script src="scripts.js"></script>
</head>
<body>
<div class="container">
<img src="https://www.freewebheaders.com/wordpress/wp-content/gallery/football/world-cup-goal-keeper-sport-website-header.jpg" class="header_img" alt="Error">
<div class="text">
<h1>The Football Informer</h1>
<p class="strapline">The Home of Football</p>
</div>
</div>
<ul>
<li><a class="active" href="home.html">Home</a></li>
<li><a href="about.html">About</a></li>
</ul>
<div class="main_text">
<p class="intro_home_page">Welcome to The Football Informer. This is the place to keep up to date with the footballing world.<br>
Keep up to date with the big roomers about transfers and club takeovers. Or follow the Premier League fight in the leagues featured section. If you have any suggestions about the site please see the About page to see our contact information.</p>
<div class="heading">
<h1>Featured Articles</h1>
</div>
<div class="featured_articles_format">
<div class="grey_background">
<a href="http://thefootballfaithful.com/allardyce-reveals-cenk-tosun-struggles/" target="blank">
<p class="article_title ">Allardyce reveals Cenk Tosun struggles.</p>
<img src="https://i1.wp.com/thefootballfaithful.com/wp-content/uploads/2018/02/img_7476.jpg?resize=660%2C330" class="interesting_article_img" alt="Error">
</a>
</div>
<p class="article_strapline">Less than a month after joining Everton for £27m, Sam Allardyce has revealed that Cenk Tosun is struggling to adapt to life in the Premier League.</p>
<p class="article_intro">The Turkish international sat out of the Toffees’ 5-1 humbling at the hands of Arsenal on Saturday evening, with the once outcasted Oumar Niasse selected to start the game.<br>
Speaking after the defeat, Allardyce that the 26-year-old has struggled with the ‘pace and physicality of the game.’</p>
</div>
<div class="featured_articles_format">
<div class="grey_background">
<a href="http://www.skysports.com/football/news/11715/11237193/leeds-sack-head-coach-thomas-christiansen-after-cardiff-thrashing" target="blank">
<p class="article_title ">Leeds sack head coach Thomas Christiansen after Cardiff thrashing</p>
<img src="http://e0.365dm.com/17/09/16-9/20/skysports-thomas-christiansen-leeds_4110664.jpg?20170925180918" class="interesting_article_img" alt="Error">
</a>
</div>
<p class="article_strapline">Leeds have sacked head coach Thomas Christiansen after a 4-1 thrashing at home to Cardiff on Saturday - their sixth Championship game without a win.</p>
<p class="article_intro">Christiansen's side had been without a win since Boxing Day and a spate of ill-discipline had seen three different players sent-off in four games.<br>
Leeds had been pushing for a place in the top six but slipped to 10th after the Cardiff defeat and the club announced his departure just over 24 hours later.<br>
Statement "Leeds United can confirm that head coach Thomas Christiansen has left the club."
</p>
</div>
<div class="featured_articles_format">
<div class="grey_background">
<a href="http://www.skysports.com/football/news/11685/11240190/patrice-evra-completes-free-transfer-to-west-ham" target="blank">
<p class="article_title ">Patrice Evra completes free transfer to West Ham</p>
<img src="https://www.wessexfm.com/news/images/feed.php?url=http%3A%2F%2Fe3.365dm.com%2F18%2F02%2F640x380%2Fskysports-patrice-evra-west-ham-united-premier-league-football-pose-posing_4225196.jpg%3F20180207173535" class="interesting_article_img" alt="Error">
</a>
</div>
<p class="article_strapline">Patrice Evra has completed his free transfer to West Ham and signed a contract until the end of the season.</p>
<p class="article_intro">Evra, 36, arrived at the club's Rush Green training complex on Wednesday morning before passing a medical and signing a short-term contract until the end of June 2018.<br>
Sky Sports News understands Everton were also interested in the former Manchester United, Juventus and Monaco left-back but the player favoured a move to London.</p>
</div>
<div class="featured_articles_format">
<div class="grey_background">
<a href="http://www.skysports.com/football/news/11685/11240190/patrice-evra-completes-free-transfer-to-west-ham" target="blank">
<p class="article_title ">Patrice Evra completes free transfer to West Ham</p>
<img src="https://www.wessexfm.com/news/images/feed.php?url=http%3A%2F%2Fe3.365dm.com%2F18%2F02%2F640x380%2Fskysports-patrice-evra-west-ham-united-premier-league-football-pose-posing_4225196.jpg%3F20180207173535" class="interesting_article_img" alt="Error">
</a>
</div>
<p class="article_strapline">Patrice Evra has completed his free transfer to West Ham and signed a contract until the end of the season.</p>
<p class="article_intro">Evra, 36, arrived at the club's Rush Green training complex on Wednesday morning before passing a medical and signing a short-term contract until the end of June 2018.<br>
Sky Sports News understands Everton were also interested in the former Manchester United, Juventus and Monaco left-back but the player favoured a move to London.</p>
</div>
</div>
</body>
</html>
.container {
position: relative;
margin-top: 0;
margin-bottom: 0;
height:150px;
}
.header_img {
width:100%;
height:150px;
margin:0;
}
.text {
font-size:26px;
position: absolute;
top: 20%;
left: 50%;
transform: translate(-50%, -50%);
color:red;
}
.strapline {
font-size:22px;
position: absolute;
top: 70px;
left: 50%;
transform: translate(-50%, -50%);
color:red;
}
body {
margin: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 15%;
background-color: #666666;
position: fixed;
height: 100%;
overflow: auto;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
li a.active {
background-color: #4CAF50;
color: white;
}
li a:hover:not(.active) {
background-color: #555;
color: white;
}
.main_text {
margin-left:15%;
width:85%;
position: fixed;
height:100%;
background-color: #b3b3b3;
margin-top: 0;
margin-bottom: 0;
}
.intro_home_page {
font-size:20px;
text-align: center;
}
.heading {
background-color:red;
}
.article_title {
color:white;
font-size:24px;
}
.article_intro {
font-size:18px;
}
.article_strapline {
font-size:18px;
font-weight:bold;
}
.grey_background {
background-color:grey;
height:30px;
}
.interesting_article_img {
height:165px;
width:330px;
float: left;
}
img {
border: 0;
}
p, h1 {
margin: 0;
}
.featured_articles_format{
height:195px;
}
非常感谢任何建议，我希望我已经提出了一个足够精确的问题。
答案 0 :(得分：3)
您需要更改.main-text样式。修正的位置阻止了滚动。
.main_text {
margin-left:15%;
width:85%;
position: relative;
height:100%;
background-color: #b3b3b3;
margin-top: 0;
margin-bottom: 0;
}
这将解决滚动问题，可能必须重构标记以使其看起来正确。也许考虑使用css库/框架。节省您大量的时间和精力。