如何在HTML中扩展整个页面的页面高度

  • 本文关键字:高度 扩展 HTML html css
  • 更新时间 :
  • 英文 :


我试图在HTML中扩展页面高度,因为我有一个侧边栏,需要页面更高,因为它有很多文本,我不希望它溢出。我该怎么做?

这是我的CSS代码。我尝试添加html, body { height: 5000; }但它只延伸了侧边栏右侧的主体部分的高度。那么我该如何解决这个问题呢?

html,
body {
height: 5000px;
}
.sidenav {
height: 100%;
width: 180px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #f6f6f6;
overflow-x: hidden;
padding-top: 20px;
border-right: solid 1px #a7d7f9;
overflow: hidden;
}
.sidenav a {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 0.75em;
color: #0645ad;
display: block;
font-family: sans-serif;
}
.sidenav a:hover {
text-decoration: underline;
}
.main {
margin-left: 160px;
/* Same as the width of the sidenav */
font-size: 28px;
/* Increased text to enable scrolling */
padding: 0px 10px;
}
@media screen and (max-height: 450px) {
.sidenav {
padding-top: 15px;
}
.sidenav a {
font-size: 18px;
}
}
.image-container {
display: flex;
justify-content: center;
padding-bottom: 40px;
}
.wikiLogo {
width: 135px;
}
.sidenavSubTitleVector {
background-image: linear-gradient(to right, rgba(200, 204, 209, 0) 0, #c8ccd1 33%, #c8ccd1 66%, rgba(200, 204, 209, 0) 100%);
background-position: center bottom;
background-repeat: no-repeat;
background-size: 100% 1px;
padding-top: 20px;
margin-left: 15px;
color: #54595d;
font-family: sans-serif;
font-size: 0.75em;
padding-top: 15px;
padding-bottom: 5px;
}
<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]>      <html class="no-js"> <!--<![endif]-->
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Rockstar Games</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="sidenav">
<div class="image-container">
<img class="wikiLogo" src="Images/wikiLogo.png" alt="">
</div>
<a href="#about">Main Page</a>
<a href="#services">Contents</a>
<a href="#clients">Current Events</a>
<a href="#contact">Random Article</a>
<a href="#contact">About Wikipedia</a>
<a href="#contact">Contact us</a>
<a href="#contact">Donate</a>
<div class="sidenavSubTitleVector">Contribute</div>
<a href="#contact">Help</a>
<a href="#contact">Learn to edit</a>
<a href="#contact">Community portal</a>
<a href="#contact">Recent changes</a>
<a href="#contact">Upload file</a>
<div class="sidenavSubTitleVector">Tools</div>
<a href="#contact">What links here</a>
<a href="#contact">Related changes</a>
<a href="#contact">Special pages</a>
<a href="#contact">Permanent link</a>
<a href="#contact">Page information</a>
<a href="#contact">Cite this page</a>
<a href="#contact">Wikidata Item</a>
<div class="sidenavSubTitleVector">Print/export</div>
<a href="#contact">Downlaod as PDF</a>
<a href="#contact">Printable version</a>
</div>
<div class="main">
<h2>Body</h2>
<p>Body</p>
</div>
<script src="" async defer></script>
</body>
</html>

我建议您将图像作为网页的背景,并将CSS作为背景"重复";,则该网站将取决于侧边栏的内容。

最新更新