我在 Html 中的内容不适合屏幕，它溢出了屏幕
My Content in Html is not fitting within the screen its overflowing out of the screen
我有一个 Html 页面，其中导航栏和页脚根据屏幕宽度自行调整，但我的主要内容没有自行调整。
我已经应用了媒体查询，但它是针对移动分辨率（517 像素）的，但是当我在另一台屏幕宽度较小的电脑上测试它时，它溢出了
class“bhavya”内的所有区域都溢出屏幕了。
/* Making of Box 1 on Left for posts */
.box1 {
background-color: white;
width: 746px;
height: auto;
border: 1px solid lightgray;
border-radius: 2px;
margin-top: 50px;
margin-left: 50px;
display: block;
}
/* Button to show more */
#myBtn {
background-color: #08f;
border: none;
color: white;
width: 80px;
height: 43px;
margin-left: 5px;
border-radius: 2px;
cursor: pointer;
}
.show {
display: none;
}
/* Styling Box For Search Box */
.search {
background-color: white;
border: 1px solid lightgray;
border-radius: 2px;
width: 384px;
height: 130px;
float: right;
margin-top: 50px;
margin-left: 828px;
display: block;
position: absolute;
}
/* Search Written*/
.search h3 {
margin-bottom: -40px;
text-align: center;
}
/* Style the search box */
.search input[type=text] {
padding: 13px;
border: 1px solid lightgray;
margin-top: 70px;
margin-left: 50px;
font-size: 17px;
height: 15px;
}
/* Style the button */
.search button[type=button] {
background-color: #08f;
border: none;
color: white;
width: 80px;
height: 43px;
margin-left: 5px;
border-radius: 2px;
}
/* Recent Post Column */
.recent {
background-color: white;
border: 1px solid lightgray;
border-radius: 2px;
width: 384px;
height: 850px;
float: right;
margin-top: 220px;
margin-left: 828px;
display: block;
text-align: center;
position: absolute;
}
/* img in recent */
#post1 {
margin-right: 22px;
margin-left: 22px;
margin-top: 22px;
width: 340px;
height: 340px;
}
/* Text below */
.text1 {
margin-right: 22px;
margin-left: 22px;
font-size: 22px;
}
/* 2nd post */
#post2 {
margin-right: 22px;
margin-left: 22px;
margin-top: 22px;
width: 340px;
height: 340px;
}
/* Text below */
.text2 {
margin-right: 22px;
margin-left: 22px;
font-size: 22px;
}
/* 3nd post */
#post3 {
margin-right: 22px;
margin-left: 22px;
margin-top: 22px;
width: 340px;
height: 340px;
}
/* Text below */
.text3 {
margin-right: 22px;
margin-left: 22px;
font-size: 22px;
}
/* Post Section fitting */
.container {
width: 746px;
}
.container .row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(333.33px, 1fr));
}
/* Seperate Post*/
.container .row .col {
margin: 20px;
display: none;
}
/*post Image*/
.container .row .col .imgBox {
width: 100%;
height: 220px;
}
.container .row .col .imgBox img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 5px 5px 0 0;
}
/*show more*/
.btn {
padding: .7rem 2rem;
background: royalblue;
border: none;
color: #FFF;
margin: 20px auto;
display: block;
font-size: 1.3rem;
cursor: pointer;
outline: none;
transition: .3s;
}
.btn:hover {
opacity: .8;
}
@media screen and (max-width: 600px) {
.search {
margin-top: 30px;
border: px;
margin-left: 50px;
}
.box1 {
width: 384px;
margin-top: 190px;
height: fit-content;
}
.recent {
display: none;
}
.container {
width: 384px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0”>
<meta content="Free HD Movie And Compressed Games Download From a High Speed Server, Try Now , One Click
Direct Download Link Available">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
<title>GameMovieMania</title>
</head>
<body>
<h1 class="heading"><b><i>GameMovieMania</i></b></h1> <br>
<div class="topnav" id="myTopnav">
<a href="index.html" class="active">Home</a>
<a href="games.html">Games</a>
<a href="movies.html">Movies</a>
<a href="contact.html">Contact</a>
<a href="about.html">About</a>
<a href="javascript:java script/code.js;" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
<div class="bhavya">
<div class="search">
<h3>Search</h3>
<input type="text" id="myInput" placeholder="Search.." onkeyup="searchOn()">
<button type="button"> Search </button>
</div>
<div class="recent">
<h3>Recent Post</h3>
<div class="post1">
<a href="gta5.html">
<img src="images/gta5.jpeg" id="img1">
<p class="text1">Grand Theft Auto 5 | Free <br>Download | Highly Compressed </p>
</a>
</div>
<div class="post2">
<a href="gta4.html">
<img src="images/gta4.jpeg" id="img2">
<p class="text2">Grand Theft Auto 4 | Free <br>Download | Highly Compressed </p>
</a>
</div>
<div class="post3">
<a href="gta3.html">
<img src="images/gta3.jpeg" id="img3">
<p class="text3">Grand Theft Auto 3 | Free <br>Download | Highly Compressed </p>
</a>
</div>
</div>
<span class="box1">
<div class="container">
<ul class="row">
<li class="col">
<div class="imgBox">
<img src="images/gta5.jpeg" alt="">
</div>
<div class="content">
<h2 class="title">
Grand Theft Auto 5 Download | Free Download
</h2>
</div>
</li>
<li class="col">
<div class="imgBox">
<img src="images/nowayhome.jpeg" alt="News">
</div>
<div class="content">
<h2 class="title">
Spiderman No Way Home | Full Movie Download Hindi |
</h2>
</div>
</li>
<li class="col">
<div class="imgBox">
<img src="images/gta4.jpeg" alt="News">
</div>
<div class="content">
<h2 class="title">
Grand Theft Auto 4 Download | Free Download
</h2>
</div>
</li>
<li class="col">
<div class="imgBox">
<img src="images/shershaah.jpeg" alt="News">
</div>
<div class="content">
<h2 class="title">
Shershaah Full movie download HD
</h2>
</div>
</li>
<li class="col">
<a href="sooryavanshi.html">
<div class="imgBox">
<img src="images/sooryavanshi.jpeg" alt="News">
</div>
<div class="content">
<h2 class="title">
Sooryavanshi Full Movie Download HD
</h2>
</div>
</a>
</li>
<li class="col">
<div class="imgBox">
<img src="images/gta3.jpeg" alt="News">
</div>
<div class="content">
<h2 class="title">
Grand Theft Auto 3 Download | Free Download
</h2>
</div>
</li>
<li class="col">
<div class="imgBox">
<img src="1.jpg" alt="News">
</div>
<div class="content">
<h2 class="title">
Android 11: Here are the 8 best new features
</h2>
</div>
</li>
<li class="col">
<div class="imgBox">
<img src="2.jpg" alt="News">
</div>
<div class="content">
<h2 class="title">
PHP 8 Release on November 2020
</h2>
</div>
</li>
<li class="col">
<div class="imgBox">
<img src="1.jpg" alt="News">
</div>
<div class="content">
<h2 class="title">
Android 11: Here are the 8 best new features
</h2>
</div>
</li>
<li class="col">
<div class="imgBox">
<img src="2.jpg" alt="News">
</div>
<div class="content">
<h2 class="title">
PHP 8 Release on November 2020
</h2>
</div>
</li>
<li class="col">
<div class="imgBox">
<img src="1.jpg" alt="News">
</div>
<div class="content">
<h2 class="title">
Android 11: Here are the 8 best new features
</h2>
</div>
</li>
<li class="col">
<div class="imgBox">
<img src="2.jpg" alt="News">
</div>
<div class="content">
<h2 class="title">
PHP 8 Release on November 2020
</h2>
</div>
</li>
</ul>
<button class="btn">Load More</button>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(".col").slice(0, 4).show()
$(".btn").on("click", function(){
$(".col:hidden").slice(0, 4).slideDown()
if ($(".col:hidden").length == 0) {
$(".btn").fadeOut('slow')
}
})
function searchOn() {
let input = document.getElementById('myInput').value
input=input.toLowerCase();
let x = document.getElementsByClassName('col');
for (i = 0; i < x.length; i++) {
if (!x[i].innerHTML.toLowerCase().includes(input)) {
x[i].style.display="none";
}
else {
x[i].style.display="list-item";
}
}
}
</script>
</span>
</div>
<div class="footer-basic">
<footer>
<div class="social">
<a href="#">
<i class="icon ion-social-instagram"></i>
</a>
<a href="#">
<i class="icon ion-social-snapchat"></i>
</a>
<a href="#">
<i class="icon ion-social-twitter"></i>
</a>
<a href="#">
<i class="icon ion-social-facebook"></i>
</a>
</div>
<ul class="list-inline">
<li class="list-inline-item"><a href="index.html">Home</a></li>
<li class="list-inline-item"><a href="about.html">About</a></li>
<li class="list-inline-item"><a href="contact.html">Contact</a></li>
<li class="list-inline-item"><a href="privacy.html">Privacy Policies</a></li>
<li class="list-inline-item"><a href="terms.html">Terms And Conditions</a></li>
</ul>
<p class="copyright">GameMovieMania Corp. © 2022</p>
</footer>
</div>
</body>
</html>
您可以使用 CSS 溢出 属性。
.bhavya {
overflow-x: hidden; /* Hide horizontal scrollbar */
overflow-y: scroll; /* Add vertical scrollbar */
}
我希望这能有所帮助
我在你的代码中添加了 display:grid 并修改了其中的一些
body{
display:grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 20vh 20vh auto 20vh;
grid-template-areas:
"h h h"
"b b s"
"b b r"
"f f f";
}
.header{
grid-area: h;
}
.box1{
grid-area: b;
background-color: white;
/* width: 746px; */
height: auto;
border: 1px solid lightgray;
border-radius: 2px;
margin-top: 50px;
margin-left: 50px;
display: block;
}
/* Button to show more */
#myBtn{
background-color: #08f;
border: none;
color: white;
width: 80px;
height: 43px;
margin-left: 5px;
border-radius: 2px;
cursor: pointer;
}
.show{
display: none;
}
/* Styling Box For Search Box */
.search{
grid-area: s;
background-color: white;
border: 1px solid lightgray;
border-radius: 2px;
/* width: 384px; */
height: 170px;
/* float: right; */
margin-top: 50px;
/* margin-left: 828px; */
display: block;
/* position: absolute; */
}
/* Search Written*/
.search h3{
margin-bottom: -40px;
text-align: center;
}
/* Style the search box */
.search input[type=text] {
padding: 13px;
border: 1px solid lightgray;
margin-top: 70px;
margin-left: 50px;
font-size: 17px;
height: 15px;
}
/* Style the button */
.search button[type=button] {
background-color: #08f;
border: none;
color: white;
width: 80px;
height: 43px;
margin-left: 5px;
border-radius: 2px;
}
/* Recent Post Column */
.recent{
grid-area: r;
background-color: white;
border: 1px solid lightgray;
border-radius: 2px;
/* width: 384px; */
height: 100%;
/* float: right; */
margin-top: 220px;
/* margin-left: 828px; */
display: block;
text-align: center;
/* position: absolute; */
}
/* img in recent */
#post1 {
margin-right: 22px;
margin-left: 22px;
margin-top: 22px;
width: 340px;
height: 340px;
}
/* Text below */
.text1 {
margin-right: 22px;
margin-left: 22px;
font-size: 22px;
}
/* 2nd post */
#post2 {
margin-right: 22px;
margin-left: 22px;
margin-top: 22px;
width: 340px;
height: 340px;
}
/* Text below */
.text2 {
margin-right: 22px;
margin-left: 22px;
font-size: 22px;
}
/* 3nd post */
#post3 {
margin-right: 22px;
margin-left: 22px;
margin-top: 22px;
width: 340px;
height: 340px;
}
/* Text below */
.text3 {
margin-right: 22px;
margin-left: 22px;
font-size: 22px;
}
/* Post Section fitting */
.container {
/* width: 746px; */
}
.container .row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(333.33px, 1fr));
}
/* Seperate Post*/
.container .row .col {
margin: 20px;
display: none;
}
/*post Image*/
.container .row .col .imgBox {
width: 100%;
height: 220px;
}
.container .row .col .imgBox img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 5px 5px 0 0;
}
/*show more*/
.btn {
padding: .7rem 2rem;
background: royalblue;
border: none;
color: #FFF;
margin: 20px auto;
display: block;
font-size: 1.3rem;
cursor: pointer;
outline: none;
transition: .3s;
}
.btn:hover {
opacity: .8;
}
.footer-basic{
grid-area: f;
}
@media screen and (max-width: 600px) {
.search{
margin-top: 30px;
border: px;
margin-left: 50px;
}
.box1{
width: 384px;
margin-top: 190px;
height: fit-content;
}
.recent{
display: none;
}
.container {
width: 384px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0”>
<meta content="Free HD Movie And Compressed Games Download From a High Speed Server, Try Now , One Click
Direct Download Link Available">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
<title>GameMovieMania</title>
</head>
<body>
<header class="header">
<h1 class="heading"><b><i>GameMovieMania</i></b>
</h1> <br>
<div class="topnav" id="myTopnav">
<a href="index.html" class="active">Home</a>
<a href="games.html">Games</a>
<a href="movies.html">Movies</a>
<a href="contact.html">Contact</a>
<a href="about.html">About</a>
<a href="javascript:java script/code.js;" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
</header>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
<div class="search">
<h3>Search</h3>
<input type="text" id="myInput" placeholder="Search.." onkeyup="searchOn()">
<button type="button"> Search </button>
</div>
<div class="recent">
<h3>Recent Post</h3>
<div class="post1">
<a href="gta5.html">
<img src="images/gta5.jpeg" id="img1">
<p class="text1">Grand Theft Auto 5 | Free <br>Download | Highly Compressed </p>
</a>
</div>
<div class="post2">
<a href="gta4.html">
<img src="images/gta4.jpeg" id="img2">
<p class="text2">Grand Theft Auto 4 | Free <br>Download | Highly Compressed </p>
</a>
</div>
<div class="post3">
<a href="gta3.html">
<img src="images/gta3.jpeg" id="img3">
<p class="text3">Grand Theft Auto 3 | Free <br>Download | Highly Compressed </p>
</a>
</div>
</div>
<div class="box1">
<div class="container">
<ul class="row">
<li class="col">
<div class="imgBox">
<img src="images/gta5.jpeg" alt="">
</div>
<div class="content">
<h2 class="title">
Grand Theft Auto 5 Download | Free Download
</h2>
</div>
</li>
<li class="col">
<div class="imgBox">
<img src="images/nowayhome.jpeg" alt="News">
</div>
<div class="content">
<h2 class="title">
Spiderman No Way Home | Full Movie Download Hindi |
</h2>
</div>
</li>
<li class="col">
<div class="imgBox">
<img src="images/gta4.jpeg" alt="News">
</div>
<div class="content">
<h2 class="title">
Grand Theft Auto 4 Download | Free Download
</h2>
</div>
</li>
<li class="col">
<div class="imgBox">
<img src="images/shershaah.jpeg" alt="News">
</div>
<div class="content">
<h2 class="title">
Shershaah Full movie download HD
</h2>
</div>
</li>
<li class="col">
<a href="sooryavanshi.html">
<div class="imgBox">
<img src="images/sooryavanshi.jpeg" alt="News">
</div>
<div class="content">
<h2 class="title">
Sooryavanshi Full Movie Download HD
</h2>
</div>
</a>
</li>
<li class="col">
<div class="imgBox">
<img src="images/gta3.jpeg" alt="News">
</div>
<div class="content">
<h2 class="title">
Grand Theft Auto 3 Download | Free Download
</h2>
</div>
</li>
<li class="col">
<div class="imgBox">
<img src="1.jpg" alt="News">
</div>
<div class="content">
<h2 class="title">
Android 11: Here are the 8 best new features
</h2>
</div>
</li>
<li class="col">
<div class="imgBox">
<img src="2.jpg" alt="News">
</div>
<div class="content">
<h2 class="title">
PHP 8 Release on November 2020
</h2>
</div>
</li>
<li class="col">
<div class="imgBox">
<img src="1.jpg" alt="News">
</div>
<div class="content">
<h2 class="title">
Android 11: Here are the 8 best new features
</h2>
</div>
</li>
<li class="col">
<div class="imgBox">
<img src="2.jpg" alt="News">
</div>
<div class="content">
<h2 class="title">
PHP 8 Release on November 2020
</h2>
</div>
</li>
<li class="col">
<div class="imgBox">
<img src="1.jpg" alt="News">
</div>
<div class="content">
<h2 class="title">
Android 11: Here are the 8 best new features
</h2>
</div>
</li>
<li class="col">
<div class="imgBox">
<img src="2.jpg" alt="News">
</div>
<div class="content">
<h2 class="title">
PHP 8 Release on November 2020
</h2>
</div>
</li>
</ul>
<button class="btn">Load More</button>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(".col").slice(0, 4).show()
$(".btn").on("click", function() {
$(".col:hidden").slice(0, 4).slideDown()
if ($(".col:hidden").length == 0) {
$(".btn").fadeOut('slow')
}
})
function searchOn() {
let input = document.getElementById('myInput').value
input = input.toLowerCase();
let x = document.getElementsByClassName('col');
for (i = 0; i < x.length; i++) {
if (!x[i].innerHTML.toLowerCase().includes(input)) {
x[i].style.display = "none";
} else {
x[i].style.display = "list-item";
}
}
}
</script>
</div>
<div class="footer-basic">
<footer>
<div class="social">
<a href="#">
<i class="icon ion-social-instagram"></i>
</p>
<a href="#">
<i class="icon ion-social-snapchat"></i>
</a>
<a href="#">
<i class="icon ion-social-twitter"></i>
</a>
<a href="#">
<i class="icon ion-social-facebook"></i>
</a>
</div>
<ul class="list-inline">
<li class="list-inline-item"><a href="index.html">Home</a></li>
<li class="list-inline-item"><a href="about.html">About</a></li>
<li class="list-inline-item"><a href="contact.html">Contact</a></li>
<li class="list-inline-item"><a href="privacy.html">Privacy Policies</a></li>
<li class="list-inline-item"><a href="terms.html">Terms And Conditions</a></li>
</ul>
<p class="copyright">GameMovieMania Corp. © 2022</p>
</footer>
</div>
</body>
</html>
我有一个 Html 页面，其中导航栏和页脚根据屏幕宽度自行调整，但我的主要内容没有自行调整。
我已经应用了媒体查询，但它是针对移动分辨率（517 像素）的，但是当我在另一台屏幕宽度较小的电脑上测试它时，它溢出了
class“bhavya”内的所有区域都溢出屏幕了。
/* Making of Box 1 on Left for posts */
.box1 {
background-color: white;
width: 746px;
height: auto;
border: 1px solid lightgray;
border-radius: 2px;
margin-top: 50px;
margin-left: 50px;
display: block;
}
/* Button to show more */
#myBtn {
background-color: #08f;
border: none;
color: white;
width: 80px;
height: 43px;
margin-left: 5px;
border-radius: 2px;
cursor: pointer;
}
.show {
display: none;
}
/* Styling Box For Search Box */
.search {
background-color: white;
border: 1px solid lightgray;
border-radius: 2px;
width: 384px;
height: 130px;
float: right;
margin-top: 50px;
margin-left: 828px;
display: block;
position: absolute;
}
/* Search Written*/
.search h3 {
margin-bottom: -40px;
text-align: center;
}
/* Style the search box */
.search input[type=text] {
padding: 13px;
border: 1px solid lightgray;
margin-top: 70px;
margin-left: 50px;
font-size: 17px;
height: 15px;
}
/* Style the button */
.search button[type=button] {
background-color: #08f;
border: none;
color: white;
width: 80px;
height: 43px;
margin-left: 5px;
border-radius: 2px;
}
/* Recent Post Column */
.recent {
background-color: white;
border: 1px solid lightgray;
border-radius: 2px;
width: 384px;
height: 850px;
float: right;
margin-top: 220px;
margin-left: 828px;
display: block;
text-align: center;
position: absolute;
}
/* img in recent */
#post1 {
margin-right: 22px;
margin-left: 22px;
margin-top: 22px;
width: 340px;
height: 340px;
}
/* Text below */
.text1 {
margin-right: 22px;
margin-left: 22px;
font-size: 22px;
}
/* 2nd post */
#post2 {
margin-right: 22px;
margin-left: 22px;
margin-top: 22px;
width: 340px;
height: 340px;
}
/* Text below */
.text2 {
margin-right: 22px;
margin-left: 22px;
font-size: 22px;
}
/* 3nd post */
#post3 {
margin-right: 22px;
margin-left: 22px;
margin-top: 22px;
width: 340px;
height: 340px;
}
/* Text below */
.text3 {
margin-right: 22px;
margin-left: 22px;
font-size: 22px;
}
/* Post Section fitting */
.container {
width: 746px;
}
.container .row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(333.33px, 1fr));
}
/* Seperate Post*/
.container .row .col {
margin: 20px;
display: none;
}
/*post Image*/
.container .row .col .imgBox {
width: 100%;
height: 220px;
}
.container .row .col .imgBox img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 5px 5px 0 0;
}
/*show more*/
.btn {
padding: .7rem 2rem;
background: royalblue;
border: none;
color: #FFF;
margin: 20px auto;
display: block;
font-size: 1.3rem;
cursor: pointer;
outline: none;
transition: .3s;
}
.btn:hover {
opacity: .8;
}
@media screen and (max-width: 600px) {
.search {
margin-top: 30px;
border: px;
margin-left: 50px;
}
.box1 {
width: 384px;
margin-top: 190px;
height: fit-content;
}
.recent {
display: none;
}
.container {
width: 384px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0”>
<meta content="Free HD Movie And Compressed Games Download From a High Speed Server, Try Now , One Click
Direct Download Link Available">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
<title>GameMovieMania</title>
</head>
<body>
<h1 class="heading"><b><i>GameMovieMania</i></b></h1> <br>
<div class="topnav" id="myTopnav">
<a href="index.html" class="active">Home</a>
<a href="games.html">Games</a>
<a href="movies.html">Movies</a>
<a href="contact.html">Contact</a>
<a href="about.html">About</a>
<a href="javascript:java script/code.js;" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
<div class="bhavya">
<div class="search">
<h3>Search</h3>
<input type="text" id="myInput" placeholder="Search.." onkeyup="searchOn()">
<button type="button"> Search </button>
</div>
<div class="recent">
<h3>Recent Post</h3>
<div class="post1">
<a href="gta5.html">
<img src="images/gta5.jpeg" id="img1">
<p class="text1">Grand Theft Auto 5 | Free <br>Download | Highly Compressed </p>
</a>
</div>
<div class="post2">
<a href="gta4.html">
<img src="images/gta4.jpeg" id="img2">
<p class="text2">Grand Theft Auto 4 | Free <br>Download | Highly Compressed </p>
</a>
</div>
<div class="post3">
<a href="gta3.html">
<img src="images/gta3.jpeg" id="img3">
<p class="text3">Grand Theft Auto 3 | Free <br>Download | Highly Compressed </p>
</a>
</div>
</div>
<span class="box1">
<div class="container">
<ul class="row">
<li class="col">
<div class="imgBox">
<img src="images/gta5.jpeg" alt="">
</div>
<div class="content">
<h2 class="title">
Grand Theft Auto 5 Download | Free Download
</h2>
</div>
</li>
<li class="col">
<div class="imgBox">
<img src="images/nowayhome.jpeg" alt="News">
</div>
<div class="content">
<h2 class="title">
Spiderman No Way Home | Full Movie Download Hindi |
</h2>
</div>
</li>
<li class="col">
<div class="imgBox">
<img src="images/gta4.jpeg" alt="News">
</div>
<div class="content">
<h2 class="title">
Grand Theft Auto 4 Download | Free Download
</h2>
</div>
</li>
<li class="col">
<div class="imgBox">
<img src="images/shershaah.jpeg" alt="News">
</div>
<div class="content">
<h2 class="title">
Shershaah Full movie download HD
</h2>
</div>
</li>
<li class="col">
<a href="sooryavanshi.html">
<div class="imgBox">
<img src="images/sooryavanshi.jpeg" alt="News">
</div>
<div class="content">
<h2 class="title">
Sooryavanshi Full Movie Download HD
</h2>
</div>
</a>
</li>
<li class="col">
<div class="imgBox">
<img src="images/gta3.jpeg" alt="News">
</div>
<div class="content">
<h2 class="title">
Grand Theft Auto 3 Download | Free Download
</h2>
</div>
</li>
<li class="col">
<div class="imgBox">
<img src="1.jpg" alt="News">
</div>
<div class="content">
<h2 class="title">
Android 11: Here are the 8 best new features
</h2>
</div>
</li>
<li class="col">
<div class="imgBox">
<img src="2.jpg" alt="News">
</div>
<div class="content">
<h2 class="title">
PHP 8 Release on November 2020
</h2>
</div>
</li>
<li class="col">
<div class="imgBox">
<img src="1.jpg" alt="News">
</div>
<div class="content">
<h2 class="title">
Android 11: Here are the 8 best new features
</h2>
</div>
</li>
<li class="col">
<div class="imgBox">
<img src="2.jpg" alt="News">
</div>
<div class="content">
<h2 class="title">
PHP 8 Release on November 2020
</h2>
</div>
</li>
<li class="col">
<div class="imgBox">
<img src="1.jpg" alt="News">
</div>
<div class="content">
<h2 class="title">
Android 11: Here are the 8 best new features
</h2>
</div>
</li>
<li class="col">
<div class="imgBox">
<img src="2.jpg" alt="News">
</div>
<div class="content">
<h2 class="title">
PHP 8 Release on November 2020
</h2>
</div>
</li>
</ul>
<button class="btn">Load More</button>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(".col").slice(0, 4).show()
$(".btn").on("click", function(){
$(".col:hidden").slice(0, 4).slideDown()
if ($(".col:hidden").length == 0) {
$(".btn").fadeOut('slow')
}
})
function searchOn() {
let input = document.getElementById('myInput').value
input=input.toLowerCase();
let x = document.getElementsByClassName('col');
for (i = 0; i < x.length; i++) {
if (!x[i].innerHTML.toLowerCase().includes(input)) {
x[i].style.display="none";
}
else {
x[i].style.display="list-item";
}
}
}
</script>
</span>
</div>
<div class="footer-basic">
<footer>
<div class="social">
<a href="#">
<i class="icon ion-social-instagram"></i>
</a>
<a href="#">
<i class="icon ion-social-snapchat"></i>
</a>
<a href="#">
<i class="icon ion-social-twitter"></i>
</a>
<a href="#">
<i class="icon ion-social-facebook"></i>
</a>
</div>
<ul class="list-inline">
<li class="list-inline-item"><a href="index.html">Home</a></li>
<li class="list-inline-item"><a href="about.html">About</a></li>
<li class="list-inline-item"><a href="contact.html">Contact</a></li>
<li class="list-inline-item"><a href="privacy.html">Privacy Policies</a></li>
<li class="list-inline-item"><a href="terms.html">Terms And Conditions</a></li>
</ul>
<p class="copyright">GameMovieMania Corp. © 2022</p>
</footer>
</div>
</body>
</html>
您可以使用 CSS 溢出 属性。
.bhavya {
overflow-x: hidden; /* Hide horizontal scrollbar */
overflow-y: scroll; /* Add vertical scrollbar */
}
我希望这能有所帮助
我在你的代码中添加了 display:grid 并修改了其中的一些
body{
display:grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 20vh 20vh auto 20vh;
grid-template-areas:
"h h h"
"b b s"
"b b r"
"f f f";
}
.header{
grid-area: h;
}
.box1{
grid-area: b;
background-color: white;
/* width: 746px; */
height: auto;
border: 1px solid lightgray;
border-radius: 2px;
margin-top: 50px;
margin-left: 50px;
display: block;
}
/* Button to show more */
#myBtn{
background-color: #08f;
border: none;
color: white;
width: 80px;
height: 43px;
margin-left: 5px;
border-radius: 2px;
cursor: pointer;
}
.show{
display: none;
}
/* Styling Box For Search Box */
.search{
grid-area: s;
background-color: white;
border: 1px solid lightgray;
border-radius: 2px;
/* width: 384px; */
height: 170px;
/* float: right; */
margin-top: 50px;
/* margin-left: 828px; */
display: block;
/* position: absolute; */
}
/* Search Written*/
.search h3{
margin-bottom: -40px;
text-align: center;
}
/* Style the search box */
.search input[type=text] {
padding: 13px;
border: 1px solid lightgray;
margin-top: 70px;
margin-left: 50px;
font-size: 17px;
height: 15px;
}
/* Style the button */
.search button[type=button] {
background-color: #08f;
border: none;
color: white;
width: 80px;
height: 43px;
margin-left: 5px;
border-radius: 2px;
}
/* Recent Post Column */
.recent{
grid-area: r;
background-color: white;
border: 1px solid lightgray;
border-radius: 2px;
/* width: 384px; */
height: 100%;
/* float: right; */
margin-top: 220px;
/* margin-left: 828px; */
display: block;
text-align: center;
/* position: absolute; */
}
/* img in recent */
#post1 {
margin-right: 22px;
margin-left: 22px;
margin-top: 22px;
width: 340px;
height: 340px;
}
/* Text below */
.text1 {
margin-right: 22px;
margin-left: 22px;
font-size: 22px;
}
/* 2nd post */
#post2 {
margin-right: 22px;
margin-left: 22px;
margin-top: 22px;
width: 340px;
height: 340px;
}
/* Text below */
.text2 {
margin-right: 22px;
margin-left: 22px;
font-size: 22px;
}
/* 3nd post */
#post3 {
margin-right: 22px;
margin-left: 22px;
margin-top: 22px;
width: 340px;
height: 340px;
}
/* Text below */
.text3 {
margin-right: 22px;
margin-left: 22px;
font-size: 22px;
}
/* Post Section fitting */
.container {
/* width: 746px; */
}
.container .row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(333.33px, 1fr));
}
/* Seperate Post*/
.container .row .col {
margin: 20px;
display: none;
}
/*post Image*/
.container .row .col .imgBox {
width: 100%;
height: 220px;
}
.container .row .col .imgBox img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 5px 5px 0 0;
}
/*show more*/
.btn {
padding: .7rem 2rem;
background: royalblue;
border: none;
color: #FFF;
margin: 20px auto;
display: block;
font-size: 1.3rem;
cursor: pointer;
outline: none;
transition: .3s;
}
.btn:hover {
opacity: .8;
}
.footer-basic{
grid-area: f;
}
@media screen and (max-width: 600px) {
.search{
margin-top: 30px;
border: px;
margin-left: 50px;
}
.box1{
width: 384px;
margin-top: 190px;
height: fit-content;
}
.recent{
display: none;
}
.container {
width: 384px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0”>
<meta content="Free HD Movie And Compressed Games Download From a High Speed Server, Try Now , One Click
Direct Download Link Available">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
<title>GameMovieMania</title>
</head>
<body>
<header class="header">
<h1 class="heading"><b><i>GameMovieMania</i></b>
</h1> <br>
<div class="topnav" id="myTopnav">
<a href="index.html" class="active">Home</a>
<a href="games.html">Games</a>
<a href="movies.html">Movies</a>
<a href="contact.html">Contact</a>
<a href="about.html">About</a>
<a href="javascript:java script/code.js;" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
</header>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
<div class="search">
<h3>Search</h3>
<input type="text" id="myInput" placeholder="Search.." onkeyup="searchOn()">
<button type="button"> Search </button>
</div>
<div class="recent">
<h3>Recent Post</h3>
<div class="post1">
<a href="gta5.html">
<img src="images/gta5.jpeg" id="img1">
<p class="text1">Grand Theft Auto 5 | Free <br>Download | Highly Compressed </p>
</a>
</div>
<div class="post2">
<a href="gta4.html">
<img src="images/gta4.jpeg" id="img2">
<p class="text2">Grand Theft Auto 4 | Free <br>Download | Highly Compressed </p>
</a>
</div>
<div class="post3">
<a href="gta3.html">
<img src="images/gta3.jpeg" id="img3">
<p class="text3">Grand Theft Auto 3 | Free <br>Download | Highly Compressed </p>
</a>
</div>
</div>
<div class="box1">
<div class="container">
<ul class="row">
<li class="col">
<div class="imgBox">
<img src="images/gta5.jpeg" alt="">
</div>
<div class="content">
<h2 class="title">
Grand Theft Auto 5 Download | Free Download
</h2>
</div>
</li>
<li class="col">
<div class="imgBox">
<img src="images/nowayhome.jpeg" alt="News">
</div>
<div class="content">
<h2 class="title">
Spiderman No Way Home | Full Movie Download Hindi |
</h2>
</div>
</li>
<li class="col">
<div class="imgBox">
<img src="images/gta4.jpeg" alt="News">
</div>
<div class="content">
<h2 class="title">
Grand Theft Auto 4 Download | Free Download
</h2>
</div>
</li>
<li class="col">
<div class="imgBox">
<img src="images/shershaah.jpeg" alt="News">
</div>
<div class="content">
<h2 class="title">
Shershaah Full movie download HD
</h2>
</div>
</li>
<li class="col">
<a href="sooryavanshi.html">
<div class="imgBox">
<img src="images/sooryavanshi.jpeg" alt="News">
</div>
<div class="content">
<h2 class="title">
Sooryavanshi Full Movie Download HD
</h2>
</div>
</a>
</li>
<li class="col">
<div class="imgBox">
<img src="images/gta3.jpeg" alt="News">
</div>
<div class="content">
<h2 class="title">
Grand Theft Auto 3 Download | Free Download
</h2>
</div>
</li>
<li class="col">
<div class="imgBox">
<img src="1.jpg" alt="News">
</div>
<div class="content">
<h2 class="title">
Android 11: Here are the 8 best new features
</h2>
</div>
</li>
<li class="col">
<div class="imgBox">
<img src="2.jpg" alt="News">
</div>
<div class="content">
<h2 class="title">
PHP 8 Release on November 2020
</h2>
</div>
</li>
<li class="col">
<div class="imgBox">
<img src="1.jpg" alt="News">
</div>
<div class="content">
<h2 class="title">
Android 11: Here are the 8 best new features
</h2>
</div>
</li>
<li class="col">
<div class="imgBox">
<img src="2.jpg" alt="News">
</div>
<div class="content">
<h2 class="title">
PHP 8 Release on November 2020
</h2>
</div>
</li>
<li class="col">
<div class="imgBox">
<img src="1.jpg" alt="News">
</div>
<div class="content">
<h2 class="title">
Android 11: Here are the 8 best new features
</h2>
</div>
</li>
<li class="col">
<div class="imgBox">
<img src="2.jpg" alt="News">
</div>
<div class="content">
<h2 class="title">
PHP 8 Release on November 2020
</h2>
</div>
</li>
</ul>
<button class="btn">Load More</button>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(".col").slice(0, 4).show()
$(".btn").on("click", function() {
$(".col:hidden").slice(0, 4).slideDown()
if ($(".col:hidden").length == 0) {
$(".btn").fadeOut('slow')
}
})
function searchOn() {
let input = document.getElementById('myInput').value
input = input.toLowerCase();
let x = document.getElementsByClassName('col');
for (i = 0; i < x.length; i++) {
if (!x[i].innerHTML.toLowerCase().includes(input)) {
x[i].style.display = "none";
} else {
x[i].style.display = "list-item";
}
}
}
</script>
</div>
<div class="footer-basic">
<footer>
<div class="social">
<a href="#">
<i class="icon ion-social-instagram"></i>
</p>
<a href="#">
<i class="icon ion-social-snapchat"></i>
</a>
<a href="#">
<i class="icon ion-social-twitter"></i>
</a>
<a href="#">
<i class="icon ion-social-facebook"></i>
</a>
</div>
<ul class="list-inline">
<li class="list-inline-item"><a href="index.html">Home</a></li>
<li class="list-inline-item"><a href="about.html">About</a></li>
<li class="list-inline-item"><a href="contact.html">Contact</a></li>
<li class="list-inline-item"><a href="privacy.html">Privacy Policies</a></li>
<li class="list-inline-item"><a href="terms.html">Terms And Conditions</a></li>
</ul>
<p class="copyright">GameMovieMania Corp. © 2022</p>
</footer>
</div>
</body>
</html>